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

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

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

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

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

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

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

### 完成系
- 初期状態 
![スクリーンショット 2025-05-05 10.10.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/87c7db83-9913-466b-9a02-01963776a248.png)
- 各ボタンをクリック
![スクリーンショット 2025-05-05 10.10.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/ab823b82-4cb6-4093-a556-470f47a408c3.png)
![スクリーンショット 2025-05-05 10.11.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/6c64295f-2984-475c-8aaa-2f010aff2fb0.png)
![スクリーンショット 2025-05-05 10.11.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/6bc74fc7-9858-4ce1-b43e-0a5dc45e873a.png)


## 解答
```jsx
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\.  関数コンポーネントを作成
```jsx
function ButtonSelector() {
```
---
#### 2\. ボタンのクリック状態を管理する`state`を作成
```jsx
const [selectedButton, setSelectedButton] = useState('');
```
---
#### 3\. 3種の天候のリストを作成
今回はオブジェクトとしてリストを作成しているが、これを配列として作成することもできる。
違いは次のとおり。
| 特徴                             | 配列       | オブジェクト（`emojis`）                   |
|----------------------------------|-------------------------------|---------------------------------------------|
| 順番の管理                       | ✅ 向いている                | ❌ 順番に意味を持たせにくい                |
| 名前付きの管理（意味づけ）       | ❌ 不向き                    | ✅ キーで意味が明確になる                  |
| `.map()` で一覧を表示            | ✅ わかりやすい              | 🔶 可能だが少し工夫が必要                  |
| 状態ごとの取り出し（例: suny） | ❌ しにくい                  | ✅ `buttonItems["sunny"]` で即取得              |

配列を使うなら`map`を使いやすいので、作成する`button`タグは1つで済む。
一方オブジェクトで作成すると`map`の使用には工夫が必要なため、今回は`button`を3つ作成している。
```jsx
  const buttonItems = {
    suny: "☀️",
    cloudy: "☁️",
    rainy: "☔️"
  };
```
---
#### 4\. UIを作成
TailWindを使用してお好みのスタイルに調整
```jsx
  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>` が` "☀️" `を表示する
```jsx
<button className="…" onClick={() => setSelectedButton(buttonItems.suny)}>晴れ☀️</button>
<button className="…" onClick={() => setSelectedButton(buttonItems.cloudy)}>曇り☁️</button>
<button className="…" onClick={() => setSelectedButton(buttonItems.rainy)}>雨☔️</button>
```