Blob

Blob オブジェクトは blob を表しており、これは不変の生データであるファイルのようなオブジェクトです。テキストやバイナリデータとして読み込んだり、ReadableStream に変換してそのメソッドを使ったデータ処理をしたりできます。

Blob が表現することができるデータは必ずしも JavaScript ネイティブ形式である必要はありません。File インターフェイスは Blob をベースにしており、Blob の機能を継承してユーザーのシステム上のファイルをサポートするように拡張しています。

Blob の利用

他の Blob 以外のオブジェクトやデータから Blob を作成するには、Blob() コンストラクタを使用します。他の Blob のデータのサブセットを含む Blob を作成するには、slice() メソッドを使用します。ユーザーのファイルシステム上のファイルの Blob オブジェクトを取得するには、File のドキュメントを参照してください。

Blob オブジェクトを受け入れる API も、File のドキュメントに掲載しています。

コンストラクタ

Blob()
コンストラクタに渡された配列内のすべてのデータを連結したものを含む、新しく作成された Blob オブジェクトを返します。

インスタンスプロパティ

Blob.prototype.size 読取専用
Blob オブジェクトに含まれるデータのサイズ (バイト単位)。
Blob.prototype.type 読取専用
Blob に含まれるデータの MIME タイプを示す文字列。タイプが不明な場合、この文字列は空です。

インスタンスメソッド

Blob.prototype.arrayBuffer()
Blob の全内容をバイナリデータとして含む ArrayBuffer で解決する Promise を返します。
Blob.prototype.slice()
呼び出された Blob の指定されたバイト数範囲のデータを含む新しい Blob オブジェクトを返します。
Blob.prototype.stream()
Blob の内容を読み込むために使用できる ReadableStream を返します。
Blob.prototype.text()
UTF-8 テキストとして解釈された Blob の内容全体を含む USVString で解決する Promise を返します。

Blob の作成

Blob() コンストラクタは、他のオブジェクトから Blob を作成することができます。たとえば、JSON 文字列から Blob を作成するには、次のようにします。

const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});

型付き配列の内容を表す URL の作成

次のコードは、JavaScript の型付き配列を作成し、型付き配列のデータを含む新しい Blob を作成します。次に、URL.createObjectURL() を呼び出して、Blob を URL に変換します。

HTML

<p>この例では、スペース文字から文字 Z までの ASCII コードを含む型付けされた配列を作成し、
それをオブジェクト URL に変換します。
そのオブジェクト URL を開くためのリンクが作成されます。
リンクをクリックすると、デコードされたオブジェクト URL が表示されます。</p>

JavaScript

このコードの例示のための主要な部分は typedArrayToURL() 関数で、与えられた型付き配列から Blob を作成し、それに対するオブジェクト URL を返します。データをオブジェクト URL に変換した後は、要素の <img> 属性の値として含む、さまざまな方法で使用することができます (もちろん、データに画像が含まれていることを前提としています)。

function typedArrayToURL(typedArray, mimeType) {
  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
}

const bytes = new Uint8Array(59);

for(let i = 0; i < 59; i++) {
  bytes[i] = 32 + i;
}

const url = typedArrayToURL(bytes, 'text/plain');

const link = document.createElement('a');
link.href = url;
link.innerText = 'Open the array URL';

document.body.appendChild(link);

結果

例のリンクをクリックすると、ブラウザがオブジェクトの URL をデコードしているのがわかります。

Blob からデータを抽出する

Blob から内容を読み込む方法の 1 つは、FileReader を使用することです。次のコードは、Blob の内容を型付き配列として読み込みます。

const reader = new FileReader();
reader.addEventListener('loadend', () => {
   // reader.result には blob の内容が型付き配列として格納されます。
});
reader.readAsArrayBuffer(blob);

Blob から内容を読み込む別の方法としては、Response を使用する方法があります。次のコードは、Blob の内容をテキストとして読み取るものです。

const text = await (new Response(blob)).text();

または、Blob.prototype.text() を使用します。

const text = await blob.text();

FileReader の他のメソッドを使用することで、Blob の内容を文字列またはデータ URL として読み込むことができます。

仕様

仕様書 策定状況 コメント
File API
Blob インターフェイス の定義
草案 初期定義

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
BlobChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 11Safari 完全対応 5.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 14Opera Android 完全対応 11Safari iOS 完全対応 6Samsung Internet Android 完全対応 1.0
Blob() constructorChrome 完全対応 20Edge 完全対応 12Firefox 完全対応 13
補足
完全対応 13
補足
補足 Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.
IE 完全対応 10Opera 完全対応 12Safari 完全対応 8WebView Android 完全対応 37Chrome Android 完全対応 25Firefox Android 完全対応 14
補足
完全対応 14
補足
補足 Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.
Opera Android 完全対応 12Safari iOS 完全対応 8Samsung Internet Android 完全対応 1.5
arrayBuffer()Chrome 完全対応 76Edge 完全対応 79Firefox 完全対応 69IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 76Chrome Android 完全対応 76Firefox Android 未対応 なしOpera Android 完全対応 54Safari iOS 未対応 なしSamsung Internet Android 完全対応 12.0
sizeChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 11Safari 完全対応 5.1WebView Android 未対応 なしChrome Android 完全対応 18Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 1.0
slice()Chrome 完全対応 21
完全対応 21
未対応 5 — 25
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 13
補足
完全対応 13
補足
補足 Prior to Firefox 12, there was a bug that affected the behavior of Blob.slice(); it did not work for start and end positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.
未対応 5 — 13
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 完全対応 10Opera 完全対応 12Safari 完全対応 5.1
接頭辞付き
完全対応 5.1
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
WebView Android 完全対応 ありChrome Android 完全対応 25
完全対応 25
未対応 18 — 25
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Firefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.5
完全対応 1.5
未対応 1.0 — 1.5
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
stream()Chrome 完全対応 76Edge 完全対応 79Firefox 完全対応 69IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 76Chrome Android 完全対応 76Firefox Android 未対応 なしOpera Android 完全対応 54Safari iOS 未対応 なしSamsung Internet Android 完全対応 12.0
text()Chrome 完全対応 76Edge 完全対応 79Firefox 完全対応 69IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 76Chrome Android 完全対応 76Firefox Android 未対応 なしOpera Android 完全対応 54Safari iOS 未対応 なしSamsung Internet Android 完全対応 12.0
typeChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 11Safari 完全対応 5.1WebView Android 未対応 なしChrome Android 完全対応 18Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

あわせて参照