React コンポーネントでの Switch ステートメントの使用

1. React（JSX）で switch を使用する方法
2. React の switch() の代替
3. まとめ

switch ステートメントは、JavaScript の最も便利な機能の 1つです。

条件を設定し、それらの条件が満たされているかどうかに応じて特定の値を返すのに最適です。React では、switch ステートメントは条件付きレンダリングを処理するための最良の方法の 1つです。

たとえば、ユーザーの入力に基づいて特定のコンポーネントをレンダリングしたい場合があります。input フィールドの値を状態に保存し、状態の値を調べて、レンダリングする適切なコンポーネントを決定できます。

ほとんどの React 開発者は、JSX を使用してコンポーネントを定義し、それらを呼び出します。一見したところ、JSX は HTML によく似ているため、必要に応じて読みやすく、変更を加えることができます。

また、JSX コード内で JavaScript 式を使用することもできます。ただし、そのサポートは JavaScript 式に限定されており、for や switch などのステートメントには拡張されません。

ステートメントと式の違いについて詳しくは、このガイドをお読みください。

この記事では、JSX 内で switch()（またはその有効な代替品）を使用する複数の方法について説明します。

React（JSX）で switch を使用する方法

JSX は、.createElement() 関数を使用せずにコンポーネントと UI 要素を作成できる React 構文です。また、HTML にはない多くの追加機能があります。

たとえば、JSX 内で通常の JavaScript コードを記述できます。あなたがしなければならないのは、中括弧の間に表現を入れることだけです。

例を見てみましょう：

class App extends Component {
  render() {
    return <h1>Two plus two is {2+2}</h1>;
  }
}

ここに、単一の見出し要素を返すコンポーネントがあります。

playcode でわかるように、2+2 は 2つの中括弧の間に配置されているため、有効な JavaScript 式として扱われます。これは、魅力的な機能の簡単なデモンストレーションです。

React アプリケーションを開発するときは、JSX 構造にあまり多くのロジックを入れないようにすることをお勧めします。これは、コードが乱雑にならないようにするために必要です。

代わりに、return ステートメントの外部で関数または変数を定義し、JSX コードでそれを参照できます。

開発者は、JSX で直接 switch ステートメントを書くことはできません。第一に、それは長すぎるでしょう、そしてもっと重要なことに、ステートメントは JSX 内でサポートされていません。

Return ステートメントの外の switch

おそらく最も最適な解決策は、return ステートメントから switch() を完全に取り除くことです。次に、制限なしで標準の JavaScript を使用し、switch ステートメントを含む関数を参照できます。

例を見てみましょう：

class App extends Component {
  render() {
    const functionWithSwitch = (parameter) => {
      switch(parameter){
        case "positive":
          return "+"
        case "negative": 
          return "-"
        default:
          return "neutral"
      }
    }
    return <h1>{functionWithSwitch("positive")}</h1>;
  }
}

この例では、switch ステートメントを含み、パラメーター値に基づいて 3つの異なる値を返す単純な functionWithSwitch() 関数があります。これらすべてを JSX 内で定義する代わりに、個別に定義し、関数を参照して、目的の値に渡します。

インラインの switch

先ほど、JSX 内で switch を直接使用することは不可能であると述べましたが、そのルールを回避する方法はいくつかあります。

一部の人々にとって、インラインソリューションは、何が起こっているのかを読み、理解するのが簡単です。関数定義に注意を向けたり、何が起こっているのかを理解するために呼び出す必要はありません。

技術的には、このソリューションはスイッチではありませんが、まったく同じように機能します。例を見てみましょう：

class App extends Component {
  render() {
    return <h1>
          {
        	{
          'positive': '+',
          'negative': '-'
        	}[param]
      	  }   
      </h1>;
  }
}

ここでは、プレーンな JavaScript オブジェクトを使用して、条件付きで文字列をレンダリングします。この場合、2つの値を持つ 2つのプロパティがあります。最終的には、param として参照するプロパティの値を取得します。

このアプローチでデフォルトのケースを設定するには、論理 OR（||）演算子を使用する必要があります。

自己起動型の関数

必要に応じて、すべての switch 関連のコードを関数に入れて、JSX 内で自動的に呼び出すこともできます。これは少し長い解決策ですが、場合によっては必要になることがあります。

例を見てみましょう：

class App extends Component {
  render() {
    return <h1>{( () => {
      switch(parameter){
        case "positive":
          return "+"
        case "negative": 
          return "-"
        default:
          return "neutral"
      }
    })()}</h1>;
  }
}

前の関数の例を取り、すぐにそれを呼び出して値を返しました。繰り返しになりますが、JSX 内で switch ステートメントを使用するためのより良い方法がありますが、これは依然として優れたソリューションです。

カスタム要素 Switch

React の人気は、主にその再利用可能なコンポーネントに起因する可能性があります。

カスタムの Switch コンポーネントを作成すると、複雑なインラインロジックを作成する手間が省けます。また、関数の機能を理解するために前後にジャンプする必要はありません。

カスタム <Switch /> コンポーネントは、その値に応じてプロップを取ります。Switch コンポーネントの開始タグと終了タグの間に配置された子コンポーネントの 1つをレンダリングします。

例を見てみましょう：

let SwitchComponent = props => {
    const {condition, childrenElements} = props
    return childrenElements.find(element => {
        return element.props.value === condition
    })
}

<Switch> コンポーネントを呼び出して、親コンポーネントにカスタム値を持つ子を追加できます。これは、switch ステートメントでさまざまな cases を記述する方法と似ています。

前に書いた switch ステートメントに基づいて、1つの例を見てみましょう。

<Switch test="positive">
<p value={"positive"}>+</p>
<p value={"negative"}>-</p>
</Switch>

この場合、test prop の値のため、Switch コンポーネントは、positive 値を持つ段落要素のみをレンダリングします。

React の switch() の代替

React 開発者は、条件を受け取り、条件に基づいてコンポーネントのいずれかを返す単純な条件付きロジックに三項演算子を使用することがよくあります。三項演算子は、JSX 内の中括弧の間に直接書き込むことができます。シンプルで読みやすく、便利です。

この例を見て、三項演算子を使用して同じ条件を記述しましょう。

<h1>{condition === "positive" ? "+" : "-"}</h1>

これは比較的単純な解決策です。もちろん、それには制限があり、より複雑なロジックでは機能しません。

まとめ

この記事では、コンポーネントを条件付きでレンダリングするためのさまざまな方法について説明しました。これらのソリューションはすべて有効なオプションであり、最終的には自分自身またはチームの好みに応じて選択する必要があります。