とあるアプリの個人開発で、Input要素クリックしユーザーが画像を選択すると、その画像をプレビューとして表示する機能の実装時に調べた内容です
このコードだと、readAsDataURLでユーザーが選択した画像ファイルを読み込み、その結果得られるデータURL（Base64エンコードされた画像データを含むURL）を使用し、プレビュー画像を直接HTMLソース上に埋め込む実装となります。
firestorageなどにその画像アップすしたい時は適さないので注意
実装したコード
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// ユーザーが選択したファイルを取得
const file = e.target.files?.[0];
// ファイルが選択されているか確認
if (file) {
// FileReaderというWebAPIを使って、ファイルを読み込む準備
const reader = new FileReader();
// ファイルが正しく読み込まれたときの処理を設定
reader.onload = (event) => {
// 読み込んだファイルの内容（この場合は画像のURL）を取得して、
// setUploadedImageというステートを使って保存
setUploadedImage(event.target?.result as string);
};
// 実際にファイルを読み込み。この場合は画像のURLとして読み込み
reader.readAsDataURL(file);
}
};
このコードでは、ユーザーが画像ファイルを選択すると、その画像のURLが取得され、setUploadedImageという関数を使って保存されます。
これを選択された画像をウェブページ上で表示する時に使用していました。
それぞれのコードの説明
// ユーザーが選択したファイルを「データURL」として読み込む
reader.readAsDataURL(file);
FileReaderは、ユーザーが選択したファイルの内容を読み込むためのWeb APIです。
readAsDataURLは、FileReaderのメソッドの一つで、ファイルを「データURL」という形式で読み込むためのものです。
「データURL」とは、ファイルの内容を文字列として表現したもので、特に画像などのメディアファイルを直接ウェブページに埋め込むのに便利な形式です。
例えば、画像ファイルをreadAsDataURLで読み込むと、その画像の内容が "data:image/png;base64,..." のような文字列として得られます。
reader.onload = (event) => {
// 読み込んだファイルの内容を取得
const dataUrl = event.target?.result as string;
// その内容（データURL）を使って何かの処理をする（この場合は、setUploadedImage関数で保存）
setUploadedImage(dataUrl);
};
reader.onload は、ファイルが正しく読み込まれたときに実行される関数を設定するためのものです。
.resultは、FileReaderオブジェクトのプロパティの一つです。
FileReader がファイルの読み込みを完了したとき、この.resultプロパティには読み込んだファイルの内容が格納されます。
この関数内では、event.target?.result を使って、読み込んだファイルの内容（この場合はデータURL）を取得します。
?. はオプショナルチェイニングというJavaScriptの機能で、event.target が存在しない場合にエラーを防ぐためのものです。
as string はTypeScriptの機能で、event.target?.result の値が文字列であることを明示しています。
要するに、このコードはユーザーが選択したファイルをデータURLとして読み込み、その結果を取得して
画像の表示処理を行うためのものです。
処理の順序
わかりやすいようすこし細かくみていきます
-
const file = e.target.files?.[0];- ユーザーが選択したファイルを取得します。e.target.files は選択されたファイルのリストを表し、[0] で最初のファイルを取得しています。
-
if (file) { ... }- ファイルが実際に選択されているかを確認します。選択されていれば、中の処理が実行されます。
-
const reader = new FileReader();- ファイルを読み込むための新しい FileReader オブジェクトを作成します。
-
reader.onload = (event) => { ... };- ファイルが正しく読み込まれたときに実行される関数を設定します。この関数はまだ実行されていません。ファイルが読み込まれたときに自動的に実行されるように設定されています。
-
reader.readAsDataURL(file);- ここで、実際にファイルを「データURL」として読み込みます。このメソッドを呼び出すと、ファイルの読み込みが開始され、読み込みが完了すると先ほど設定した onload の関数が実行されます。