ReactでShift-JISのCSVをUTF-8に変換しAPIに送信する

CSVファイルの文字コードは環境によって異なり、特に日本国内ではShift-JISが一般的に使用されます。
しかし、WebアプリケーションやAPIの多くはUTF-8を前提としているため、文字コードの変換が必要になります。
本記事では、ReactでShift-JISのCSVを読み取り、UTF-8に変換してAPIに送信する方法を解説します。

課題

通常、ブラウザのFileReader APIでCSVファイルを読み取ると、UTF-8とみなされてしまい、Shift-JISの文字が文字化けしてしまいます。
そのため、適切な方法でShift-JISをUTF-8に変換する処理が必要です。

解決策

ブラウザで利用可能な方法として、TextDecoder APIを活用することでShift-JISをUTF-8に変換できます。

CSVファイルを読み込む

const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
  const file = event.target.files?.[0];
  if (!file) return;

  const reader = new FileReader();
  reader.readAsArrayBuffer(file);
  
  reader.onload = () => {
    if (!(reader.result instanceof ArrayBuffer)) {
      alert("ファイルの読み込みに失敗しました。");
      return;
    }
    
    const text = convertShiftJISToUTF8(reader.result);
    processCSV(text);
  };
};

Shift-JISをUTF-8に変換する

const convertShiftJISToUTF8 = (arrayBuffer: ArrayBuffer): string => {
  const uint8Array = new Uint8Array(arrayBuffer);
  const decoder = new TextDecoder("shift-jis");
  return decoder.decode(uint8Array);
};

変換したCSVを処理する

const processCSV = (csvText: string) => {
  const lines = csvText.split(/\r\n|\n|\r/);
  const data = lines.map(line => line.split(",").map(value => value.trim()));

  console.log("CSVデータ", data);
  sendToAPI(data);
};

APIに送信する

const sendToAPI = async (data: string[][]) => {
  try {
    const response = await fetch("/api/upload", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ csv_data: data })
    });

    if (!response.ok) {
      throw new Error("アップロードに失敗しました。");
    }

    console.log("アップロード成功");
  } catch (error) {
    console.error("エラー", error);
  }
};

まとめ

本記事では、ReactでShift-JISのCSVをUTF-8に変換し、APIに送信する方法を解説しました。

この方法を使えば、Shift-JISのCSVでも適切に処理し、文字化けを防ぐことが可能です。ぜひ、プロジェクトで活用してください。

• Original:https://minory.org/react-csv-sjis-utf8.html
• Source:minory
• Author:管理者