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

はじめに

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

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

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

問題

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

要件

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

ポイント

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

完成系

• 初期状態
  

• 選択状態
  
  
  

解答

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. 関数コンポーネントを作成

function ColorPicker() {

---

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

 const [color, setColor] = useState("");

---

3. 色が変更されたときに呼ばれるコールバック関数を作成

event.target.valueで、選ばれたoptionのvalueを取得。

  const handleColorChange = (event) => {
    setColor(event.target.value);
  };

• eventの役割
  これはイベントオブジェクトで、イベントハンドラが発火すると、Reactは自動的に変更イベントに関する情報をこの関数に渡してくれる。

<select onChange={(event) => {
  console.log(event); // ← イベント全体の情報
  console.log(event.target); // ← selectタグのDOM要素
  console.log(event.target.value); // ← 選ばれたoptionのvalue
}}>

---

4. UIを作成(一部)

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

<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} で、選ばれたときにイベントハンドラを実行。

<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）を紐づけている。
ユーザー操作（＝イベント）と関数（＝処理）をつなぐ接点を作る。

onChange={handleColorChange}

6.色を反映するボックスに動的なクラスを適用する（分岐処理）

colorがあるときはそのクラス（例: "bg-red-500"）を適用。
colorが空のとき（まだ何も選んでいない時）は "bg-white" を適用。

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