ホームページやブログのコンテンツの中で画像が異なるものに切り替わったり、違うコンテンツが表示されるような動きがあるとおもうのですが今回これらの実装を学習用に解説しましたのでよかったら参考にでもどうぞ！
１ まずはcreate-react-appでプロジェクトをつくる（今回はケーキ屋さんをイメージしたサイトにしました。）
２そして各コンポーネント「Header.js 、Main.js、Footer.js]をつくる。
３ そしてそのなかみは...今回は画像の実装のあるMain.js中心に解説します。
1️⃣ 画像の配列を用意
const images = [img1, img2, img3];
3枚の画像を配列にまとめています。
images[0]、images[1]、images[2] のように インデックスでアクセス できます。
この配列をループして使うことで、どんどん切り替えが可能になります。
2️⃣ 現在表示中の画像を state で管理
const [currentIndex, setCurrentIndex] = useState(0);
useState は React の状態管理フック です。
currentIndex は今表示している画像の番号（0, 1, 2…）を持ちます。
setCurrentIndex を使うと状態を更新でき、React が自動で再レンダリングして 画面を切り替える ことができます。
3️⃣ タイマーで自動切り替え
useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
}, 3000); // 3秒ごと
return () => clearInterval(interval);
}, []);
useEffect は 副作用フック。
→ React コンポーネントが描画された後に実行されます。
setInterval で 3秒ごとに画像を切り替える処理 を作っています。
(prevIndex + 1) % images.length
→ インデックスを順番に増やし、最後まで行ったら 0 に戻す。
→ % images.length がループのカギです。
return () => clearInterval(interval)
→ コンポーネントが消えるときにタイマーを止める安全処理。
4️⃣ 画像の描画
<img src={images[currentIndex]} alt="slide" className="slide-image" />
currentIndex によって 配列のどの画像を表示するか が決まります。
className="slide-image" で CSS を使って画面いっぱいに表示やフェードを設定できます。
5️⃣ CSS のポイント
.slide-image {
width: 100%;
height: 100%;
object-fit: cover; /* 画面いっぱいに拡大 */
position: absolute;
top: 0;
left: 0;
transition: opacity 1s ease-in-out; /* フェード効果 */
}
object-fit: cover → 画面全体を覆うように画像を拡大
position: absolute → 画像を重ねて表示できる
transition: opacity → フェード効果（後で opacity を変えれば滑らかに切り替わる）
🔹 学習ポイントまとめ
配列とインデックスで画像を管理 → ループ切り替えが簡単
useState で現在の画像を管理 → React が再描画
useEffect + setInterval で自動切り替え → タイマーで動かす
CSS で画面いっぱい & フェード効果 → 見た目をきれいにする
応用をすれば左右に矢印を追加して手動で画像切り替えなんかも実装可能です。
