1. チェックボックスとは何かを理解しよう

チェックボックスは、四角い枠をクリックしてオンとオフを切り替える入力方法です。パソコンを触ったことがない人でも、「同意する」「受け取る」などの画面で見たことがあると思います。 Reactでは、このオンかオフの状態をプログラムの中で覚えておく必要があります。これを「状態管理」と呼びます。状態とは、今どうなっているかを記録する箱のようなものです。

2. Reactでフォーム処理をする基本の考え方

Reactのフォーム処理では、入力された内容をそのまま使うのではなく、一度「状態」に保存してから使います。これは、メモ帳に書いてから見返すのと同じです。チェックボックスの場合は、「チェックされているかどうか」を true（はい）かfalse（いいえ）で管理します。この考え方を理解すると、他の入力フォームも簡単になります。

3. useStateを使ってチェック状態を管理する

Reactでは、useStateという仕組みを使って状態を管理します。難しそうな名前ですが、「覚えておくための箱」を作るものだと考えてください。チェックボックスが押されたら、その箱の中身を書き換えます。


import React, { useState } from "react";

function App() {
  const [checked, setChecked] = useState(false);

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={checked}
          onChange={() => setChecked(!checked)}
        />
        利用規約に同意する
      </label>
    </div>
  );
}

export default App;

（チェックボックスを押すたびに、オンとオフが切り替わります）

4. チェック状態を画面に表示してみよう

状態は、画面に文字として表示することもできます。これにより、今チェックされているかが一目でわかります。信号機のランプが光っているか確認するようなイメージです。


import React, { useState } from "react";

function App() {
  const [checked, setChecked] = useState(false);

  return (
    <div>
      <input
        type="checkbox"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
      <p>{checked ? "チェックされています" : "チェックされていません"}</p>
    </div>
  );
}

export default App;

（チェックを入れると文字が変わって表示されます）

5. 複数のチェックボックスを扱う方法

複数のチェックボックスを使う場合は、それぞれの状態を別々に管理します。これは、付箋を何枚も使ってメモするのと同じ考え方です。どれがチェックされたかを、個別に覚えておくことが大切です。


import React, { useState } from "react";

function App() {
  const [apple, setApple] = useState(false);
  const [banana, setBanana] = useState(false);

  return (
    <div>
      <label>
        <input type="checkbox" checked={apple} onChange={() => setApple(!apple)} />
        りんご
      </label>
      <br />
      <label>
        <input type="checkbox" checked={banana} onChange={() => setBanana(!banana)} />
        バナナ
      </label>
    </div>
  );
}

export default App;

（それぞれのチェックボックスが独立して動きます）

6. 配列を使ってまとめて管理する考え方

チェックボックスが増えてきた場合は、配列という仕組みを使います。配列とは、同じ種類のものを並べて入れる箱です。買い物リストを一枚の紙にまとめる感覚で考えると理解しやすくなります。


import React, { useState } from "react";

function App() {
  const [items, setItems] = useState([]);

  const toggleItem = (item) => {
    setItems(
      items.includes(item)
        ? items.filter((i) => i !== item)
        : [...items, item]
    );
  };

  return (
    <div>
      <label>
        <input type="checkbox" onChange={() => toggleItem("りんご")} />
        りんご
      </label>
      <label>
        <input type="checkbox" onChange={() => toggleItem("みかん")} />
        みかん
      </label>
    </div>
  );
}

export default App;

（チェックした項目だけが記録されます）