Blob
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
メモ: この機能はウェブワーカー内で利用可能です。
Blob インターフェイスは blob、すなわち不変の生データであるファイルのようなオブジェクトを表します。テキストやバイナリーデータとして読み込んだり、ReadableStream に変換してそのメソッドを使ったデータ処理をしたりすることができます。
Blob が表現することができるデータは必ずしも JavaScript ネイティブ形式である必要はありません。File インターフェイスは Blob をベースにしており、 Blob の機能を継承してユーザーのシステム上のファイルをサポートするように拡張しています。
Blob の使用
コンストラクター
Blob()-
コンストラクターに渡された配列内のすべてのデータを連結したものを含む、新しく作成された
Blobオブジェクトを返します。
インスタンスプロパティ
インスタンスメソッド
Blob.arrayBuffer()-
Blobの全内容をバイナリーデータとして含むArrayBufferで解決するプロミスを返します。 Blob.bytes()-
この
Blobの内容を含むUint8Arrayを返すプロミスを返します。 Blob.slice()-
呼び出された Blob の指定されたバイト数範囲のデータを含む新しい
Blobオブジェクトを返します。 Blob.stream()-
Blobの内容を読み込むために使用できるReadableStreamを返します。 Blob.text()-
UTF-8 テキストとして解釈された Blob の内容全体を含む文字列で解決するプロミスを返します。
例
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> 要素の src 属性の値として含む、さまざまな方法で使用することができます（もちろん、データに画像が含まれていることを前提としています）。
function showViewLiveResultButton() { if (window.self !== window.top) { // この文書がフレーム内にある場合、最初にユーザーに独自のタブ // またはウィンドウで開くよう指示します。そうでなければ、 // この例はうまく動作しません。 const p = document.querySelector("p"); p.textContent = ""; const button = document.createElement("button"); button.textContent = "上記のコード例の結果をライブで見る"; p.append(button); button.addEventListener("click", () => window.open(location.href)); return true; } return false; } if (!showViewLiveResultButton()) { 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); } 結果
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.text() を使用します。
const text = await blob.text(); FileReader の他のメソッドを使用することで、Blob の内容を文字列またはデータ URL として読み込むことができます。
仕様書
| Specification |
|---|
| File API # blob-section |