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ファイルを読み込む
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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に変換する
|
1 2 3 4 5 |
const convertShiftJISToUTF8 = (arrayBuffer: ArrayBuffer): string => { const uint8Array = new Uint8Array(arrayBuffer); const decoder = new TextDecoder("shift-jis"); return decoder.decode(uint8Array); }; |
変換したCSVを処理する
|
1 2 3 4 5 6 7 |
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に送信する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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に送信する方法を解説しました。
- FileReader APIでCSVを読み込む
- TextDecoder APIを使いShift-JISからUTF-8に変換
- 変換後のCSVを解析し、APIに送信
この方法を使えば、Shift-JISのCSVでも適切に処理し、文字化けを防ぐことが可能です。ぜひ、プロジェクトで活用してください。
コメント