14. File API の魔法：
サーバーを通さず
画像を表示する技術

1. 「アップロード」という概念をアップデートする

通常のWebサービスでは、ユーザーが選択した画像を画面に表示する場合、まずサーバーへアップロードし、その後に発行されるURL（例：https://server.com/images/123.jpg）を <img> タグに渡す必要があります。

しかし、この仕組みには「プライバシーの懸念」と「通信待ちのストレス」という2つの大きなデメリットがあります。履歴書用の写真という極めてデリケートなデータを、素性の知れないサーバーに送りたくない……。その問題を解決してくれたのが File API です。

2. URL.createObjectURL という画期的な仕組み

File API の中でも、特に「魔法」と呼ぶにふさわしいのが URL.createObjectURL() というメソッドです。

これは、JavaScriptが読み取ったローカル上のファイルオブジェクトに対して、ブラウザ内だけで有効な一時的なURL（Blob URL）を発行する仕組みです。このURLは blob:http://localhost... といった形式で、ブラウザのメモリ内に直接マッピングされています。

コードで比較する Before / After

【Before】サーバーへ送る、従来の方法

// 1. サーバーへアップロード（時間がかかる & セキュリティリスク）
const formData = new FormData();
formData.append('photo', file);
const res = await fetch('/api/upload', { method: 'POST', body: formData });
const data = await res.json();

// 2. サーバーから返ってきたURLをセット
previewImg.src = data.url;

【After】猫の手ツールの方法（一瞬で表示 & 100%安全）

// 1. ブラウザのメモリ内に直接URLを発行（0秒で完了）
const blobUrl = URL.createObjectURL(file);

// 2. そのまま img タグにセット
previewImg.src = blobUrl;

// ⚠️ サーバー通信は 1byte も発生しない！

3. 実装上の注意点：メモリリークという罠

この技術は非常に便利ですが、フロントエンドエンジニアとして絶対に忘れてはいけないのが「メモリの解放」です。

URL.createObjectURL() で生成されたURLは、明示的に破棄されるか、ブラウザのタブが閉じられるまでメモリを専有し続けます。特に「猫の手ツール」のように何度も写真を入れ替えるツールの場合、古いURLを放置するとブラウザのメモリを食い潰し、動作が重くなる原因になります。

// 新しい画像を表示する前に、古いURLをメモリから解放する
if (oldBlobUrl) {
  URL.revokeObjectURL(oldBlobUrl);
}

「作ったら、消す」。インフラの構築でも不要なリソースの削除が基本であるように、JavaScriptのメモリ管理もまた、エンジニアの誠実さが問われるポイントだと感じました。

4. 技術が支える「利用者の自由」

ブラウザの中で処理が完結するということは、ユーザーが「オフライン」の状態でもツールが動くということも意味します。

サーバーの機嫌やネットワークの細さに左右されず、いつでも手元の端末だけで作業ができる。そして何より、「自分の顔写真がどこにも飛んでいかない」という確信。この File API の仕組みを知ったとき、まさに猫の手を借りるような気軽さと、鉄壁のセキュリティが両立できると確信しました。

まとめ

File API は、単なる「便利な機能」以上の価値をツールに与えてくれました。

インフラの構成図を引くときのように、データの流れ（データフロー）を意識して設計すれば、フロントエンドはもっと安全で快適な場所にできる。その可能性を教えてくれたのが、この小さな一行、URL.createObjectURL(file) でした。