導入：なぜURL.createObjectURLが重要なのか
Webサイトを作っていると「ユーザーがアップロードした画像を、サーバーに送る前にその場で表示したい」という場面によく遭遇します。しかし、ブラウザのセキュリティ制限により、ローカルファイルのパスを直接指定することはできません。
そこで登場するのが URL.createObjectURL です。これを使うと、ブラウザのメモリ上に一時的な仮想URLを作成し、まるでWeb上の画像のように扱うことができます。これによって、アップロード処理を待たずに即座にプレビューを表示できるため、ユーザー体験が大きく向上します。
基礎知識：URL.createObjectURLとは何か
このAPIは、FileオブジェクトやBlobオブジェクト（バイナリデータ）を引数に渡すと、そのデータにアクセスするための「一時的なURL（blob:…から始まる文字列）」を生成するメソッドです。
重要なポイントは、このURLはそのタブを開いている間だけ有効であるということです。ブラウザのメモリを無駄遣いしないよう、不要になったらURLを解放してあげるという「お作法」がある点も覚えておきましょう。
実装：画像プレビュー機能を作ってみよう
実装手順は非常にシンプルです。
1. inputタグ（type=”file”）を用意する
2. ファイルが選択されたらchangeイベントを取得する
3. 取得したファイルをURL.createObjectURLに渡す
4. 生成されたURLをimgタグのsrc属性に代入する
サンプルプログラム
以下のコードをHTMLファイルとして保存すれば、すぐに動作を確認できます。
応用・注意点：現場で陥りやすい罠
実務で使う際に最も注意すべき点は、URL.revokeObjectURLによる解放処理です。
URL.createObjectURLで生成したURLは、ページをリロードするまでメモリ上に残り続けます。もし大量の画像をプレビューし続けると、ブラウザのメモリを圧迫して動作が重くなる原因になります。
サンプルコードのように、新しい画像を選択したタイミングで「古いURLを破棄する」処理を入れるのがプロの作法です。また、SPA（ReactやVueなど）で開発している場合は、コンポーネントがアンマウントされるタイミングでURLを解放するのを忘れないようにしましょう。