encoding.js を利用して Shift_JIS の CSV ファイルを SheetJS で取り込んでみた

こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。

SheetJSはExcelデータを扱えるJavaScriptライブラリなのですが、実はCSVファイルも読み込むことが出来ます。

一方で、単純に扱えるCSVファイルは「文字コードをUTF8として保存したCSVファイル」となり、それ以外の文字コードでは文字化けを起こします。また、SheetJS自体にCSVファイルの文字コードを指定して読み込む機能は無いようでした。

そこで今回、encoding.jsを利用することで Shift_JIS の CSV ファイルを文字コード変換し、 SheetJS で取り込む方法について書いていきたいと思います。

前提条件

今回試した環境における各パッケージのバージョンは、以下になります。

• encoding-japanese (encoding.js)
  • ^2.0.0
• xlsx (SheetJS)
  • 0.18.10
• react-dropzone
  • ^14.2.1
• next (NextJS)
  • ^11.1.4
• react
  • 17.0.2

SheetJSの基本的な使い方については、ここでは触れません。また、ファイルを画面上から取り込むためにreact-dropzoneを利用していますが、こちらも詳細は割愛します。

はじめに

まず最初に「何故 Shift_JIS のCSVを扱おうとしているのか？」について、少し触れておきます。

CSVファイルのデータ元としては「自分で1からエディタで作成する」、「どこかからダウンロードする」というものがありますが、よくあるケースとして 「Excelファイルの内容をCSVとして保存する」 というケースがあるかと思います。

一方で、この場合には往々にして文字コードがShift_JISになっており、問題になることが多いです。

最近のバージョンのExcelだったり、明示的に文字コードを指定して保存することでUTF-8で保存することもできるのですが、良くあるケースとして、この「Shift_JIS のCSVファイルを、SheetJSでどうやって取り込むか」について取り上げています。

encoding.js について

こちらは文字コードの判定や変換をしてくれる素敵な JavaScript ライブラリになります。

利用データとしてUint8ArrayなどのTypedArrayやNode.jsのBufferがサポートされています。

更に README のAPI仕様にも記載されていますが、文字コード変換用のconvert関数は、「文字コードを自動判定して、目的の文字コードに変換してくれる」という素敵な仕様になっています。（もちろん明示的に指定もできます）

このライブラリがとても強力なので、今回はこのライブラリを利用させていただいています。

encoding.js を SheetJS と組み合わせて利用してみる

では、本題の SheetJS との組み合わせです。具体的なコードとしては以下のようにしました。

import Encoding from 'encoding-japanese'
import * as XLSX from 'xlsx/xlsx.mjs'
import { WorkBook, WorkSheet } from 'xlsx/xlsx.mjs'

(...snip...)

export default function FooBar(props) {

(...snip...)

  const onDrop = useCallback(
    (acceptedFiles) => {
      acceptedFiles.map(async (file: File) => {

        let fileData: ArrayBuffer = await file.arrayBuffer()
        fileData = Encoding.convert(new Uint8Array(fileData), {
          to: 'UNICODE',
          type: 'arraybuffer',
        })

        const workbook: WorkBook = XLSX.read(fileData, { type: 'buffer' })

(...snip...)

まず、react-dropzoneを利用してファイルをFileとして扱っています。これを以下のように変換しています。

File (Shift_JIS)
↓
ArrayBuffer (Shift_JIS)
↓
Uint8Array (Shift_JIS)
↓
Encoding.convert で変換
↓
ArrayBuffer (UNICODE)

そして、最後に SheetJS でファイルを読み込みますが、その際には{ type: 'buffer' }オプションを指定しています。

これにより、ArrayBufferのままExcelのワークブックとして取り込むことができます。

なお、最初はEncoding.convertで変換する際にarrayとして返却し、SheetJS では{ type: 'array' }として読み込もうとしていたのですが、こちらはうまくいきませんでした。

SheetJS のXLSX.readのオプションについては、以下が参考になりました。

実際にこのコードを利用して、文字コード変換をする前、文字コード変換をした後の画面サンプルがこちらです。

・Shift_JISのまま

・変換後

バッチリ変換できました！

まとめ

以上、encoding.js を利用して Shift_JIS の CSV ファイルを SheetJS で取り込んでみました。

Shift_JIS の CSV ファイルを取り扱うケースは割と多いかなと思われるので、文字コード変換ができるencoding.jsのことを覚えておきたいと思います。

どなたかのお役に立てば幸いです。それでは！