先生と生徒の会話形式で理解しよう

生徒

「Reactでプルダウンみたいな選択欄を作りたいんですが、どうやって選んだ内容を使うんですか？」

先生

「それはセレクトボックスと呼ばれる入力方法ですね。Reactでは選択された内容を状態として管理します。」

生徒

「クリックしたら中身が変わるのに、どうやって覚えているんですか？」

先生

「画面の見た目とは別に、選択結果を保存する仕組みがあるので、順番に見ていきましょう。」

1. セレクトボックスとは何か

セレクトボックスは、クリックすると選択肢が縦に並んで表示される入力欄です。ドロップダウンとも呼ばれ、国の選択や年齢の範囲など、あらかじめ決まった内容から一つを選ばせたいときによく使われます。紙の申込書で、番号に丸を付ける代わりに一覧から一つ選ぶ感覚に近いです。

2. Reactでフォームを扱う基本の考え方

Reactでは、入力された内容を直接読み取るのではなく、状態という仕組みを使って管理します。状態とは、今の選択内容をメモしておく箱のようなものです。セレクトボックスの場合は、「今どの項目が選ばれているか」を文字として保存します。これにより、画面と中身が常に同じ状態になります。

3. useStateを使った基本的な管理方法

ReactではuseStateを使って状態を作ります。難しそうに見えますが、「選択結果を入れる箱を用意する」と考えると簡単です。セレクトボックスが変更されたら、その箱の中身を入れ替えます。


import React, { useState } from "react";

function App() {
  const [fruit, setFruit] = useState("");

  return (
    <div>
      <select onChange={(e) => setFruit(e.target.value)}>
        <option value="">選んでください</option>
        <option value="りんご">りんご</option>
        <option value="みかん">みかん</option>
        <option value="ぶどう">ぶどう</option>
      </select>
    </div>
  );
}

export default App;

（プルダウンから選択できるようになります）

4. 選択した内容を画面に表示する

状態に保存された内容は、文字として画面に表示できます。これは、申込書に書いた内容を横で確認するようなイメージです。選択した結果がすぐに見えるので、利用者にも分かりやすくなります。


import React, { useState } from "react";

function App() {
  const [city, setCity] = useState("");

  return (
    <div>
      <select onChange={(e) => setCity(e.target.value)}>
        <option value="">都市を選択</option>
        <option value="東京">東京</option>
        <option value="大阪">大阪</option>
        <option value="名古屋">名古屋</option>
      </select>
      <p>選択中：{city}</p>
    </div>
  );
}

export default App;

（選んだ都市名が下に表示されます）

5. 初期値を設定して最初から選択する

セレクトボックスは、最初から一つ選ばれた状態にすることもできます。これは、よく使われる選択肢をあらかじめ決めておくような場面です。 useStateの最初の値を設定することで実現できます。


import React, { useState } from "react";

function App() {
  const [job, setJob] = useState("学生");

  return (
    <div>
      <select value={job} onChange={(e) => setJob(e.target.value)}>
        <option value="学生">学生</option>
        <option value="会社員">会社員</option>
        <option value="自営業">自営業</option>
      </select>
    </div>
  );
}

export default App;

（最初から「学生」が選ばれています）