ReactでShift_JISのファイルを文字化けせずに読む方法

在庫メモ
①りんご　120円
②みかん　80円
㈱髙﨑商店〜ｱｲｳ
C:\data\メモ.txt

�݌Ƀ���
�@��񂲁@120�~
�A�݂���@80�~
���������X�`���
C:\data\����.txt

const bytes = await file.arrayBuffer();
const text = new TextDecoder('shift_jis').decode(bytes);

shift_jis → shift_jis
Shift_JIS → shift_jis
sjis → shift_jis
shift-jis → shift_jis
windows-31j → shift_jis
ms932 → shift_jis
cp932 → RangeError
x-sjis → shift_jis
ms_kanji → shift_jis
csshiftjis → shift_jis

export type Choice = 'auto' | 'utf-8' | 'shift_jis';

export type Decoded = { text: string; encoding: 'UTF-8' | 'Shift_JIS' };

export function decodeBytes(bytes: Uint8Array, choice: Choice): Decoded {
  if (choice === 'utf-8') return { text: new TextDecoder('utf-8').decode(bytes), encoding: 'UTF-8' };
  if (choice === 'shift_jis') return { text: new TextDecoder('shift_jis').decode(bytes), encoding: 'Shift_JIS' };
  // 自動：UTF-8 として読めなければ（fatal で TypeError になれば）Shift_JIS で読む
  try {
    return { text: new TextDecoder('utf-8', { fatal: true }).decode(bytes), encoding: 'UTF-8' };
  } catch {
    return { text: new TextDecoder('shift_jis').decode(bytes), encoding: 'Shift_JIS' };
  }
}

import { useId, useMemo, useState } from 'react';
import { decodeBytes, type Choice } from './decode';

type Loaded = { name: string; bytes: Uint8Array };

export function TextFileViewer() {
  const [loaded, setLoaded] = useState<Loaded | null>(null);
  const [choice, setChoice] = useState<Choice>('auto');
  const fileId = useId();
  const choiceId = useId();

  // バイト列はそのまま持っておき、文字コードを変えたら読み直す
  const decoded = useMemo(() => (loaded ? decodeBytes(loaded.bytes, choice) : null), [loaded, choice]);

  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    const bytes = new Uint8Array(await file.arrayBuffer());
    setLoaded({ name: file.name, bytes });
  }

  return (
    <div className="viewer">
      <p>
        <label htmlFor={fileId}>テキストファイル</label>
        <input id={fileId} type="file" accept=".txt,.csv,text/plain,text/csv" onChange={handleChange} />
      </p>
      <p>
        <label htmlFor={choiceId}>文字コード</label>
        <select id={choiceId} value={choice} onChange={(e) => setChoice(e.target.value as Choice)}>
          <option value="auto">自動（UTF-8 → Shift_JIS）</option>
          <option value="utf-8">UTF-8</option>
          <option value="shift_jis">Shift_JIS</option>
        </select>
      </p>
      {loaded && decoded && (
        <section aria-live="polite">
          <p className="name">
            {loaded.name}（{loaded.bytes.length}バイト、<span className="encoding">{decoded.encoding}</span>で表示）
          </p>
          <pre className="text">{decoded.text}</pre>
        </section>
      )}
    </div>
  );
}

蝨ｨ蠎ｫ繝｡繝｢
竭�繧翫ｓ縺斐120蜀�
竭｡縺ｿ縺九ｓ縲80蜀�
繹ｱ鬮呻ｨ大膚蠎励懶ｽｱ�ｲ�ｳ
C:\data\繝｡繝｢.txt

①  SHIFT_JIS: NG  CP932: 87 40
㈱  SHIFT_JIS: NG  CP932: 87 8a
髙  SHIFT_JIS: NG  CP932: fb fc
﨑  SHIFT_JIS: NG  CP932: fa b1
〜  SHIFT_JIS: 81 60  CP932: 81 60
～  SHIFT_JIS: NG  CP932: 81 60
ｱ  SHIFT_JIS: b1  CP932: b1