文字コードがShift-JISのCSVファイルを読み込む方法＠React [サンプル付き]

2022-02-212022-09-19

React や node.js は文字コードが utf-8 で動いているため、 utf-8 以外の CSVファイル を読み込んで操作するにはちょっとした工夫（文字コードの変換）が必要になります。

準備

必要なライブラリをインストールします。

npm i iconv-lite
npm i csv

https://github.com/ashtuchkin/iconv-lite
文字コードを変換するために使います。

https://github.com/adaltas/node-csv
CSV文字列をパースするために使います。

CSVファイルを読み込む

File API を使って読み込みます。

UTF-8 の CSV の場合

const csv = event.target.files[0];
var reader = new FileReader();
reader.readAsText(csv);

SHIFT-JIS の CSV の場合

const csv = event.target.files[0];
const reader = new FileReader();
const readCsv = () => {
  const csvString = iconv.decode(Buffer.from(reader.result), "Shift_JIS");
};
reader.onload = readCsv;
reader.readAsArrayBuffer(csv);

readAsText は読み込んだものを文字コードを UTF-8 のテキストとして扱ってしまうため、
readAsArrayBuffer でバッファに取り込んで、iconv.decode を使って UTF-8 の文字列に変換しています。

JavaScriptのオブジェクトに変換する

CSVを文字列として取り込んだら、JavaScript で扱いやすいように変換します。

const records = parse(csvString, { columns: true, skip_empty_lines: true });

サンプル

CSVファイルの文字コードが Shift-JIS のとき。

import React from 'React';
import iconv from 'iconv-lite';
import { parse } from 'csv-parse/lib/sync';

export default function Sample() {
  const handleRead = (e) => {
    const csv = e.target.files[0];
    if (csv === undefined) {
      // ダイアログをキャンセルした場合は何もしない。
      return;
    }

    const reader = new FileReader();
    const readCsv = () => {
      // CSVファイルの文字コードを UTF-8 に変換する。
      const csvString = iconv.decode(Buffer.from(reader.result), "Shift_JIS");
      // CSVファイルを JavaScriptのオブジェクト に変換する。
      const records = parse(csvString, { columns: true, skip_empty_lines: true });

      // TODO: 読込後の処理
      console.log(records);
    };

    reader.onload = readCsv;
    reader.onerror = () => console.log(reader.error);
    reader.readAsArrayBuffer(csv);
  };

  return (
    <input type="file" onChange={handleRead} />
  );
}

React 以外でも使う機会がありそうなので、メモしておきます。