Reactで簡単に実装できる画像プレビュー機能の作り方

Reactを使ったWebアプリケーションでは、画像アップロード機能が必須となっています。その際、ユーザーが選択した画像を事前にプレビューできると、使いやすさが向上します。今回は、Reactで簡単に実装できる画像プレビュー機能の作り方を紹介します。

1. FileReader APIを使った画像読み込み

まず、FileReader APIを使って、ユーザーが選択した画像を読み込みます。FileReader APIを使うことで、JavaScriptからファイルを直接読み込むことができます。

const handleImageChange = (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onloadend = () => {
    // 読み込み完了時の処理
  }

  reader.readAsDataURL(file);
}

上記のコードでは、handleImageChange関数内で、FileReaderオブジェクトを生成し、readAsDataURLメソッドを呼び出すことで、画像を読み込んでいます。

2. useStateフックを使った画像データの管理

次に、読み込んだ画像データをuseStateフックを使って管理します。useStateフックを使うことで、Reactの状態管理機能を利用することができます。

const [imageData, setImageData] = useState(null);

const handleImageChange = (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onloadend = () => {
    setImageData(reader.result);
  }

  reader.readAsDataURL(file);
}

上記のコードでは、useStateフックを使って、imageDataという状態変数を定義し、初期値をnullとしています。handleImageChange関数内で、setImageData関数を使って、読み込んだ画像データをimageDataに設定しています。

3. 条件付きレンダリングによる画像プレビュー表示

最後に、条件付きレンダリングを使って、画像プレビューを表示します。条件付きレンダリングを使うことで、imageDataがnullでない場合にのみ、画像プレビューを表示することができます。

{imageData && (
  <img src={imageData} alt="プレビュー画像" />
)}

上記のコードでは、image
Dataがnullでない場合に、<img>要素をレンダリングしています。src属性には、読み込んだ画像データを指定しています。

まとめ

今回は、Reactで簡単に実装できる画像プレビュー機能の作り方を紹介しました。FileReader APIを使って画像を読み込み、useStateフックを使って画像データを管理し、条件付きレンダリングを使って画像プレビューを表示することができます。ぜひ、この方法を参考にして、自分なりにアレンジしてみてください。