JavaScirptでファイルの文字コード変換ができる「encoding.js」

JavaScirptの標準APIには、文字コードを変換するような物は用意されていない。かといって自前で文字コード変換のロジックを組むのは現実的ではない。

「encoding.js」は JavaScirpt（TypeScirpt）で手軽に文字コード変換ができるライブラリである。これを使うことで、テキストファイルの文字コード変換などをブラウザの JavaScirptだけで実装することができ、サーバー側の実装が不要となる。

■ 公式GItはこちら
https://github.com/polygonplanet/encoding.js

スポンサーリンク

インストール

インストールはお馴染みの npm で。

npm install --save encoding-japanese

TypeScriptの場合は型定義もインストール。

npm install --save-dev @types/encoding-japanese

使ってみる

まずは、手軽に変数に格納された Unicode形式の文字列を SJIS と UTF8にそれぞれ変換してみる。

Unicode → SJIS

文字コードの変換には convert 関数を使用し、１つ目の引数に変換する文字列またはコードの配列、２つ目の引数に変換先の文字コードを指定する。

import Encoding from  'encoding-japanese'

const sjisStr = Encoding.convert(text, "SJIS")
console.log(Encoding.stringToCode(sjisStr))
// [130, 160, 130, 162, 130, 164, 130, 166, 130, 168]

Unicode → UTF8

import Encoding from  'encoding-japanese'

const utf8Str = Encoding.convert(text, "UTF8")
console.log(Encoding.stringToCode(utf8Str))      
// [227, 129, 130, 227, 129, 132, 227, 129, 134, 227, 129, 136, 227, 129, 138]

UTF8では、全角文字は３バイトで表されるので、戻りの配列が１５（バイト）になる。

対応する文字コード

公式Gitより

ファイルの文字コードを変換する

File APIと組み合わせることで、ファイル選択（<input type="file"/>）で指定されたテキストファイルの文字コード変換もできる。

■ JavaScirpt

const file = document.getElementById("file")
const download = document.getElementById("download")

file.addEventListener("change", (e) => {

  //File APIで選択されたファイルを ArrayBufferとして読み込み
  const f = e.target.files[0]
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    const result = reader.result

    //選択されたファイルを Shift-JISへ文字コード変換
    //※ fromに"AUTO"を指定すると入力元の文字コードを自動判定してくれる
    const conv = Encoding.convert(
      new Uint8Array(result),
      {
        to: "SJIS",
        from: 'AUTO',
      }
    )

    //BLOBに変換してダウンロード
    const uInt8List = new Uint8Array(conv);
    const blob = new Blob([uInt8List], { type: 'text/plain' });
    download.href = window.URL.createObjectURL(blob)
    download.click()
  });
  reader.readAsArrayBuffer(f);
})

■ HTML

<input type="file" id="file"/>
<a id="download" style="display:none" download="sjis.txt"></a>

スポンサーリンク

まとめ

JavaScriptだけで文字コード変換ができる「encoding.js」について紹介しました。

サーバーサイドの実装を必要とせずコード変換できるのは、非常に素晴らしいことです。