DEV Community

Kaziu
Kaziu

Posted on

「Blob」って何？ ブラウザでファイルをダウンロードする仕組み

#typescript #javascript #webdev #tutorial

CSVダウンロード機能を実装すると、こんな見慣れないコードが出てきます。

const blob = new Blob([response.data], { type: 'text/csv' })
const objectURL = window.URL.createObjectURL(blob)
downloadFile(objectURL, 'データ.csv')
Enter fullscreen mode Exit fullscreen mode

「Blob？」「URLを作る？」「それをダウンロード？どこから？」を、この記事でスッキリさせます。

Blob とは

Blob = 中身が何でもいい「データのかたまり」。ブラウザにとっての"ファイルのようなもの"です。文字・画像・CSV・PDFなど何でも入り、「これはCSVです」といった種類ラベル（MIMEタイプ）を持てます。

ブラウザに「これはファイルだよ、保存してね」と伝えるには、データを"ファイルの形"＝Blobにする必要があります。生の文字データのままでは、ただの文字列としか扱われません。

手紙に例えると

手紙の例え 実際のもの
書類（CSVの中身） response.data
封筒に入れる new Blob(...)
宛名シールを貼る createObjectURL のURL
投函する＝保存 <a download> をクリック

コードの意味 

// ① バイナリのまま受け取る（これを忘れるとCSVが壊れることがある）
const response = await api.get(url, { responseType: 'blob' })

// ② データを「CSVファイル」の箱に入れる
const blob = new Blob([response.data], { type: 'text/csv' })

// ③ その箱を指す一時的なURLを発行する
const objectURL = window.URL.createObjectURL(blob)

// ④ そのURLをファイルとして保存させる
downloadFile(objectURL, 'データ.csv')
Enter fullscreen mode Exit fullscreen mode

ポイントは ③のURL。これは https://... のようなサーバー上の場所ではなく、
いま手元（ブラウザのメモリ）にあるデータを指す案内シール です。

downloadFile の中身も単純で、「download属性つきの<a>を作ってJSでクリックするだけ」。

function downloadFile(url, filename) {
  const a = document.createElement('a')
  a.href = url
  a.download = filename
  a.click()
}
Enter fullscreen mode Exit fullscreen mode

リンク先が blob: URL なので、サーバーに行かず、手元のデータをそのままファイル保存 します。
つまり「URLをダウンロード」と言っても、落とし直しではなく、すでに持っているデータを保存しているだけなのです。

補足：使い終わったURLは片付ける

createObjectURL のURLはメモリを占有し続けるので、使い終わったら解放するのが丁寧です。

window.URL.revokeObjectURL(objectURL)
Enter fullscreen mode Exit fullscreen mode

まとめ

  • Blob = ブラウザにとっての"ファイルのようなデータのかたまり"
  • createObjectURL のURLは、サーバーではなく手元データへの案内シール
  • <a download> クリックで、そのデータがファイルとして保存される
  • この流れは画像・PDF・ZIPなどどんなファイルでも同じ

Top comments (0)