reactの条件分岐、よく使う演算子三つ

導入

reactの現場でよく使う演算子を三つまとめました。

この三つを使い分ければ、現場でもシンプルかつ柔軟な実装ができると思います。

①論理演算子

一つ目は論理演算子です。
論理演算子は、elseがない条件文で使われます。

const sample =["apple",null,"orange"]

<div className="App">
    {sample.map((fruits)=> (
  fruits === 'apple' && fruits))}

// 結果：apple

上記例ではsample配列をmapで回し、
中身が'apple'の場合だけ、値を表示させています。

単純にifのみの条件文で済む場合なら、論理演算子を使うことでシンプルに記述することができます。

②三項演算子

次に紹介するのは三項演算子です。
三項演算子は、false条件を記述したい場合に仕様します。

const sample =["apple",null,"orange"]
{sample.map((fluits) => {
   return ( 
      <>
       {fluits === 'apple' ? fluits : fluits === 'orange' ? fluits : 'nullです'}
       <br/>
      </>
  }

//結果：apple
       nullです
　　　　orange

fluitesが'apple'の場合に、fluitesを表示
fluitesが'orange'の場合に、fluitesを表示
それ以外の場合は、文字列を返却しています。

単純なif文よりもシンプルに記述できます。

③null合体演算子

最後に紹介するのはnull合体演算子です。
配列や変数にnullが入っている場合にシンプルに記述ができます。

const sample =["apple",null,"orange"]
{sample.map((fluits)=>{
   return (
     <>
       {fluits ?? 'nullです'} 
        <br/>
     </>   )
 })}

//結果：apple
       nullです
　　　　orange

fluiteに値が入っていれば左辺を返し、
nullかundefinedが入っていれば右辺を返します。

nullの際の分岐を表現したい場合には、かなりシンプルに記述できます。

まとめ

今回は現場でもよく使用するえreactの条件分岐でよく使う演算子についてまとめました。

使いこなせれば、可読性が高くシンプルな記述ができるのでおすすめです。