Reactで賢く条件分岐！switch文のメリットとデメリット

2024-04-02

Reactコンポーネント内でswitch文を使用する方法

基本的な使い方

まず、switch文を使用したいコンポーネントファイルで、useState Hookを使用して、条件を表す状態変数を定義します。

const [condition, setCondition] = useState(initialValue);

次に、render 関数内で、switch 文を使用して、状態変数の値に基づいて処理を分岐します。

return (
  <div>
    {condition === 'value1' && <Component1 />}
    {condition === 'value2' && <Component2 />}
    {condition === 'value3' && <Component3 />}
  </div>
);

この例では、condition 状態変数の値に基づいて、Component1、Component2、Component3 のいずれかを表示します。

その他の使い方

case 文の代わりに default 文を使用して、どの条件にも一致しない場合の処理を指定することができます。
break 文を使用して、case 文の処理を終了することができます。
複数の条件を同時にチェックしたい場合は、case 文を複数組み合わせることができます。

例

ユーザーの選択に基づいて、異なるコンテンツを表示する
フォーム入力の値に基づいて、異なる処理を実行する
APIレスポンスのステータスコードに基づいて、異なるメッセージを表示する

注意事項

switch文を使用する場合は、すべての条件を網羅するように case 文を記述する必要があります。
デフォルトケース (default) を記述することを忘れないでください。

switch文は、Reactコンポーネント内でさまざまな条件に基づいて処理を分岐するのに便利なツールです。上記の解説を参考に、ぜひあなたのコンポーネントで活用してみてください。

import React, { useState } from 'react';

const App = () => {
  const [language, setLanguage] = useState('ja');

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

  return (
    <div>
      <h1>こんにちは！</h1>
      <select value={language} onChange={handleChange}>
        <option value="ja">日本語</option>
        <option value="en">英語</option>
        <option value="fr">フランス語</option>
      </select>
      <p>
        {language === 'ja' && 'ようこそ！'}
        {language === 'en' && 'Welcome!'}
        {language === 'fr' && 'Bienvenue!'}
      </p>
    </div>
  );
};

export default App;

このコードを実行すると、以下の画面が表示されます。

ユーザーが言語を選択すると、それに応じて挨拶文が変化します。

このサンプルコードを参考に、さまざまな条件に基づいて処理を分岐するコンポーネントを作成してみてください。

Reactコンポーネント内でswitch文を使用する他の方法

if文

最もシンプルな方法です。条件に応じて、異なるJSXを記述します。

if (condition) {
  return (
    <div>
      <h1>条件が真の場合の処理</h1>
    </div>
  );
} else {
  return (
    <div>
      <h1>条件が偽の場合の処理</h1>
    </div>
  );
}

テンプレートリテラル

条件によって異なる文字列を生成したい場合に便利です。

const element = (
  <h1>
    {condition ? '条件が真の場合の文字列' : '条件が偽の場合の文字列'}
  </h1>
);

return <div>{element}</div>;

ternary operator (三項演算子)

const element = condition ? <Component1 /> : <Component2 />;

return <div>{element}</div>;

フック

useState や useReducer などのフックを使用して、状態変数を管理し、条件分岐を実現することができます。

const [condition, setCondition] = useState(initialValue);

return (
  <div>
    {condition === 'value1' && <Component1 />}
    {condition === 'value2' && <Component2 />}
    {condition === 'value3' && <Component3 />}
  </div>
);

ライブラリ

react-switch などのライブラリを使用すると、より簡単にスイッチ文を実装することができます。

import Switch from 'react-switch';

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

  return (
    <div>
      <Switch
        checked={checked}
        onChange={(checked) => setChecked(checked)}
      />
      {checked && <h1>スイッチがオンの場合の処理</h1>}
      {!checked && <h1>スイッチがオフの場合の処理</h1>}
    </div>
  );
};

export default App;