JavaScriptでCSVを処理する方法｜読み込み・分割・配列化の基本を解説
CSVは、表形式のデータをテキストで扱うための形式です。JavaScriptを使うと、CSV文字列を読み込み、行ごと・列ごとに分割し、配列やオブジェクトとして処理できます。
この記事では、JavaScriptでCSVを処理する基本として、CSVの仕組み、文字列の分割、配列化、オブジェクト化、ファイル読み込みまでを順番に解説します。
Contents
CSVとは
CSVとは、Comma Separated Valuesの略で、値をカンマで区切って表現するデータ形式です。
たとえば、次のようなデータがCSVです。
name,age,city
田中,25,東京
佐藤,30,大阪
鈴木,28,名古屋1行目には見出し、2行目以降には実際のデータが入っています。
CSVは、Excelやスプレッドシート、データ管理画面などでよく使われます。Web制作でも、一覧データや設定データを扱う場面で利用されることがあります。
JavaScriptでCSVを処理する基本の流れ
JavaScriptでCSVを処理する基本の流れは、次のとおりです。
- CSV文字列を用意する
- 改行で行ごとに分割する
- カンマで列ごとに分割する
- 配列やオブジェクトとして扱う
CSV処理では、文字列操作と配列操作の理解が重要です。
文字列の基本を確認したい場合は、JavaScriptの文字列とは？基本と使い方を解説も参考になります。
配列操作の基礎を確認したい場合は、JavaScriptの配列操作まとめ（map・filter・reduce）もあわせて読むと理解しやすくなります。
CSV文字列を行ごとに分割する
まずは、CSV文字列を改行で分割します。
const csvText = `name,age,city
田中,25,東京
佐藤,30,大阪
鈴木,28,名古屋`;
const rows = csvText.split("\n");
console.log(rows);実行結果は次のようになります。
[
"name,age,city",
"田中,25,東京",
"佐藤,30,大阪",
"鈴木,28,名古屋"
]split("\n")を使うことで、CSV文字列を1行ずつの配列に変換できます。
split()の基本を確認したい場合は、JavaScriptのsplit()の使い方と活用方法も参考になります。
CSVの各行をカンマで分割する
行ごとに分割できたら、次は各行をカンマで分割します。
const csvText = `name,age,city
田中,25,東京
佐藤,30,大阪
鈴木,28,名古屋`;
const rows = csvText.split("\n");
const data = rows.map((row) => {
return row.split(",");
});
console.log(data);実行結果は次のようになります。
[
["name", "age", "city"],
["田中", "25", "東京"],
["佐藤", "30", "大阪"],
["鈴木", "28", "名古屋"]
]このように、CSVを二次元配列として扱えるようになります。
map()の基本を確認したい場合は、JavaScriptのmap()とは？配列を変換する基本を解説も参考になります。
CSVをオブジェクトの配列に変換する
CSVを実際に扱う場合、二次元配列よりもオブジェクトの配列にした方が使いやすい場面があります。
const csvText = `name,age,city
田中,25,東京
佐藤,30,大阪
鈴木,28,名古屋`;
const rows = csvText.split("\n");
const headers = rows[0].split(",");
const records = rows.slice(1).map((row) => {
const values = row.split(",");
return {
[headers[0]]: values[0],
[headers[1]]: values[1],
[headers[2]]: values[2],
};
});
console.log(records);実行結果は次のようになります。
[
{ name: "田中", age: "25", city: "東京" },
{ name: "佐藤", age: "30", city: "大阪" },
{ name: "鈴木", age: "28", city: "名古屋" }
]rows[0]で見出し行を取り出し、rows.slice(1)でデータ部分だけを取得しています。
slice()の基本を確認したい場合は、JavaScriptのslice()の使い方を基礎から解説も参考になります。
汎用的にCSVをオブジェクト化する
列数が増えても対応しやすいようにするには、見出しを使って自動的にオブジェクトを作る方法が便利です。
const csvText = `name,age,city
田中,25,東京
佐藤,30,大阪
鈴木,28,名古屋`;
const rows = csvText.split("\n");
const headers = rows[0].split(",");
const records = rows.slice(1).map((row) => {
const values = row.split(",");
const record = {};
headers.forEach((header, index) => {
record[header] = values[index];
});
return record;
});
console.log(records);実行結果は次のようになります。
[
{ name: "田中", age: "25", city: "東京" },
{ name: "佐藤", age: "30", city: "大阪" },
{ name: "鈴木", age: "28", city: "名古屋" }
]この書き方にすると、CSVの列が増えても比較的対応しやすくなります。
forEach()の使い方を確認したい場合は、JavaScriptのforEach()の使い方を基礎から解説も参考になります。
数値データを変換する
CSVから取り出した値は、基本的に文字列として扱われます。
たとえば、"25"は数値ではなく文字列です。計算に使う場合は、数値に変換する必要があります。
const csvText = `name,age,city
田中,25,東京
佐藤,30,大阪
鈴木,28,名古屋`;
const rows = csvText.split("\n");
const headers = rows[0].split(",");
const records = rows.slice(1).map((row) => {
const values = row.split(",");
const record = {};
headers.forEach((header, index) => {
if (header === "age") {
record[header] = Number(values[index]);
} else {
record[header] = values[index];
}
});
return record;
});
console.log(records);実行結果は次のようになります。
[
{ name: "田中", age: 25, city: "東京" },
{ name: "佐藤", age: 30, city: "大阪" },
{ name: "鈴木", age: 28, city: "名古屋" }
]年齢の値が文字列ではなく、数値として扱えるようになります。
空行を除外してCSVを処理する
CSVには、末尾に空行が含まれることがあります。そのまま処理すると、空のデータが混ざる可能性があります。
空行を除外するには、filter()を使います。
const csvText = `name,age,city
田中,25,東京
佐藤,30,大阪
鈴木,28,名古屋
`;
const rows = csvText
.split("\n")
.filter((row) => row.trim() !== "");
const headers = rows[0].split(",");
const records = rows.slice(1).map((row) => {
const values = row.split(",");
const record = {};
headers.forEach((header, index) => {
record[header] = values[index];
});
return record;
});
console.log(records);trim()を使うことで、空白や改行だけの行も除外できます。
trim()の基本を確認したい場合は、JavaScriptのtrim()の使い方と注意点も参考になります。
CSVファイルをブラウザで読み込む
ブラウザ上でCSVファイルを読み込む場合は、input type="file"とFileReaderを使います。
次のコードは、CSVファイルを選択すると内容を読み込み、オブジェクトの配列として表示する例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSVファイル読み込み</title>
</head>
<body>
<input type="file" id="csvFile" accept=".csv">
<pre id="output"></pre>
<script>
const fileInput = document.getElementById("csvFile");
const output = document.getElementById("output");
fileInput.addEventListener("change", (event) => {
const file = event.target.files[0];
if (!file) {
return;
}
const reader = new FileReader();
reader.addEventListener("load", () => {
const csvText = reader.result;
const records = parseCsv(csvText);
output.textContent = JSON.stringify(records, null, 2);
});
reader.readAsText(file, "UTF-8");
});
function parseCsv(csvText) {
const rows = csvText
.split("\n")
.filter((row) => row.trim() !== "");
const headers = rows[0].split(",");
return rows.slice(1).map((row) => {
const values = row.split(",");
const record = {};
headers.forEach((header, index) => {
record[header] = values[index];
});
return record;
});
}
</script>
</body>
</html>このコードでは、選択したCSVファイルを文字列として読み込み、parseCsv()関数で配列に変換しています。
イベント処理の基本を確認したい場合は、JavaScriptのイベントとは？クリックや入力を処理する基本も参考になります。
CSV処理で注意したいポイント
CSVは一見シンプルですが、実際のデータでは注意点があります。
カンマを含む値に注意する
次のように、値の中にカンマが含まれるCSVがあります。
name,memo
田中,"東京,大阪に出張"単純にsplit(",")で分割すると、意図しない位置で分割されてしまいます。
この記事で紹介した方法は、基本的なCSVを理解するための処理です。実務で複雑なCSVを扱う場合は、CSV解析用のライブラリを使う方が安全です。
ダブルクォーテーションに注意する
CSVでは、値がダブルクォーテーションで囲まれることがあります。
name,comment
田中,"こんにちは"
佐藤,"よろしくお願いします"単純なCSVであれば問題なく処理できますが、値の中に改行やカンマが入る場合は、より厳密な解析が必要です。
文字コードに注意する
CSVファイルは、UTF-8以外の文字コードで保存されている場合があります。
特に、Excelで作成したCSVでは文字化けが起きることがあります。文字化けする場合は、CSVファイルの文字コードを確認することが重要です。
JavaScriptでCSVを処理するメリット
JavaScriptでCSVを処理できると、ブラウザ上で簡単なデータ変換や表示ができます。
たとえば、次のような用途があります。
- CSVデータを一覧表示する
- CSVファイルを読み込んで画面に反映する
- CSVを配列やオブジェクトに変換する
- データを条件で絞り込む
- データを並び替える
データの絞り込みを学ぶ場合は、JavaScriptのfilter()とは？配列から条件に合う要素を取り出す方法も参考になります。
並び替えを学ぶ場合は、JavaScriptのsort()の使い方を基礎から解説もあわせて確認すると理解しやすくなります。
まとめ
JavaScriptでCSVを処理する基本は、CSV文字列を改行で分割し、さらにカンマで分割することです。
基本的な流れは次のとおりです。
const rows = csvText.split("\n");
const data = rows.map((row) => row.split(","));さらに、見出し行を使うことで、CSVをオブジェクトの配列に変換できます。
CSV処理では、split()、map()、filter()、forEach()、slice()などの基本的な文字列・配列操作が多く使われます。これらを組み合わせることで、CSVデータをJavaScriptで扱いやすい形に変換できます。
ただし、値の中にカンマや改行が含まれるCSVでは、単純なsplit()だけでは正しく処理できない場合があります。基礎を理解したうえで、複雑なCSVを扱う場合は専用ライブラリの利用も検討すると安全です。
関連記事
JavaScriptの配列操作まとめ（map・filter・reduce）
JavaScriptのmap()とは？配列を変換する基本を解説
JavaScriptのfilter()とは？配列から条件に合う要素を取り出す方法