「Reactで何か実用的なアプリを作ってみたいけれど、何がよいか分からない…」
そんな方におすすめなのが画像ギャラリーアプリです。
このアプリでは、サムネイルの表示・モーダルでの拡大・状態管理などを通じて、Reactの主要スキルを一度に学べます。
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;
まとめ：UIの基本を学ぶ第一歩
画像ギャラリーアプリは、Reactの基本的なコンポーネント設計・イベント処理・状態管理をすべて含んだ題材です。
実装を通して、UI構築の自信がつき、応用力も養われるでしょう。
Japanese 
English