JavaScriptで配列形式のJSONをCSVとしてダウンロードする方法

はじめに

先日作ったAnalyzeMeというアプリの中で、JSONをCSVとしてダウンロードするようなコードを書いたのですが、今回はそのことについて書きます。

例えば以下のような配列形式のJSONを想定しています。

[
  {
    title: "title",
    1: "hogehoge",
    2: "hugahuga"
  },
  {
    title: "title",
    1: "hogehoge",
    2: "hugahuga"
  }
]

実装方法

実装内容は以下。

const jsonToCsv = (
  data: Record<string, any>[],
  headerOrder: string[]
): string => {
  const headerString: string = headerOrder.join(",");
  const replacer = (_: string, value: any): any => value ?? "";
  const rowItems: string[] = data.map((row: Record<string, any>) =>
    headerOrder
      .map((fieldName: string) => JSON.stringify(row[fieldName], replacer))
      .join(",")
  );
  const csv: string = [headerString, ...rowItems].join("\r\n");
  return csv;
};

const download = (data: string, name: string) => {
  const blob = new Blob([data], { type: "text/csv" });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.setAttribute("href", url);
  a.setAttribute("download", `${name}.csv`);
  a.click();
};

export const downloadCsv = (
  name: string,
  data: Record<string, any>[],
  headerOrder: string[]
) => {
  const csvdata = jsonToCsv(data, headerOrder);
  download(csvdata, name);
};

headerOrderを入れているのは、JavaScriptの場合Object.keys()だと順番が必ずしも守られないからです。
例えばこれがないと、以下のJSONをCSVにした場合、

[
  {
    title: "title",
    1: "hogehoge",
    2: "hugahuga"
  },
  {
    title: "title",
    1: "hogehoge",
    2: "hugahuga"
  }
]

以下のように順番がおかしくなります。

1 | 2 | title
hogehoge | hugahuga | title
hogehoge | hugahuga | title

これを許容するのであれば、上述のheaderOrder部分は不要で、以下のように単純にJSONデータからkeyを設定すればいいです。

  const header: string[] = Object.keys(data[0]);
  const headerString: string = header.join(',');

そして使う場合は以下。

const headerOrder = ["title", "1", "2"];
downloadCsv(${csvを保存する際のname}, ${ここにJSON}, ${headerOrder})

最後に

何かライブラリを使おうかなとも思ったのですが、コード量も大したことなさそうだったので自前でやってみました。

この記事が少しでも参考になればいいねを押してもらえれば励みになります！