ReactでCSVファイルを読み込んで表に表示する方法

名前,郵便番号,住所,メモ
佐藤,0600000,"北海道札幌市, 中央区","1行目
2行目"
鈴木,1000001,東京都千代田区,"""至急""と書かれた箱"
高橋,5300001,大阪府大阪市,<b>太字</b>

[
  [ '名前', '郵便番号', '住所', 'メモ' ],
  [ '佐藤', '0600000', '"北海道札幌市', ' 中央区"', '"1行目' ],
  [ '2行目"' ],
  [ '鈴木', '1000001', '東京都千代田区', '"""至急""と書かれた箱"' ],
  [ '高橋', '5300001', '大阪府大阪市', '<b>太字</b>' ],
  [ '' ]
]

[ '名前', '郵便番号', '住所', 'メモ' ]
[
  {
    '名前': '佐藤',
    '郵便番号': '0600000',
    '住所': '北海道札幌市, 中央区',
    'メモ': '1行目\r\n2行目'
  },
  {
    '名前': '鈴木',
    '郵便番号': '1000001',
    '住所': '東京都千代田区',
    'メモ': '"至急"と書かれた箱'
  },
  { '名前': '高橋', '郵便番号': '5300001', '住所': '大阪府大阪市', 'メモ': '<b>太字</b>' }
]
errors: []

// UTF-8 として読めなければ、Shift_JIS として読み直す
export async function readCsvText(file: File): Promise<{ text: string; encoding: string }> {
  const buffer = await file.arrayBuffer();
  try {
    // fatal: true にすると、UTF-8 として正しくないバイトがあったときに例外になる
    const text = new TextDecoder('utf-8', { fatal: true }).decode(buffer);
    return { text, encoding: 'UTF-8' };
  } catch {
    return { text: new TextDecoder('shift_jis').decode(buffer), encoding: 'Shift_JIS' };
  }
}

import { useState, type ChangeEvent } from 'react';
import Papa from 'papaparse';
import { readCsvText } from './readCsvText';

type Row = Record<string, string>;

type Table = {
  fileName: string;
  encoding: string;
  fields: string[];
  rows: Row[];
  errors: Papa.ParseError[];
};

export function CsvImport() {
  const [table, setTable] = useState<Table | null>(null);

  async function handleChange(e: ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;

    const { text, encoding } = await readCsvText(file);
    const result = Papa.parse<Row>(text, { header: true, skipEmptyLines: true });
    setTable({
      fileName: file.name,
      encoding,
      fields: result.meta.fields ?? [],
      rows: result.data,
      errors: result.errors,
    });
  }

  return (
    <div>
      <label className="pick">
        CSVファイルを選ぶ
        <input type="file" accept=".csv,text/csv" onChange={handleChange} />
      </label>

      {table && (
        <>
          {table.errors.length > 0 && (
            <ul role="alert" className="errors">
              {table.errors.map((err, i) => (
                <li key={i}>
                  {err.row !== undefined ? `${err.row + 1}行目のデータ：` : ''}
                  {err.message}
                </li>
              ))}
            </ul>
          )}
          <table>
            <caption>
              {table.fileName}（{table.encoding}、{table.rows.length}行）
            </caption>
            <thead>
              <tr>
                {table.fields.map((field) => (
                  <th key={field} scope="col">
                    {field}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {table.rows.map((row, i) => (
                <tr key={i}>
                  {table.fields.map((field) => (
                    <td key={field}>{row[field]}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </>
      )}
    </div>
  );
}

caption: members.csv（UTF-8、3行）
th: [ '名前', '郵便番号', '住所', 'メモ' ]
tr: ["佐藤","0600000","北海道札幌市, 中央区","1行目\n2行目"]
tr: ["鈴木","1000001","東京都千代田区","\"至急\"と書かれた箱"]
tr: ["高橋","5300001","大阪府大阪市","<b>太字</b>"]
errors: []
td の中の b 要素の数: 0

id,名前,名前
1,佐藤,さとう
2,鈴木
3,高橋,たかはし,余り

caption: broken.csv（UTF-8、3行）
th: [ 'id', '名前', '名前_1' ]
tr: ["1","佐藤","さとう"]
tr: ["2","鈴木",""]
tr: ["3","高橋","たかはし"]
errors: [
  '2行目のデータ：Too few fields: expected 3 fields but parsed 2',
  '3行目のデータ：Too many fields: expected 3 fields but parsed 4'
]

.pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pick:focus-within { outline: 3px solid #067a98; outline-offset: 2px; }