Blob

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

メモ: この機能はウェブワーカー内で利用可能です。

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

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

Blob の使用

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

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

コンストラクター

Blob()

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

インスタンスプロパティ

Blob.size 読取専用

Blob オブジェクトに含まれるデータのサイズ（バイト単位）。

Blob.type 読取専用

Blob に含まれるデータの MIME タイプを示す文字列。タイプが不明な場合、この文字列は空です。

インスタンスメソッド

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 を作成するには、次のようにします。

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

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

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

HTML

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

JavaScript

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

js
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 の内容を型付き配列として読み込みます。

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

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

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

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

js
const text = await blob.text();

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

仕様書

Specification
File API
# blob-section

ブラウザーの互換性

BCD tables only load in the browser

関連情報