フロントでファイルを扱おうとして、JavaScriptやTypescriptを書いているとnew Blobしたり型でBlobを書いたりすることが必要になったりするのですが、このBlobについてあまりよくついて知らないなと思ったので今回調べてみてみることにしました。

Blobとは

BlobとはBinary Large OBjectの略で、単にバイナリデータの塊を表現したものです。
ウェブブラウザ（WEB API）ではデータを保持する役割を担うBlobクラスが実装されています。
BlobにはWEB APIのFileが継承されていて、プロパティにはデータサイズやMIMEタイプを持っています。

ちなみに他にもJavaScriptにはバイナリデータを扱うクラスが用意されていてArrayBuffer / TypedArrays（型付き配列）などがありますが、ArrayBuffer / TypedArraysは主に直接操作できるバイナリデータを扱うのに用いられるのに対し、Blobはイミュータブル（不変）なバイナリデータを扱います。
そのためこのBlobのバイナリデータは、File APIを介してのみアクセスされることが想定されています。

Blobの作成・Blobのコンテンツの読み込み

new Blob(source, option)でBlobオブジェクトを生成します。
sourceにはテキストやバイナリのデータを指定することができ、optionにはMIMEタイプを指定します。

stackblitz.com

Blobの読み込みにはFileReaderを用います。FileReaderはFile APIの機能の一つです。（File APIはHTML5の機能） FileReaderを使用することで、ユーザーのPCに保存されているファイル(またはデータバッファ)のコンテンツを非同期に読み取ることができます。ここでは読み込みで使用していますが、ファイルのアップロードでも使用可能です。

Blob URL Scheme

バイナリデータを保持するURLの一種で、BlobからBlob URL Schemeに変換することが可能です。
URL.createObjectURL()を使用することで簡単に変換できます。
Blob URL Schemeにおいてバイナリデータ自身はBlob URL Schemeの文字列に埋め込まれているのではなく、ブラウザで保持されています。
そのため、バイナリデータをHTMLへ直接埋め込むようなことはできませんが、大容量のバイナリデータを扱うことが可能です。

用途としてはURLなのでaタグに指定してファイルをダウンロードさせたり、imgタグに指定して画像表示したりすることができます。以下がその例です。

stackblitz.com

blob:https://js-thmf3i.stackblitz.io/a3f2610b-3462-404f-af65-471f6dc73743

Blob URL Schemeでは先頭にblob:がついていて、https://js-thmf3i.stackblitz.io/の後の文字列部分にはUUIDのようなものしか記述されていないことが分かります。

比較対象としてのData URL Scheme（おまけ）

よくBlob URL Schemeと比較されるのがData URL Schemeです。
blob:ではなくdata:が文字列の先頭に付きます。
こちらはBlob URL Schemeと同様にimgタグのsrcに指定することが可能ですが、Blob URL Schemeと違い直接バイナリデータをHTMLに埋め込むことが可能です。
バイナリデータをBase64の変換方式で文字列に変換しています。そうすることによって、通常別データに別れている画像などのデータを一度の通信で取得できるメリットがあります。
しかし、

キャッシュされないためリロードするたび画像データを読み直さないといけない
100Mを超えるようなサイズだと、非常に処理が重たい
HTMLにとても長い文字列を記述しないといけない

などの結構なデメリットがあり、あまり使われてはいないようです。

以下がData URL Schemeの例です。

<!-- 赤い小さな点の画像を表示するだけのData URL Scheme -->
<img src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" alt="Red dot" />