ReactJSでラジオボタンをマスターして、ユーザーインターフェースをレベルアップしよう！

2024-04-02

ReactJSでラジオボタンを使用する方法

HTMLの <input type="radio"> を使う

最も簡単な方法は、HTMLの <input type="radio"> タグを使う方法です。

<input type="radio" name="gender" value="male" /> 男性
<input type="radio" name="gender" value="female" /> 女性

name 属性は、ラジオボタングループの名前を指定します。同じ名前を持つラジオボタンは、同じグループに属します。value 属性は、選択されたときの値を指定します。

ReactJSでは、これらの属性をJSXで直接記述できます。

<input type="radio" name="gender" value="male" /> 男性
<input type="radio" name="gender" value="female" /> 女性

useState Hookを使って、ラジオボタンの状態を管理できます。

const [gender, setGender] = useState('male');

const handleChange = (event) => {
  setGender(event.target.value);
};

return (
  <div>
    <input type="radio" name="gender" value="male" checked={gender === 'male'} onChange={handleChange} /> 男性
    <input type="radio" name="gender" value="female" checked={gender === 'female'} onChange={handleChange} /> 女性
  </div>
);

useState Hookは、初期値と状態更新関数を返します。gender 変数は、現在の選択状態を保持します。handleChange 関数は、ラジオボタンが選択されたときに呼び出され、gender 変数を更新します。

Material UIなどのライブラリを使うと、スタイルが設定されたラジオボタンを簡単に使用できます。

import { RadioGroup, Radio } from '@material-ui/core';

const handleChange = (event) => {
  // ...
};

return (
  <RadioGroup value={gender} onChange={handleChange}>
    <Radio value="male" label="男性" />
    <Radio value="female" label="女性" />
  </RadioGroup>
);

これらの方法のどれを選択しても、ReactJSでラジオボタンを実装することができます。自分のプロジェクトに合った方法を選択してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Radio Buttons</title>
</head>
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

  <script>
    // 1. HTMLの `<input type="radio">` を使う

    const App1 = () => {
      return (
        <div>
          <input type="radio" name="gender" value="male" /> 男性
          <input type="radio" name="gender" value="female" /> 女性
        </div>
      );
    };

    // 2. `useState` Hookを使う

    const App2 = () => {
      const [gender, setGender] = useState('male');

      const handleChange = (event) => {
        setGender(event.target.value);
      };

      return (
        <div>
          <input type="radio" name="gender" value="male" checked={gender === 'male'} onChange={handleChange} /> 男性
          <input type="radio" name="gender" value="female" checked={gender === 'female'} onChange={handleChange} /> 女性
        </div>
      );
    };

    // 3. Material UIなどのライブラリを使う

    const App3 = () => {
      import { RadioGroup, Radio } from '@material-ui/core';

      const [gender, setGender] = useState('male');

      const handleChange = (event) => {
        setGender(event.target.value);
      };

      return (
        <RadioGroup value={gender} onChange={handleChange}>
          <Radio value="male" label="男性" />
          <Radio value="female" label="女性" />
        </RadioGroup>
      );
    };

    ReactDOM.render(<App1 />, document.getElementById('root'));
  </script>
</body>
</html>

このコードをブラウザで開くと、3つのラジオボタンが表示されます。

2番目のラジオボタンは、useState Hookを使って実装されています。

実行方法

このコードを実行するには、次の手順が必要です。

Node.jsをインストールします。
プロジェクトフォルダを作成し、そこに以下のファイルを作成します。
- index.html
- app.js
app.js に上記のコードを記述します。
以下のコマンドを実行して、プロジェクトをインストールします。

npm install

以下のコマンドを実行して、サーバーを起動します。

npm start

ブラウザで http://localhost:3000 を開きます。

応用

上記のコードは基本的な例です。実際のプロジェクトでは、以下のような応用が考えられます。

ラジオボタンの値に基づいて、異なるコンテンツを表示する。
ラジオボタンの値をフォームデータとして送信する。
ラジオボタンを無効化または有効化する。

ReactJSでラジオボタンを使用するには、いくつかの方法があります。自分のプロジェクトに合った方法を選択してください。

ReactJSでラジオボタンを使用するその他の方法

const [gender, setGender] = useState('male');

const radioRef = useRef();

const handleChange = (event) => {
  setGender(event.target.value);
};

return (
  <div>
    <input type="radio" name="gender" value="male" ref={radioRef} checked={gender === 'male'} onChange={handleChange} /> 男性
    <input type="radio" name="gender" value="female" checked={gender === 'female'} onChange={handleChange} /> 女性
  </div>
);

radioRef.current を使って、ラジオボタンのDOM要素にアクセスできます。

カスタムコンポーネントを使う

ラジオボタンを再利用したい場合は、カスタムコンポーネントを作成できます。

const Radio = ({ label, value, checked, onChange }) => {
  return (
    <div>
      <input type="radio" name="gender" value={value} checked={checked} onChange={onChange} />
      <label for={value}>{label}</label>
    </div>
  );
};

const App = () => {
  const [gender, setGender] = useState('male');

  const handleChange = (event) => {
    setGender(event.target.value);
  };

  return (
    <div>
      <Radio label="男性" value="male" checked={gender === 'male'} onChange={handleChange} />
      <Radio label="女性" value="female" checked={gender === 'female'} onChange={handleChange} />
    </div>
  );
};

第三者ライブラリを使う

React-Radio-Buttonsなどの第三者ライブラリを使うと、簡単にラジオボタンを実装できます。

import ReactRadioButtons from 'react-radio-buttons';

const App = () => {
  const [gender, setGender] = useState('male');

  const handleChange = (event) => {
    setGender(event.target.value);
  };

  return (
    <div>
      <ReactRadioButtons
        options={[
          { value: 'male', label: '男性' },
          { value: 'female', label: '女性' },
        ]}
        value={gender}
        onChange={handleChange}
      />
    </div>
  );
};