React特訓01: クリックされたボタンのテキストを表示しよう 

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

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

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

## 問題
ボタンをクリックすると、選択内容が画面に表示されるようなReactコンポーネントを作成しよう。

### 要件
- ボタンには「A」「B」「C」と表示させる
- ボタンをクリックすると、そのボタンのアルファベットが画面に表示される
- 初期状態は「ボタンを選択してください」 と表示

### ポイント
- useStateによる状態管理
- ボタンを使用したイベントハンドリング
- 状態に応じた条件付きレンダリング

### 完成系
- 初期状態 
![スクリーンショット 2025-05-04 17.10.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/a2c35ec0-048b-4e85-905c-3f49a77ba08b.png)
- Aをクリック
![スクリーンショット 2025-05-04 17.10.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/e12c9f29-f586-4dea-84f7-1cfcfd87ba11.png)
- Bをクリック(マウスホバー状態)
![スクリーンショット 2025-05-04 17.10.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/4eb9ba4e-63d5-44af-9604-2a8e5b98fad2.png)
- Cをクリック
![スクリーンショット 2025-05-04 17.11.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842446/b5828127-1f23-4e70-8132-4fb74419c0cf.png)

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

function AlphabetSelector() {
  const alphabetOptions = ["A", "B", "C"];
  const [selectedAlphabet, setSelectedAlphabet] = useState('');

  return (
    <div className="text-center p-4">
      <p className="text-lg"> {selectedAlphabet ? `選択したボタン：${selectedAlphabet}` : "ボタンを選択してください"}</p>
      <div className="my-3">
        {alphabetOptions.map(option => (
          <button
            key={option}
            className="m-2 px-4 py-2 bg-yellow-500 text-white rounded hover:bg-blue-700"
            onClick={() => setSelectedAlphabet(option)}
          >
            {option}
          </button>
        ))}
      </div>
    </div>
  );
}

export default AlphabetSelector;
```

### 解説
記述の手順
1\. アルファベットを選択する関数コンポーネントを作成
2\. 選択肢のデータを用意
3\. 選択された値を記憶する`state`を作成
4\. UIを作成
5\. 選択された文字の表示ロジックを作成
6\. `map`メソッドでループし3つのボタンを生成
7\. クリックイベントを作成

以下から順に進めます。

--- 
#### 1\. アルファベットを選択する関数コンポーネントを作成
```jsx
function AlphabetSelector() {
```
---
#### 2\. 選択肢のデータを用意
「A」「B」「C」という3つの文字をもつボタンが存在するので、文字列の配列を作成。
```jsx
const alphabetOptions = ["A", "B", "C"];
```
後に`map`メソッドを使用してそれぞれのボタンを動的に表示する。

---
#### 3\. 選択された値を記憶する`state`を作成
最初は何も選択されていないので初期値はからの文字列。
```jsx
const [selectedAlphabet, setSelectedAlphabet] = useState('');
```
---
#### 4\. UIを作成
TailWindを使用してお好みのスタイルに調整
```jsx
 return (
    <div className="text-center p-4">
      <p className="text-lg">{/*初期テキストor選択されたテキスト*/}</p>
      <div className="my-3">
          <button
            className="m-2 px-4 py-2 bg-yellow-500 text-white rounded hover:bg-blue-700"
          >
            {/*ボタンのテキスト*/}
          </button>
        ))}
      </div>
    </div>
  );
```
---
#### 5\. 選択された文字の表示ロジックを作成
`state`を使用してリアルタイムで表示内容を切り替えている。
三項演算子`(条件 ? 真 : 偽)`を使用して条件分岐。
- `selectedAlphabet`が`truthy`ならそれを表示
- `selectedAlphabet`が`falsy`なら「ボタンを選択してください」を表示
```jsx
<p className="text-lg">
    {selectedAlphabet ? `選択したボタン：${selectedAlphabet}` : "ボタンを選択してください"}
</p>
```
---
#### 6\. `map`メソッドでループし3つのボタンを生成
`alphabetOptions`配列に`map`を使用することで一つずつ`option`を取り出してボタンを生成できる。
Reactが要素をそれぞれ識別するために一意なキーが必要。
今回`option`には「A」「B」「C」が順番に入るため一意に識別できるようになる。
```jsx
<div className="my-3">
        {alphabetOptions.map(option => (
          <button
            key={option}
            className="m-2 px-4 py-2 bg-yellow-500 text-white rounded hover:bg-blue-700"
          >
            {option}
          </button>
        ))}
</div>
```
---
#### 7\. クリックイベントを作成
ボタンをクリックしたときに`setSelectedAlphabet(option)`を実行させる。
クリックされた項目を選択状態として更新関数に保存するため、選択を保持できる。
アロー関数を使用しなければ、クリックしていなくても関数処理が実行されエラーにつながる可能性がある。
必ずクリックされた後に関数が実行されるようにするのがアロー関数の役割。
クリックイベントが起きた時に実行される関数→ **コールバック関数** 
```jsx
<button
    key={option}
    className="m-2 px-4 py-2 bg-yellow-500 text-white rounded hover:bg-blue-700"
    onClick={() => setSelectedAlphabet(option)}
>
```