React特訓05: セレクトボックスで背景色を動的に変更しよう

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

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

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

## 問題
セレクトボックスからカラーを選択すると、画面上の背景色が動的に変化するコンポーネントを作成しよう

### 要件
- セレクトボックスで「赤」「青」「緑」の3つの色を選べるようにする
- ユーザが色を選択するとリアルタイムで背景色に反映
- 初期値は指定なし

### ポイント
- useStateを使った選択項目の状態管理
- セレクトボックスを使った選択肢でのUI制御
- 動的なCSSクラスのへんk

### 完成系
- 初期状態 
![スクリーンショット 2025-05-23 16.43.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/85330ff6-9570-4fea-bd02-9dd527153efb.png)

- 選択状態
![スクリーンショット 2025-05-23 16.44.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/8de8c457-760e-47d5-9d2d-662deae982e4.png)
![スクリーンショット 2025-05-23 16.44.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/7995f67a-8ec6-4cd4-8bbc-83ac00c014d7.png)
![スクリーンショット 2025-05-23 16.44.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/aaee7a86-f016-4c19-b405-bf2b61a374c2.png)

## 解答
```jsx
import React, { useState } from "react";

function ColorPicker() {
  
  const [color, setColor] = useState("");
  const handleColorChange = (e) => {
    setColor(e.target.value);
  };

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-4 font-sans">
      <h1 className="text-2xl font-semibold mb-6 text-gray-800">背景色を選択しよう</h1>
      <label className="mb-2 text-gray-700">カラーを選んでください</label>
      <select
        onChange={handleColorChange}
        className="mb-8 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
      >
        <option value="">カラーを選択してください</option>
        <option value="bg-red-500">赤</option>
        <option value="bg-blue-500">青</option>
        <option value="bg-green-500">緑</option>
      </select>

      <div
        className={`w-[300px] h-[300px] rounded-2xl shadow-lg transition-all duration-500 ease-in-out border border-gray-200 ${
          color || "bg-white"
        }`}
      ></div>
    </div>
  );
}

export default ColorPicker;
```

### 解説
記述の手順
1\. 関数コンポーネントを作成
2\. ユーザーが選んだ色を保存するstateを作成
3\. 色が変更されたときに呼ばれるコールバック関数を作成
4\. UIを作成
5\. `onChange`にイベントハンドラ（`handleColorChange`）を紐づける
6\. 色を反映するボックスに動的なクラスを適用する

以下から順に進めます。

--- 
#### 1\.  関数コンポーネントを作成
```jsx
function ColorPicker() {
```
---
#### 2\. ボタンのクリック状態を管理する`state`を作成
```jsx
 const [color, setColor] = useState("");
```
---
#### 3\. 色が変更されたときに呼ばれるコールバック関数を作成
`event.target.value`で、選ばれた`option`の`value`を取得。
```jsx
  const handleColorChange = (event) => {
    setColor(event.target.value);
  };
```

- `event`の役割
これはイベントオブジェクトで、イベントハンドラが発火すると、Reactは自動的に**変更イベントに関する情報**をこの関数に渡してくれる。
```js
<select onChange={(event) => {
  console.log(event); // ← イベント全体の情報
  console.log(event.target); // ← selectタグのDOM要素
  console.log(event.target.value); // ← 選ばれたoptionのvalue
}}>
```
---
#### 4\. UIを作成(一部)
TailWindを使用してお好みのスタイルに調整
```jsx
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-4 font-sans">
  <h1>背景色を選択しよう</h1>
  <label>カラーを選んでください</label>
</div>
```
---
#### 5\. `<select>`で色を選択できるようにする（UI要素）
`onChange={handleColorChange}` で、選ばれたときにイベントハンドラを実行。
```jsx
<select
  onChange={handleColorChange}
  className="mb-8 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
>
  <option value="">カラーを選択してください</option>
  <option value="bg-red-500">赤</option>
  <option value="bg-blue-500">青</option>
  <option value="bg-green-500">緑</option>
</select>
```
`onChange`にイベントハンドラ（`handleColorChange`）を紐づけている。
ユーザー操作（＝イベント）と関数（＝処理）をつなぐ接点を作る。
```js
onChange={handleColorChange}
```

#### 6\.色を反映するボックスに動的なクラスを適用する（分岐処理）
colorがあるときはそのクラス（例: "bg-red-500"）を適用。
colorが空のとき（まだ何も選んでいない時）は "bg-white" を適用。
```js
<div
  className={`w-[300px] h-[300px] rounded-2xl shadow-lg transition-all duration-500 ease-in-out border border-gray-200 ${
    color || "bg-white"
  }`}
/>
```