HTML5のBlob.slice()メソッドとは？指定範囲のデータを抽出する方法を解説

HTML5のBlob.slice()メソッドの役割

HTML5で利用できる Blob.slice() メソッドは、元のBlobオブジェクト（ファイル）のうち、指定したバイト範囲に含まれるデータだけを抜き出し、新しいBlobオブジェクトとして生成するためのメソッドです。

このメソッドを使うと、巨大なファイルの一部だけを扱いたい場合に非常に便利です。例えば、大容量ファイルを複数の小さな塊（チャンク）に分けて送信する「分割アップロード」などで広く活用されています。

slice()メソッドの基本構文

blob.slice(start, end, contentType)

• start：抽出を開始するバイト位置（省略した場合は先頭から）
• end：抽出を終了するバイト位置（省略した場合は末尾まで）
• contentType：新しいBlobに設定するMIMEタイプ（省略可能）

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

次の例では、テキストデータからBlobを生成し、XMLHttpRequestのPOSTメソッドを使ってサーバーへ送信しています。slice()で得られたBlobも同様の手順でそのまま送信できます。

var val = new XMLHttpRequest();
val.open("POST", url, true);
val.onload = function (event) {
  // サーバーからのレスポンスに対する処理
};
var blob = new Blob(['demo'], {type: 'text/plain'});
val.send(blob);

slice()利用時のポイント

Blob.slice() は元のBlobの内容を書き換えるわけではなく、指定範囲のデータを持つ別の新しいBlobを返す点に注意してください。この特性により、元のファイルを保持したまま安全に部分処理が行えます。

また、File APIの File オブジェクトはBlobを継承しているため、ユーザーが選択したファイルに対しても同じようにslice()を適用でき、メモリ効率の良い大容量ファイル処理を実現できます。