Reactで画像ギャラリーを作る方法｜サムネイル対応の完全ガイド

「Reactで何か実用的なアプリを作ってみたいけれど、何がよいか分からない…」
そんな方におすすめなのが画像ギャラリーアプリです。
このアプリでは、サムネイルの表示・モーダルでの拡大・状態管理などを通じて、Reactの主要スキルを一度に学べます。

React 画像ギャラリーの作り方
1. 結論：UIの基礎と状態管理が学べます
プロジェクト準備と環境構築
1. 使用ツールと技術
ギャラリーの構成とコンポーネント
1. ページ構成
2. コンポーネント設計
サムネイル表示の実装
1. 配列から画像をマップ表示
モーダルの拡大表示機能
1. 状態管理と条件付き描画
公的機関のデザインに関する参考
よくあるエラーと対応策
1. 画像が表示されない場合
2. モーダルが閉じない
完成コードまとめ
1. App.js
まとめ：UIの基本を学ぶ第一歩

React 画像ギャラリーの作り方

結論：UIの基礎と状態管理が学べます

画像ギャラリーは、Reactでの状態の管理、イベント処理、リスト描画の方法を学ぶのに最適な題材です。

プロジェクト準備と環境構築

使用ツールと技術

React（create-react-app）
CSSモジュールまたはstyled-components
画像データはローカルもしくは外部URL

npx create-react-app image-gallery
cd image-gallery

ギャラリーの構成とコンポーネント

ページ構成

トップページ（画像一覧）
拡大画像用モーダル

コンポーネント設計

Gallery.js：全体表示
Thumbnail.js：サムネイル
Modal.js：拡大画像表示

サムネイル表示の実装

配列から画像をマップ表示

const images = [
  { id: 1, src: "/img/photo1.jpg", alt: "料理1" },
  { id: 2, src: "/img/photo2.jpg", alt: "料理2" },
  ...
];

<div className="gallery">
  {images.map(img => (
    <img key={img.id} src={img.src} alt={img.alt} onClick={() => openModal(img)} />
  ))}
</div>

モーダルの拡大表示機能

状態管理と条件付き描画

const [selectedImage, setSelectedImage] = useState(null);
 
{selectedImage && (
  <div className="modal" onClick={() => setSelectedImage(null)}>
    <img src={selectedImage.src} alt={selectedImage.alt} />
  </div>
)}

公的機関のデザインに関する参考

デジタル庁「UI/UXガイドライン」：https://www.digital.go.jp/policies/design/
経産省「誰一人取り残さないデザイン」：https://www.meti.go.jp/policy/mono_info_service/mono/design/

よくあるエラーと対応策

画像が表示されない場合

相対パスまたはファイル名が誤っている
publicフォルダ内の画像配置に注意

モーダルが閉じない

イベント伝播の阻止忘れ（e.stopPropagation()を活用）

完成コードまとめ

最終的なコードは以下のようになります。

App.js

import React, { useState } from "react";
import "./App.css";
 
const images = [
  { id: 1, src: "/img/photo1.jpg", alt: "料理1" },
  { id: 2, src: "/img/photo2.jpg", alt: "料理2" },
  { id: 3, src: "/img/photo3.jpg", alt: "料理3" },
];
 
function App() {
  const [selectedImage, setSelectedImage] = useState(null);
 
  return (
    <div className="App">
      <h1>画像ギャラリー</h1>
      <div className="gallery">
        {images.map((img) => (
          <img
            key={img.id}
            src={img.src}
            alt={img.alt}
            onClick={() => setSelectedImage(img)}
            className="thumb"
          />
        ))}
      </div>
      {selectedImage && (
        <div className="modal" onClick={() => setSelectedImage(null)}>
          <img src={selectedImage.src} alt={selectedImage.alt} />
        </div>
      )}
    </div>
  );
}
export default App;