CSV / JSON ファイル処理は「テキストとして読み、オブジェクトとして扱い、またテキストに戻す」流れ
CSV も JSON も、本質はただのテキストファイルです。
JavaScript から扱うときの大きな流れは共通していて、
「ファイルを選んでもらう → テキストとして読む → JavaScript のデータに変換 → 必要ならまたテキストに戻してダウンロード」
という往復になります。
ここで主役になるのは、input type="file" と FileReader、そして JSON なら JSON.parse / JSON.stringify です。
CSV は「自前でパースする」か「ライブラリを使う」かのどちらかになりますが、まずはシンプルな自前パースからイメージを掴みましょう。
JSON ファイル処理の基本：テキスト → オブジェクト → テキスト
JSON ファイルを読み込んでオブジェクトとして扱う
JSON は「JavaScript のオブジェクトを文字列化したもの」なので、JSON.parse で文字列からオブジェクトに戻せます。
HTML:
<input type="file" id="jsonInput" accept=".json,application/json">
<pre id="output"></pre>
JavaScript:
const input = document.querySelector("#jsonInput");
const output = document.querySelector("#output");
input.addEventListener("change", () => {
const file = input.files[0];
if (!file) return;
const reader = new FileReader();
reader.addEventListener("load", () => {
try {
const text = reader.result;
const data = JSON.parse(text); // ここが超重要
output.textContent = JSON.stringify(data, null, 2);
} catch (e) {
output.textContent = "JSON の形式が正しくありません: " + e.message;
}
});
reader.readAsText(file, "utf-8");
});
ここで重要なのは、
「FileReader で“テキストとして”読み、その文字列を JSON.parse する」という二段構えになっていることです。
JSON ファイルはバイナリではなくテキストなので、readAsText が自然な選択になります。
JSON.parse は、形式が少しでもおかしいと例外を投げるので、try...catch で囲んでおくのが実戦的です。
オブジェクトを JSON ファイルとしてダウンロードさせる
今度は逆方向です。
JavaScript のオブジェクトを JSON にして、ユーザーにファイルとして渡します。
HTML:
<button id="downloadJson">JSON をダウンロード</button>
JavaScript:
const btn = document.querySelector("#downloadJson");
btn.addEventListener("click", () => {
const data = {
name: "太郎",
age: 25,
skills: ["JavaScript", "HTML", "CSS"]
};
const json = JSON.stringify(data, null, 2); // ここが重要
const blob = new Blob([json], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "data.json";
a.click();
URL.revokeObjectURL(url);
});
ここでのキモは、
「オブジェクト → JSON.stringify → Blob → URL.createObjectURL → a.download」という流れです。
JSON はテキストなので、Blob の type は application/json にしておくと意図がはっきりします。
CSV ファイル処理の基本：テキスト → 行と列 → 配列
CSV を「行の配列」「列の配列」として扱う
CSV は「カンマ区切りのテキスト」です。
シンプルなケースなら、自前で分割しても十分扱えます。
HTML:
<input type="file" id="csvInput" accept=".csv,text/csv">
<pre id="outputCsv"></pre>
JavaScript（かなり素朴なパーサー）:
const inputCsv = document.querySelector("#csvInput");
const outputCsv = document.querySelector("#outputCsv");
inputCsv.addEventListener("change", () => {
const file = inputCsv.files[0];
if (!file) return;
const reader = new FileReader();
reader.addEventListener("load", () => {
const text = reader.result;
const lines = text.split(/\r?\n/).filter(line => line !== "");
const rows = lines.map(line => line.split(","));
outputCsv.textContent = JSON.stringify(rows, null, 2);
});
reader.readAsText(file, "utf-8");
});
ここでやっていることは、
「テキストを行ごとに分割し、さらに各行をカンマで分割して二次元配列にする」というだけです。
実際の CSV は、
カンマを含む値を "..." で囲んだり、改行を含んだりと、もっと複雑です。
本格的にやるならライブラリ（PapaParse など）を使うのが現実的ですが、
まずは「行と列に分ける」という感覚を掴むのが大事です。
CSV を生成してダウンロードさせる
配列の配列から CSV テキストを作るのも、基本は join だけです。
HTML:
<button id="downloadCsv">CSV をダウンロード</button>
JavaScript:
const btnCsv = document.querySelector("#downloadCsv");
btnCsv.addEventListener("click", () => {
const rows = [
["name", "age"],
["太郎", 25],
["花子", 22]
];
const csv = rows.map(cols => cols.join(",")).join("\n");
const blob = new Blob([csv], { type: "text/csv" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "data.csv";
a.click();
URL.revokeObjectURL(url);
});
ここでも流れは JSON と同じで、
「データ構造 → テキスト（CSV）→ Blob → URL → a.download」です。
CSV は Excel などで開けるので、
「Web アプリのデータをユーザーに渡す出口」として非常に使われます。
JSON と CSV の「向き・不向き」と変換のイメージ
JSON は「入れ子構造や配列をそのまま表現できる」のが強みです。
オブジェクトの中に配列、その中にオブジェクト…といった複雑な構造も自然に扱えます。
CSV は「表形式（行と列）」に強いフォーマットです。
テーブルデータ、一覧、集計結果など、
「行ごとに同じ項目を持つデータ」と相性が良いです。
例えば、次のような JSON を考えます。
const users = [
{ name: "太郎", age: 25 },
{ name: "花子", age: 22 }
];
これを CSV にするなら、
ヘッダー行とデータ行に分けて考えます。
const header = ["name", "age"];
const rows = users.map(u => [u.name, String(u.age)]);
const allRows = [header, ...rows];
const csv = allRows.map(cols => cols.join(",")).join("\n");
逆に、CSV から JSON にするなら、
1行目をヘッダーとしてキーにし、
2行目以降をオブジェクトに変換します。
function csvToJson(text) {
const lines = text.split(/\r?\n/).filter(line => line !== "");
const [headerLine, ...dataLines] = lines;
const headers = headerLine.split(",");
return dataLines.map(line => {
const cols = line.split(",");
const obj = {};
headers.forEach((key, i) => {
obj[key] = cols[i];
});
return obj;
});
}
このあたりを自分で書いてみると、
「JSON は“木構造”、CSV は“表”」というイメージがかなりクリアになります。
ファイル選択から処理までの「一連の流れ」を意識する
CSV / JSON ファイル処理は、
結局いつも同じパターンに落ち着きます。
ユーザーにファイルを選んでもらう（input type="file"）change イベントで File を受け取るFileReader.readAsText でテキストとして読む
JSON なら JSON.parse、CSV なら split などで構造化する
必要なら加工して、JSON.stringify や join でテキストに戻す
Blob に包んで URL.createObjectURL → <a download> でダウンロードさせる
この「テキストとして読み、構造化し、またテキストに戻す」という往復が、
CSV / JSON ファイル処理の本質です。
まずは次の 3 つを、自分の手で書いてみてください。
JSON ファイルを読み込んで、整形して <pre> に表示する
CSV ファイルを読み込んで、二次元配列として JSON 表示する
配列の配列から CSV を作って、data.csv としてダウンロードさせる
これがスムーズに書けるようになったとき、
CSV / JSON ファイル処理は「難しいファイル操作」ではなく、
「テキストとデータ構造の変換を、ちょっと丁寧にやっているだけ」に見えてきます。