とある機能を実装していたら、文字コードが違って文字化けしちゃってたなんてことがたまにあるかと思います。

最近の実装でCSVファイルを読み込む機能の実装があったのですが、Shift-JISのCSVデータを読み込ませると文字化けするという事態に遭遇しました。

読み込ませるデータの文字コードをUTF-8に変換して読み込ませるのも一つの手段ですが、ユーザーからするとめんどくさいだけです。なので今回はShift-JISを読み込ませても文字化けさせずに表示させる方向で実装するようにしました。

encoding.jsで文字コードの変換を行う

今回はencoding.jsというライブラリを使ってShift-JISからUTF8に文字コードの変換を行なっていきます。

厳密には読み込んだデータの文字コードからUNICODEに変換するといった処理を行なっていきます。

encoding.jsはざっくり言うと、JavaScript内で対象の文字コードが何なのかを判別することと対象の文字コードを指定した文字コードに変換することができるライブラリです。これを利用して今回は読み込んだファイルの文字コードを変換していきます。

まずはencoding.jsをインストールしていきましょう。

1$ npm install --save encoding-japanese

これでインストールは終わりなので早速コードを書いていきます。

最初に結論から、文字コードの変換処理に必要なコードは以下の通りです。

1import Encoding from 'encoding-japanese';
2
3// 途中省略
4
5  methods: {
6    onFileSelect: function (fileData) {
7      const reader = new FileReader();
8      // ファイル読み込みに成功したときの処理
9      reader.onload = function (e) {
10        const codes = new Uint8Array(e.target.result);
11        const encoding = Encoding.detect(codes);
12        const unicodeString = Encoding.convert(codes, {
13          to: 'UNICODE',
14          from: encoding,
15          type: 'string',
16        });
17      }.bind(this);
18      // CSVファイルの読み込み実行
19      reader.readAsArrayBuffer(fileData);
20    },
21  }

私が実装した時はvue.jsを導入していたのでvueの書き方になっていますが、普通にJavaScriptでも動作するかと思います。

では一つ一つ見ていきます。

1行目ではencoding.jsの読み込みを行なっています。

では文字コードを変換する関数の中身を見ていきます。

19行目でcsvファイルを読み込みます。バイナリデータを扱うことになるので、readAsArrayBuffer を使います。

1reader.readAsArrayBuffer(fileData)

9~17行目の処理で実際に文字コードを変換していますが、その部分を詳しく見ていきましょう。

以下の処理で読み込んだバイナリデータを配列に変換します。encoding.jsのメソッドではこの配列を使って処理を行なっていきます。

1const codes = new Uint8Array(e.target.result);

変換した配列の文字コードが何なのかを11行目の処理で取得してきます。

1const encoding = Encoding.detect(codes);

Encoding.detect()は引数の文字コードの種類を文字列で返してくれます。ここで取得したものを以下の処理で使っていきます。

1const unicodeString = Encoding.convert(codes, {
2  to: 'UNICODE',
3  from: encoding,
4  type: 'string',
5});

Encoding.convert()は引数に与えた配列のデータを何の文字コードから何の文字コードに変換するかを指定することで文字コードの変換処理を行うメソッドです。

11行目で取得した文字コードでをfrom部分に与えることで、読み込んだ任意の文字コードからUNICODEに変換することができます。

なのでShift-JIS以外の文字コードのデータが来ても安心です！

ここまでの処理で読み込んだデータの文字コードからにUNICODEに変換することに成功しました！！

最後に

encoding.jsを使っての文字コード変換はいかがだったでしょうか。

最近では基本的にUTF8のデータが使われるようになっているので頻繁に使うことはないと思いますが、古いデータでも動くようにするといった仕様になることもたまにあるので覚えておくと便利かと思います。