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 |