【JavaScript】CSVダウンロード機能を作ろう！【コピペでOK】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

JavaScriptの解説シリーズです。

今回はCSVダウンロード機能の作成方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

CSVダウンロードリンクが作成出来る
ほぼコピペで実装できる

データを扱う業務をしているときによく使うよ！

CSVダウンロード機能を作ろう！
まとめ

CSVダウンロード機能を作ろう！

少し内容がややこしいのですが、
CSVダウンロードを実行するには以下の3つ処理が必要となります。

出力するデータの作成
CSV形式への変換
HTMLのダウンロードリンクを擬似的に作成し、クリック

特に3つ目のHTMLのダウンロードリンクを擬似的に作成
というのがピンと来ない方も多いかと思うので少し深掘りします。

ブラウザにダウンロード機能を実装するためには一般的にHTMLのaタグを使用します。
ダウンロードされるデータはhref属性に設定されます。

作成したCSVファイルをhref属性に割り当てることでダウンロードすることが可能となります。

ブラウザでデータをダウンロードするには
HTMLのaタグを使うよ！

実際に動かしてみよう

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="csvDownload()">CSVダウンロード</button>
  </body>
</html>

script.js

// サンプルデータ
const sampleList = [
  { id: "A001", name: "サメハック", age: 30 },
  { id: "A002", name: "ねこハック", age: 22 },
  { id: "A003", name: "いぬハック", age: 40 },
];

const csvDownload = () => {
  ////////////////////出力するデータの作成////////////////////
  // CSV格納用 ※ヘッダーをあらかじめ設定しておく
  const header = "ID,ユーザ名,年齢\r\n";
  let data = header;

  // オブジェクトの中身を取り出してカンマ区切りにする
  for (let sample of sampleList) {
    /* このあたりはデータによってカスタマイズしてください */
    // idプロパティを追記し、末尾にカンマを付与
    data += sample.id + ",";
    // nameプロパティを追記し、末尾にカンマを付与
    data += sample.name + ",";
    // ageプロパティを追記し、末尾にカンマを付与
    data += sample.age;

    // データ末尾に改行コードを追記
    data += "\r\n";
  }

  ////////////////////CSV形式へ変換////////////////////
  // BOMを付与（Excelで開いた際のの文字化け対策）
  const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
  // CSV用バイナリデータを作成
  const blob = new Blob([bom, data], { type: "text/csv" });
  // blobからオブジェクトURLを作成
  const objectUrl = URL.createObjectURL(blob);

  ////////////////////ダウンロードリンクの作成とクリック////////////////////
  // ダウンロードリンクを作成 ※HTMLのaタグを作成
  const downloadLink = document.createElement("a");
  // ファイル名の設定
  const fileName = "sample.csv";
  downloadLink.download = fileName;
  // ダウンロードファイルを設定 ※aタグのhref属性
  downloadLink.href = objectUrl;

  // ダウンロードリンクを擬似的にクリック
  downloadLink.click();

  // ダウンロードリンクを削除
  downloadLink.remove();
};

これでCSVの作成→DL機能が実装できたよ！

データの確認

■ ボタンのクリック

■データの確認

ちなみにCSVダウンロードボタンはcsvDownload関数と紐づけているだけで
実際のDL処理は関数内のdownloadLinkで実行されているよ！

おまけ:配列のデータをCSVに変換したい場合のサンプル

// サンプルデータ
const sampleList = [
  ["A001", "サメハック", 30],
  ["A002", "ねこハック", 22],
  ["A003", "いぬハック", 40],
];

const csvDownload = () => {
  ////////////////////出力するデータの作成////////////////////
  // CSV格納用 ※ヘッダーをあらかじめ設定しておく
  const header = "ID,ユーザ名,年齢\r\n";
  let data = header;

  // オブジェクトの中身を取り出してカンマ区切りにする
  for (let sample of sampleList) {
    // 配列の要素をカンマで区切ってテキスト化
    data += sample.join(",");

    // データ末尾に改行コードを追記
    data += "\r\n";
  }

  ////////////////////CSV形式へ変換////////////////////
  // BOMを付与（Excelで開いた際のの文字化け対策）
  const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
  // CSVのバイナリデータを作成
  const blob = new Blob([bom, data], { type: "text/csv" });
  // blobからオブジェクトURLを作成
  const objectUrl = URL.createObjectURL(blob);

  ////////////////////ダウンロードリンクの作成とクリック////////////////////
  // ダウンロードリンクを作成 ※HTMLのaタグを作成
  const downloadLink = document.createElement("a");
  // ファイル名の設定
  const fileName = "sample.csv";
  downloadLink.download = fileName;
  // ダウンロードファイルを設定 ※aタグのhref属性
  downloadLink.href = objectUrl;

  // ダウンロードリンクを擬似的にクリック
  downloadLink.click();

  // ダウンロードリンクを削除
  downloadLink.remove();
};

ヘッダだけ書き換えればそのまま流用できるよ！

まとめ

JavaScript内でaタグを作成し擬似的にクリックすることでDL機能が実装出来る

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram