JavaScript | Web API：ファイル・データ操作 － Blob

JavaScript JavaScript
スポンサーリンク

Blob は「生データ（バイナリやテキスト）をまとめて持つ“データのかたまり”」

Blob は、
「ファイルっぽい“データのかたまり”をメモリ上に表現するためのオブジェクト」 です。

画像・テキスト・JSON・バイナリ…
中身の種類は何でもよくて、とにかく「連続したバイト列」を表します。

File は「ファイルシステム上にある Blob＋ファイル名などの情報」
Blob は「ファイル名などを持たない、純粋なデータのかたまり」

という関係だと思ってください。

ブラウザの中で、

テキストから「即席のファイルっぽいもの」を作る
Canvas から画像データを Blob にする
サーバーから受け取ったバイナリを Blob として扱う

といった場面で、Blob はよく登場します。

Blob の基本形：「中身の配列」と「タイプ」を渡して作る

new Blob(parts, options) の形

一番シンプルなコンストラクタはこうです。

const blob = new Blob(
  ["こんにちは\nこれは Blob です。\n"],
  { type: "text/plain" }
);
JavaScript

第1引数 parts は「中身の断片の配列」です。
文字列でも、ArrayBuffer でも、Uint8Array でも OK です。

第2引数 options の type は MIME タイプです。

"text/plain"
"application/json"
"image/png"

など、「この Blob は何のデータなのか」 を表すラベルを付けます。

ここで重要なのは、

Blob 自体は「ただのデータのかたまり」であり、
「どこかのファイルに保存されているわけではない」

という点です。

size と type が取れる

console.log(blob.size); // バイト数
console.log(blob.type); // "text/plain"
JavaScript

Blob は File と同じく、size と type を持っています。
ただし、name や lastModified はありません（それは File の役割）。

例題①：文字列から Blob を作って「ダウンロードさせる」

HTML

<button id="download">テキストをダウンロード</button>

JavaScript

const btn = document.querySelector("#download");

btn.addEventListener("click", () => {
  const text = "こんにちは\nこれは Blob から作ったテキストファイルです。";

  const blob = new Blob([text], { type: "text/plain" });

  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = "sample.txt";
  a.click();

  URL.revokeObjectURL(url);
});
JavaScript

流れを整理すると、

文字列から Blob を作る
URL.createObjectURL(blob) で一時的な URL を作る
<a> 要素の href にその URL をセットし、download 属性でファイル名を指定
a.click() で擬似的にクリックしてダウンロード開始
最後に URL.revokeObjectURL(url) で URL を解放

という感じです。

ここで掴んでほしいのは、

「ブラウザの中で作ったデータを、Blob 経由で“ダウンロード可能なファイル”にできる」

という感覚です。

重要ポイント：Blob と File の関係をしっかり整理する

File は Blob のサブクラス（＋ファイル情報）

File は、概念的には「Blob＋ファイル名など」です。

new File(parts, name, options) というコンストラクタもあります。

const file = new File(
  ["hello"],
  "hello.txt",
  { type: "text/plain" }
);

console.log(file instanceof Blob); // true
console.log(file instanceof File); // true
JavaScript

つまり、

Blob は「中身だけ」
File は「中身＋名前＋更新日時」

というイメージです。

ユーザーが <input type="file"> で選んだのは File
自分で作る「即席データのかたまり」は Blob

と覚えておくと整理しやすいです。

Blob から FileReader で中身を読むこともできる

Blob は File と同じく、FileReader で読めます。

const blob = new Blob(["こんにちは"], { type: "text/plain" });
const reader = new FileReader();

reader.addEventListener("load", () => {
  console.log(reader.result); // "こんにちは"
});

reader.readAsText(blob, "utf-8");
JavaScript

「FileReader は File 専用」ではなく、
「File / Blob を読むためのリーダー」 だというのも、合わせて覚えておくと良いです。

例題②：JSON オブジェクト → Blob → ダウンロード

HTML

<button id="download-json">JSON をダウンロード</button>

JavaScript

const btn = document.querySelector("#download-json");

btn.addEventListener("click", () => {
  const data = {
    name: "太郎",
    age: 25,
    skills: ["JavaScript", "HTML", "CSS"]
  };

  const json = JSON.stringify(data, null, 2);

  const blob = new Blob([json], { type: "application/json" });

  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = "data.json";
  a.click();

  URL.revokeObjectURL(url);
});
JavaScript

ここでのポイントは、

JavaScript のオブジェクトを JSON 文字列にする
その文字列から Blob を作る
Blob を「ダウンロード可能なファイル」に変換する

という流れです。

「ブラウザ内のデータを、ユーザーにファイルとして渡す」
というのは、実務でもかなりよくあるパターンです。

重要ポイント：Blob は「バイナリもテキストも同じように扱える」

parts に渡せるもの

new Blob(parts) の parts には、主に次のようなものが入れられます。

文字列（"hello"）
ArrayBuffer
TypedArray（Uint8Array など）
他の Blob

例えば、バイナリデータを扱うときは Uint8Array を使います。

const bytes = new Uint8Array([72, 101, 108, 108, 111]); // "Hello"
const blob = new Blob([bytes], { type: "application/octet-stream" });
JavaScript

テキストもバイナリも、
「結局はバイト列だよね」という考え方で統一されているのが Blob です。

slice で一部だけ切り出せる

Blob には slice メソッドがあります。

const part = blob.slice(0, 10, "text/plain");
JavaScript

これは、

開始位置（バイト単位）
終了位置（バイト単位）
新しい Blob の type

を指定して、元の Blob の一部を切り出した新しい Blob を作ります。

大きなファイルを分割して送信したり、
一部だけ処理したいときに使われますが、
初心者のうちは「そんなこともできるんだ」くらいで十分です。

例題③：Canvas から画像 Blob を作ってダウンロード

Canvas と Blob の組み合わせも、よく使われるパターンです。

HTML

<canvas id="canvas" width="200" height="200"></canvas>
<button id="save">画像として保存</button>

JavaScript

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
const btn = document.querySelector("#save");

// 適当に描画
ctx.fillStyle = "skyblue";
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

btn.addEventListener("click", () => {
  canvas.toBlob((blob) => {
    if (!blob) return;

    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "canvas.png";
    a.click();
    URL.revokeObjectURL(url);
  }, "image/png");
});
JavaScript

ここでは、

canvas.toBlob で Canvas の内容を画像 Blob に変換
その Blob を createObjectURL で URL にする
<a> でダウンロード

という流れになっています。

「画面に描いたものを、そのまま画像ファイルとして保存させる」
というのは、Blob がなければかなり面倒な処理です。

初心者として Blob で本当に掴んでほしいこと

Blob は「ファイルっぽい“データのかたまり”」を表すオブジェクト
new Blob(parts, { type }) で、文字列やバイナリから簡単に作れる
size と type を持つが、ファイル名は持たない（それは File の役割）
URL.createObjectURL(blob) で「一時的な URL」を作り、ダウンロードや画像表示に使える
FileReader で Blob の中身をテキストや data URL として読むこともできる

まずは、

文字列から Blob を作って .txt としてダウンロードする
JSON オブジェクトを Blob 経由で data.json としてダウンロードする

この 2 パターンを自分の手で書いてみてください。

「ブラウザの中で作ったデータを、Blob を通して“ファイルのように扱える”」
という感覚が一度でも掴めると、
Blob はただの抽象的な概念ではなく、
「Web アプリとファイル世界をつなぐ、柔軟なデータコンテナ」 に見えてきます。

スポンサーリンク
タイトルとURLをコピーしました