HTML5のBlob.slice()メソッドとは？使い方とサンプルコードを解説

HTML5で導入された Blob.slice() メソッドは、元のBlobオブジェクトから指定したバイト範囲のデータを抜き出し、そのデータを含む新しいBlobオブジェクトを作成するためのメソッドです。

このメソッドは、大きなファイルを分割して処理したい場合や、ファイルの一部だけをサーバーに送信したい場合などに非常に便利です。引数には開始位置（start）、終了位置（end）、そして任意でコンテンツタイプ（contentType）を指定できます。

slice()を使ったバイナリデータの送受信例

ここでは、slice() を活用してバイナリデータを送受信する例を紹介します。次のサンプルでは、テキストデータからBlobオブジェクトを生成し、HTTPのPOSTメソッドを使ってサーバーへ「ファイル」として送信しています。

var val = new XMLHttpRequest();

val.open("POST", url, true);
val.onload = function (event) {
  // サーバーからのレスポンス処理をここに記述
};

var blob = new Blob(['demo'], {type: 'text/plain'});
val.send(blob);

コードの解説

まず new Blob(['demo'], {type: 'text/plain'}) の部分で、文字列「demo」を含むプレーンテキスト形式のBlobオブジェクトを生成しています。続いて XMLHttpRequest を使ってPOSTリクエストを非同期（true）で開き、send() メソッドにBlobオブジェクトを渡すことで、データをサーバーに送信します。

このようにBlobオブジェクトは、ファイルデータをメモリ上で柔軟に扱うための仕組みとして、ファイルアップロード機能や部分送信など、さまざまなWebアプリケーションで活用されています。