React特訓04: ボタンをクリックしたら、そのアイコンが表示されるコンポーネントを作成しよう

はじめに

私がReactを学習するにあたって、AIに頼らずコードを描けるようになるために解いた問題を、アウトプットとして残していきます。

この問題はAIを使用して作成したもので、以下の流れで学習を進めたものになります。

1. AIに問題を作らせる
2. 調べながらやってみる
3. 困ったらAIに質問する
4. AIにレビューしてもらう

問題

ユーザーがドロップダウンメニューからカテゴリーを選択すると、それに合わせて関連する項目リストが表示されるコンポーネントを作ろう

要件

• 「晴れ☀️」「曇り☁️」「雨☔️」の3つのボタンを表示
• クリックされたボタンに対応する絵文字を表示
• 初期値は絵文字は表示されていない

ポイント

• useStateを使った選択項目の状態管理
• ボタンを使ったイベント処理の基本
• 条件に応じたレンダリングの方法

完成系

• 初期状態
  
• 各ボタンをクリック
  
  
  

解答

import React, { useState } from 'react';

function ButtonSelector() {
  const [selectedButton, setSelectedButton] = useState('');
  const buttonItems = {
    sunny: "☀️",
    cloudy: "☁️",
    rainy: "☔️"
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen">
      <div className="mb-8">
        <button className="w-[100px] px-4 py-2 m-2 bg-yellow-300" onClick={() => setSelectedButton(buttonItems.sunny)}>晴れ☀️</button>
        <button className="w-[100px] px-4 py-2 m-2 bg-gray-300" onClick={() => setSelectedButton(buttonItems.cloudy)}>曇り☁️</button>
        <button className="w-[100px] px-4 py-2 m-2 bg-blue-300" onClick={() => setSelectedButton(buttonItems.rainy)}>雨☔️</button>
      </div>
      <p className="text-6xl">{selectedButton}</p>
    </div>
  );
}

export default ButtonSelector;

解説

記述の手順
1. 関数コンポーネントを作成
2. ボタンのクリック状態を管理するstateを作成
3. 3種の天候のリストを作成
4. UIを作成
5. クリックイベントを作成

以下から順に進めます。

---

1. 関数コンポーネントを作成

function ButtonSelector() {

---

2. ボタンのクリック状態を管理するstateを作成

const [selectedButton, setSelectedButton] = useState('');

---

3. 3種の天候のリストを作成

今回はオブジェクトとしてリストを作成しているが、これを配列として作成することもできる。
違いは次のとおり。

特徴	配列	オブジェクト（emojis）
順番の管理	✅ 向いている	❌ 順番に意味を持たせにくい
名前付きの管理（意味づけ）	❌ 不向き	✅ キーで意味が明確になる
.map() で一覧を表示	✅ わかりやすい	🔶 可能だが少し工夫が必要
状態ごとの取り出し（例: suny）	❌ しにくい	✅ buttonItems["sunny"] で即取得

配列を使うならmapを使いやすいので、作成するbuttonタグは1つで済む。
一方オブジェクトで作成するとmapの使用には工夫が必要なため、今回はbuttonを3つ作成している。

  const buttonItems = {
    suny: "☀️",
    cloudy: "☁️",
    rainy: "☔️"
  };

---

4. UIを作成

TailWindを使用してお好みのスタイルに調整

  return (
    <div className="flex flex-col items-center justify-center min-h-screen">
      <div className="mb-8">
        <button className="w-[100px] px-4 py-2 m-2 bg-yellow-300")>晴れ☀️</button>
        <button className="w-[100px] px-4 py-2 m-2 bg-gray-300">曇り☁️</button>
        <button className="w-[100px] px-4 py-2 m-2 bg-blue-300">雨☔️</button>
      </div>
      <p className="text-6xl">{selectedButton}</p>
    </div>
  );

---

5. クリックイベントを作成

⬇️ユーザーが「晴れ☀️」ボタンをクリック
⬇️onClick によって setSelectedButton(buttonItems.suny) が実行される
⬇️buttonItems.suny ＝ "☀️" が selectedButton にセットされる
⬇️Reactが再描画を行い、<p>{selectedButton}</p> が"☀️"を表示する

<button className="…" onClick={() => setSelectedButton(buttonItems.suny)}>晴れ☀️</button>
<button className="…" onClick={() => setSelectedButton(buttonItems.cloudy)}>曇り☁️</button>
<button className="…" onClick={() => setSelectedButton(buttonItems.rainy)}>雨☔️</button>