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

はじめに

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

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

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

問題

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

要件

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

ポイント

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

完成系

• 初期状態
  
• Aをクリック
  
• Bをクリック(マウスホバー状態)
  
• Cをクリック
  

解答

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. アルファベットを選択する関数コンポーネントを作成

function AlphabetSelector() {

---

2. 選択肢のデータを用意

「A」「B」「C」という3つの文字をもつボタンが存在するので、文字列の配列を作成。

const alphabetOptions = ["A", "B", "C"];

後にmapメソッドを使用してそれぞれのボタンを動的に表示する。

---

3. 選択された値を記憶するstateを作成

最初は何も選択されていないので初期値はからの文字列。

const [selectedAlphabet, setSelectedAlphabet] = useState('');

---

4. UIを作成

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

 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なら「ボタンを選択してください」を表示

<p className="text-lg">
    {selectedAlphabet ? `選択したボタン：${selectedAlphabet}` : "ボタンを選択してください"}
</p>

---

6. mapメソッドでループし3つのボタンを生成

alphabetOptions配列にmapを使用することで一つずつoptionを取り出してボタンを生成できる。
Reactが要素をそれぞれ識別するために一意なキーが必要。
今回optionには「A」「B」「C」が順番に入るため一意に識別できるようになる。

<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)を実行させる。
クリックされた項目を選択状態として更新関数に保存するため、選択を保持できる。
アロー関数を使用しなければ、クリックしていなくても関数処理が実行されエラーにつながる可能性がある。
必ずクリックされた後に関数が実行されるようにするのがアロー関数の役割。
クリックイベントが起きた時に実行される関数→ コールバック関数

<button
    key={option}
    className="m-2 px-4 py-2 bg-yellow-500 text-white rounded hover:bg-blue-700"
    onClick={() => setSelectedAlphabet(option)}
>