ダウンロード（リンク生成） — const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='file.txt'; a.click()
ブラウザで生成したデータを「ファイルとして保存」したいときに使う定番パターンです。Blob（データのかたまり）から一時的なURLを作り、<a>タグの download 属性を使って保存します。初心者でも理解しやすいように、順を追って説明します。
基本の流れ
- Blobを作る — 保存したいデータをファイル化できる形にする。
- ObjectURLを作る —
URL.createObjectURL(blob)で一時的なリンクを生成。 - リンク要素を作る —
<a>タグを生成し、hrefにそのURLを設定。 - download属性を付ける — 保存時のファイル名を指定。
- クリックを発火 —
a.click()で自動的にダウンロード開始。 - URLを解放 —
URL.revokeObjectURL(url)でメモリを解放。
基本コード例（テキスト保存）
<button id="save">保存</button>
<script>
document.getElementById("save").addEventListener("click", () => {
const txt = "こんにちは、これは保存テキストです。";
// 1) Blobを作成
const blob = new Blob([txt], { type: "text/plain" });
// 2) ObjectURLを生成
const url = URL.createObjectURL(blob);
// 3) ダウンロード用リンクを作成
const a = document.createElement("a");
a.href = url;
a.download = "hello.txt"; // 保存ファイル名
// 4) 自動クリックでダウンロード開始
a.click();
// 5) URLを解放
URL.revokeObjectURL(url);
});
</script>
よく使うテンプレート集
JSONデータを保存
const data = { name: "Aki", age: 20 };
const blob = new Blob([JSON.stringify(data, null, 2)], { 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);
CSVを保存
const rows = [
["名前", "年齢"],
["Aki", 20],
["Ken", 25],
];
const csv = rows.map(r => r.join(",")).join("\n");
const blob = new Blob([csv], { type: "text/csv" });
const url = URL.createObjectURL(blob);
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)を呼んでメモリリークを防ぐ。 - ユーザー操作に紐付け: ダウンロードはクリックイベントなどユーザー操作に紐付けないとブラウザがブロックすることがある。
- 文字化け対策: CSVをExcelで開く場合は先頭に
\uFEFF（BOM）を付けると文字化けしにくい。
練習問題（メモ帳アプリ風）
<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/画像へ応用すると理解が深まる。