1. 導入
Webアプリケーションにおける画像アップロード機能において、ユーザーが「どの画像を選択したか」をその場で確認できるプレビュー機能は、UX（ユーザー体験）を向上させるために不可欠なUIです。サーバーへファイルを送信する前にブラウザ側で画像をレンダリングすることで、誤選択の防止や操作の直感性を高めることができます。本記事では、HTML5で導入されたFileReader APIを活用したプレビュー実装方法を解説します。
2. 基礎知識
FileReader APIとは、Webアプリケーションがローカルのファイル（ユーザーが選択したファイルなど）の内容を非同期に読み取るためのインターフェースです。通常、セキュリティ上の理由からブラウザはローカルのファイルシステムに直接アクセスできませんが、このAPIを使用することで、選択されたファイルのデータをData URL（Base64エンコードされた文字列）として取得し、imgタグのsrc属性にセットすることが可能になります。
3. 実装/解決策
実装の流れは以下の通りです。
1. input type=”file” 要素にchangeイベントリスナーを設定する。
2. 選択されたファイルが画像形式（MIMEタイプ）であるかバリデーションを行う。
3. FileReaderオブジェクトをインスタンス化し、readAsDataURLメソッドでファイルを読み込む。
4. ファイルの読み込み完了時に発火するonloadイベントで、結果をimgタグのsrcに適用する。
4. サンプルプログラム
以下は、実務でもそのまま活用できるシンプルな実装例です。
5. 応用・注意点
実務開発において注意すべき点は以下の3点です。
・セキュリティとバリデーション
ブラウザ側でのバリデーションはあくまでUX向上のためのものです。必ずPHPなどのサーバーサイドでも、getimagesize()関数やfinfo_file()を使用して、アップロードされたファイルのMIMEタイプや拡張子が不正でないか二重チェックを行ってください。
・メモリ消費
FileReaderで画像をData URL形式に変換すると、元のファイルサイズよりもデータ量が増加します（Base64化によるオーバーヘッド）。非常に大きなサイズの画像をプレビューする場合、ブラウザのメモリを圧迫する可能性があるため、必要に応じてCanvas APIを使用してブラウザ側でリサイズ処理を挟む等の工夫が求められます。
・古いブラウザへの対応
FileReaderはIE10以上でサポートされています。モダンブラウザのみを対象とするプロジェクトであれば問題ありませんが、レガシー環境を考慮する場合は、対応していない場合にアラートを出すか、プレビューを表示しないといったフォールバック処理を実装してください。