【HTML/Javascript】フロントエンドでCSVデータを出力する方法

2024-05-23

JavaScript 配列を CSV 形式でクライアントサイドにエクスポートする方法

データの準備

まず、エクスポートしたいデータを JavaScript の配列形式で準備する必要があります。配列は二次元構造であっても問題ありません。

const data = [
  ["name", "age", "city"],
  ["Alice", 30, "Tokyo"],
  ["Bob", 25, "Osaka"],
  ["Charlie", 40, "Kyoto"],
];

CSV データの生成

次に、配列データを CSV 形式に変換する必要があります。以下のコードは、data 配列を CSV 形式の文字列に変換します。

const csvData = data.map(row => {
  return row.join(",");
}).join("\n");

ダウンロード処理

最後に、生成した CSV データをダウンロードできるリンクを作成します。以下のコードは、csvData 変数に格納された CSV データを "data.csv" という名前のファイルでダウンロードするリンクを作成します。

const link = document.createElement("a");
link.href = `data:text/csv;charset=utf-8,${csvData}`;
link.download = "data.csv";
link.click();

コード全体

以下のコードは、上記のすべてのステップをまとめたものです。

const data = [
  ["name", "age", "city"],
  ["Alice", 30, "Tokyo"],
  ["Bob", 25, "Osaka"],
  ["Charlie", 40, "Kyoto"],
];

const csvData = data.map(row => {
  return row.join(",");
}).join("\n");

const link = document.createElement("a");
link.href = `data:text/csv;charset=utf-8,${csvData}`;
link.download = "data.csv";
link.click();

このコードを実行すると、data.csv という名前の CSV ファイルがダウンロードされます。CSV ファイルを開くと、以下の内容が表示されます。

name,age,city
Alice,30,Tokyo
Bob,25,Osaka
Charlie,40,Kyoto

補足

上記のコードは、単純な例です。実際の使用例では、データの処理やエラー処理などを追加する必要があります。
CSV ファイルの文字エンコーディングは、utf-8 以外にも指定できます。
ブラウザによっては、上記の方法でダウンロードがうまくいかない場合があります。その場合は、ライブラリを使用するなどの対策が必要となります。

const data = [
  ["name", "age", "city"],
  ["Alice", 30, "Tokyo"],
  ["Bob", 25, "Osaka"],
  ["Charlie", 40, "Kyoto"],
];

const csvData = data.map(row => {
  return row.join(",");
}).join("\n");

const link = document.createElement("a");
link.href = `data:text/csv;charset=utf-8,${csvData}`;
link.download = "data.csv";
link.click();

data という名前の配列を作成します。この配列には、CSV ファイルにエクスポートするデータが含まれています。
map メソッドを使用して、data 配列の各行をカンマ区切りの文字列に変換します。
join メソッドを使用して、変換された行を改行で結合します。
createElement メソッドを使用して、a 要素を作成します。この要素は、CSV ファイルのダウンロードリンクとして使用されます。
href プロパティに、data:text/csv;charset=utf-8,${csvData} という値を設定します。この値は、CSV ファイルのデータと文字エンコーディングを指定します。
download プロパティに、"data.csv" という値を設定します。これは、ダウンロードされるファイルの名前になります。
click メソッドを呼び出して、リンクをクリックします。これにより、ダウンロードが開始されます。

name,age,city
Alice,30,Tokyo
Bob,25,Osaka
Charlie,40,Kyoto

説明

data 配列は、エクスポートするデータの構造を定義します。各行は、カンマ区切りの値の配列として表されます。
map メソッドは、data 配列の各行を処理するために使用されます。この例では、map メソッドは各行をカンマ区切りの文字列に変換します。
join メソッドは、文字列の配列を結合するために使用されます。この例では、join メソッドは、変換された行を改行で結合します。
createElement メソッドは、HTML 要素を作成するために使用されます。この例では、createElement メソッドを使用して、a 要素を作成します。
download プロパティは、ダウンロードされるファイルの名前を設定するために使用されます。この例では、download プロパティは "data.csv" という値に設定されます。
click メソッドは、要素をクリックしたときに発生するイベントを処理するために使用されます。この例では、click メソッドは、ダウンロードを開始するために使用されます。

このサンプルコードは、JavaScript で配列を CSV 形式でエクスポートする方法を理解するための出発点として使用できます。実際の使用例では、データの処理やエラー処理などを追加する必要があります。

JavaScript で CSV をエクスポートするその他の方法

ライブラリを使用する

JavaScript には、CSV ファイルの処理を容易にするライブラリがいくつかあります。人気のあるライブラリには、以下のものがあります。

これらのライブラリを使用すると、以下のことができます。

CSV ファイルの読み込みと書き込み
CSV ファイルの解析と操作
複雑なデータ構造を CSV 形式に変換

FileSaver.js は、JavaScript でファイルを保存するためのライブラリです。このライブラリを使用して、CSV ファイルを Blob オブジェクトとして生成し、ダウンロードすることができます。

以下のコードは、FileSaver.js を使用して CSV ファイルをダウンロードする方法を示しています。

const data = [
  ["name", "age", "city"],
  ["Alice", 30, "Tokyo"],
  ["Bob", 25, "Osaka"],
  ["Charlie", 40, "Kyoto"],
];

const csvData = data.map(row => {
  return row.join(",");
}).join("\n");

const blob = new Blob([csvData], {type: "text/csv"});
saveAs(blob, "data.csv");

data:URL スキーマを使用して、CSV ファイルのデータを含む data URL を生成することができます。この data URL を使用して、a 要素の href プロパティを設定することで、ファイルをダウンロードすることができます。

const data = [
  ["name", "age", "city"],
  ["Alice", 30, "Tokyo"],
  ["Bob", 25, "Osaka"],
  ["Charlie", 40, "Kyoto"],
];

const csvData = data.map(row => {
  return row.join(",");
}).join("\n");

const dataURL = `data:text/csv;charset=utf-8,${encodeURIComponent(csvData)}`;
const link = document.createElement("a");
link.href = dataURL;
link.download = "data.csv";
link.click();