JavaScriptでcsvダウンロード機能を実装した

2023/10/25

業務先でJavaScriptでCSVダウンロード機能を実装する機会があり、BlobAPIを初めて触った。この記事では、復習を兼ねて調べたことや実装をまとめておく。

実装コード

https://stackblitz.com/edit/js-fjwru8?file=index.js

以下の様なcsvファイルがダウンロードできる

エスケープ処理について

値の中に,(カンマ)が含まれていた場合、区切り文字として識別されてしまい意図しないCSVになってしまう。それを防ぐためにエスケープ処理をする必要がある。
値は""(ダブルクォーテーション)で囲い、値であることを明示的にした。また値に""(ダブルクォーテーション)が含まれていた場合はエスケープするような処理も追加した。

【JavaScript】CSV 書き出しの際に必要なエスケープ処理と二次元配列→文字列変換の方法

Blobとは

Binary Large Object。バイトの塊を不透明な形で表したもの。FileAPIはBlobインターフェイスを継承している。

Blob オブジェクトは blob、すなわち不変の生データであるファイルのようなオブジェクトを表します

https://developer.mozilla.org/ja/docs/Web/API/Blob

バイナリーデータを保持する様な役割を持つ。ブラウザがバイナリデータを内部的に保持する

Blobオブジェクトは、データソースとオプション情報から生成する。オプションにはコンテンツタイプ(MIME)を指定したりする。

const blob = new Blob(array, options)

MDN Blob

Blob URL

BlobはURLを使用して参照することができ、URL.createObjectURL()を使用して生成できる。BlobのURLはBlob://から始まる。URL.createObjectURL() はパラメータで指定されたオブジェクトを表す文字列を作成する。

BOMとは

byte order mark。通称DOM。csvファイルがExcelで文字化けしないように文字コードをBOM付きにする必要がある。

プログラムがテキストデータを読み込む時、その先頭の数バイトからそのデータがUnicodeで表現されていること、また符号化形式（エンコーディング）としてどれを使用しているかを判別できるようにしたものである。[1]

https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%88%E9%A0%86%E3%83%9E%E3%83%BC%E3%82%AF

UTF-8の場合は0xEF 0xBB 0xBFを先頭につける必要がある。

const bom = Uint8Array([0xEF,0xBB,0xBF])

Unicodeとは

Unicode とは、世界の様々な言語、書式、記号に、番号を割り当てて定義した標準の文字コードです。一つ一つの文字に番号を割り当てることで、プログラマーは、どの言語が混ざっていても、コンピューターに保存、処理、伝送させるような文字エンコーディングを同じファイルやプログラムの中に作ることができます。

https://developer.mozilla.org/ja/docs/Glossary/Unicode

文字コードとは、0と1の2進数しか扱えないコンピューターで文字を扱うためのに文字に対して割り振られた番号(ビット列)との関係をいう。(UTF-8やShift_JISなどがこれに当たる)

符号化文字集合と文字符号化方式

文字とU+から始まる文字列の対応関係が符号化文字集合でこの例だとUnicodeとなる。
文字集合をバイト表現に変換する方式が文字符号化方式。これがUTF-8などにあたる。

Uint8Array

Uint8Array は型付き配列で、 8 ビット符号なし整数値の配列を表します

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array

まとめ

今回はJavaScriptで自前CSVダウンロード機能を実装した。出力する値が動的な値の場合、考慮するべきことが結構ありそうでライブラリとか使用する方が無難なのかなとか思った。

Sae/note