JavaScript Academy · レッスン

Blob とオブジェクト URL

Q: 「Blob とオブジェクト URL」で何を学びますか？

ダウンロード用の Blob URL を作成して使います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

ダウンロード用の Blob URL を作成して使います。

「Blob とオブジェクト URL」はCoddyKit上の無料JavaScript Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

Blobとは

Blob（Binary Large Object）は、ファイルの内容など、メモリ上の不変な生データを表します。Fileは、名前と変更日時を持つ特殊な種類のBlobです。

Blobを使うと、ブラウザー上でバイナリデータを作成、分割、ダウンロードできます。

Blobを作成する

パーツの配列（文字列、バッファー、他のBlob）と、MIMEのtypeを指定するオプションオブジェクトからBlobを作成します。

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

console.log(blob.size);
console.log(blob.type);

複数のパーツからBlobを作成する

パーツの配列は順番どおりに連結されます。文字列と型付き配列を混在させることもできます。

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

Blobを読み取る

Blobには、内容を読み取るためのPromiseベースのメソッドtext()、arrayBuffer()、stream()があります。

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

Blobを分割する

blob.slice(start, end)は、元のBlobの一部を含む新しいBlobを返します。全体をコピーする必要がないため、分割アップロードに便利です。

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

オブジェクト URLを作成する

URL.createObjectURL(blob)は、メモリ上のBlobを指す有効期間の短いURLを返します。img.src、リンクのhref、動画のソースとして使用できます。

const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url.startsWith('blob:'));

アップロードした画像をプレビューする

選択したファイルからオブジェクト URLを作成し、画像要素に設定すると、サーバーとの通信なしですぐにプレビューできます。

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

ダウンロードを開始する

Blobを作成してオブジェクト URLを生成し、download属性を持つ一時的なアンカーをクリックして、生成したファイルを保存します。

function download(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

download('report data', 'report.txt');

オブジェクト URLを解放する

オブジェクト URLは、URL.revokeObjectURL(url)を呼び出すまでBlobをメモリ上に保持します。メモリリークを防ぐため、使い終わったら必ず解放してください。

const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

BlobとJSON

データを文字列化し、正しいMIMEタイプを指定したBlobに格納すると、ダウンロード可能なJSONファイルを作成できます。

const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});

console.log(blob.type);
console.log(blob.size + ' bytes');

Blobが重要な理由

Blobとオブジェクト URLを使うと、バイナリデータをすべてクライアント側で処理できます。アップロードのプレビュー、ダウンロードの生成、大きなファイルの分割処理などが可能です。処理が終わったらURLを解放することを忘れないでください。次はfetchでファイルをサーバーに送信します。

const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);

確認問題

ダウンロードでオブジェクト URLを使った後、メモリを解放するために何を呼び出す必要がありますか。

まとめ：Blobとオブジェクト URL

バイナリデータを扱う方法を学びました。

new Blob(parts, { type })で不変のバイナリデータを作成します。
text()、arrayBuffer()で読み取り、slice()で分割します。
URL.createObjectURLで、プレビューやダウンロードに使えるblob: URLを作成します。
メモリを解放するため、使い終わったら必ずURL.revokeObjectURLを呼び出します。

よくある質問

「Blob とオブジェクト URL」レッスンは無料ですか？

はい。「Blob とオブジェクト URL」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「Blob とオブジェクト URL」で何を学びますか？

ダウンロード用の Blob URL を作成して使います。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Blob とオブジェクト URL」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← JavaScript Academyに戻る