Blob とファイル作成 — const b = new Blob([txt], { type: 'text/plain' })
Blob（Binary Large Object）は「生のデータのかたまり」を表すオブジェクトです。文字列やバイナリをまとめてファイルのように扱えます。初心者がまず触れるのは「テキストをファイルにしてダウンロード」するケースです。
基本のコード例（テキストをファイル化）
<button id="save">テキスト保存</button>
<script>
document.getElementById("save").addEventListener("click", () => {
const txt = "こんにちは、これは保存テキストです。";
// 1) Blobを作成（中身は文字列、タイプはプレーンテキスト）
const b = new Blob([txt], { type: "text/plain" });
// 2) BlobからURLを作成
const url = URL.createObjectURL(b);
// 3) ダウンロード用リンクを作ってクリック
const a = document.createElement("a");
a.href = url;
a.download = "hello.txt"; // 保存ファイル名
a.click();
// 4) URLを解放（メモリリーク防止）
URL.revokeObjectURL(url);
});
</script>
- Blob: データのかたまり。
new Blob([内容], { type: MIMEタイプ })。 - ObjectURL:
URL.createObjectURL(blob)で一時的なURLを作れる。 - ダウンロード:
<a>のdownload属性を使うとファイル保存が可能。
よく使うテンプレート集
JSONデータを保存
const data = { name: "Aki", age: 20 };
const b = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
const url = URL.createObjectURL(b);
const a = document.createElement("a");
a.href = url;
a.download = "data.json";
a.click();
URL.revokeObjectURL(url);
CSVを生成して保存
const rows = [
["名前", "年齢"],
["Aki", 20],
["Ken", 25],
];
const csv = rows.map(r => r.join(",")).join("\n");
const b = new Blob([csv], { type: "text/csv" });
const url = URL.createObjectURL(b);
const a = document.createElement("a");
a.href = url;
a.download = "users.csv";
a.click();
URL.revokeObjectURL(url);
画像データを扱う（例: Canvasから）
const canvas = document.getElementById("canvas");
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "image.png";
a.click();
URL.revokeObjectURL(url);
}, "image/png");
実務でのコツ
- MIMEタイプを正しく指定:
- テキストなら
"text/plain"、JSONなら"application/json"、CSVなら"text/csv"。
- テキストなら
- URL解放を忘れない:
URL.revokeObjectURL(url)を呼んでメモリを解放。 - 大きなデータ: 数MB〜数百MBでも扱えるが、ブラウザのメモリに依存するので注意。
- ユーザー操作に紐付け: ダウンロードはユーザー操作（クリックなど）に紐付けないとブラウザがブロックすることがある。
- セキュリティ: Blobはローカルファイルに直接アクセスするわけではない。生成したデータだけを扱うので安全。
ありがちなハマりポイントと対策
- 文字化け:
- 対策: 日本語を含む場合でも
text/plainで問題ないが、CSVなどは\uFEFF（BOM）を先頭に付けるとExcelで文字化けしにくい。
- 対策: 日本語を含む場合でも
- ObjectURLを解放し忘れる:
- 対策: ダウンロード後に
URL.revokeObjectURL(url)を必ず呼ぶ。
- 対策: ダウンロード後に
- Blobに配列を渡すとき:
- 対策:
[txt]のように配列にする。複数の文字列やバイナリをまとめて渡せる。
- 対策:
練習問題（メモ帳アプリ風）
<textarea id="memo" rows="5" cols="30">ここに書いた内容を保存</textarea>
<button id="save">保存</button>
<script>
document.getElementById("save").addEventListener("click", () => {
const txt = document.getElementById("memo").value;
const blob = new Blob([txt], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "memo.txt";
a.click();
URL.revokeObjectURL(url);
});
</script>
- 効果: テキストエリアに書いた内容を
memo.txtとして保存できます。
直感的な指針
- Blob = データのかたまり。
- ObjectURLで一時リンクを作り、
<a download>で保存。 - MIMEタイプを正しく指定し、解放を忘れない。
- 初心者は「テキスト保存」から始め、JSON/CSV/画像へ応用すると理解が深まる。