encoding.jsを使ってJavaScriptで文字コードを変換する
2023.06.12
とある機能を実装していたら文字化けして、文字コードが違って文字化けしちゃってたなんてことがたまにあるかと思います。
最近の実装で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 |
これでインストールは終わりなので早速コードを書いていきます。
最初に結論から、文字コードの変換処理に必要なコードは以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import Encoding from 'encoding-japanese'; // 途中省略 methods: { onFileSelect: function (fileData) { const reader = new FileReader(); // ファイル読み込みに成功したときの処理 reader.onload = function (e) { const codes = new Uint8Array(e.target.result); const encoding = Encoding.detect(codes); const unicodeString = Encoding.convert(codes, { to: 'UNICODE', from: encoding, type: 'string', }); }.bind(this); // CSVファイルの読み込み実行 reader.readAsArrayBuffer(fileData); }, } |
私が実装した時はvue.jsを導入していたのでvueの書き方になっていますが、普通にJavaScriptでも動作するかと思います。
では一つ一つ見ていきます。
1行目ではencoding.jsの読み込みを行なっています。
では文字コードを変換する関数の中身を見ていきます。
19行目でcsvファイルを読み込みます。バイナリデータを扱うことになるので、readAsArrayBuffer を使います。
1 | reader.readAsArrayBuffer(fileData) |
9~17行目の処理で実際に文字コードを変換していますが、その部分を詳しく見ていきましょう。
以下の処理で読み込んだバイナリデータを配列に変換します。encoding.jsのメソッドではこの配列を使って処理を行なっていきます。
1 | const codes = new Uint8Array(e.target.result); |
変換した配列の文字コードが何なのかを11行目の処理で取得してきます。
1 | const encoding = Encoding.detect(codes); |
Encoding.detect()は引数の文字コードの種類を文字列で返してくれます。ここで取得したものを以下の処理で使っていきます。
1 2 3 4 5 | const unicodeString = Encoding.convert(codes, { to: 'UNICODE', from: encoding, type: 'string', }); |
Encoding.convert()は引数に与えた配列のデータを何の文字コードから何の文字コードに変換するかを指定することで文字コードの変換処理を行うメソッドです。
11行目で取得した文字コードでをfrom部分に与えることで、読み込んだ任意の文字コードからUNICODEに変換することができます。
なのでShift-JIS以外の文字コードのデータが来ても安心です！
ここまでの処理で読み込んだデータの文字コードからにUNICODEに変換することに成功しました！！
最後に
encoding.jsを使っての文字コード変換はいかがだったでしょうか。
最近では基本的にUTF8のデータが使われるようになっているので頻繁に使うことはないと思いますが、古いデータでも動くようにするといった仕様になることもたまにあるので覚えておくと便利かと思います。
書いた人はこんな人
IT技術6月 6, 2023encoding.jsを使ってJavaScriptで文字コードを変換する- IT技術1月 19, 2023Laravelでboolean型にしたはずのデータがint型で返ってくる
- IT技術10月 17, 2022メンターをやってみて逆に学んだこと
- IT技術7月 1, 2022Swaggerで作成したAPIドキュメントをPDF化
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
