More than 1 year has passed since last update.

"&&"を使えばJSX内で条件式を簡単に記述することができる

Last updated at 2022-09-24Posted at 2022-09-22

はじめに

ReactでJSX内に条件によって画面に表示させる内容を変えたいと思い、調べた内容を備忘録としてまとめようと思います。

URLのパスが/userかどうかで表示させる内容を変えたいという記事の例です。
if文で実現しようとすると下記のように馴染みのある書き方ができますが、波括弧や括弧が多く個人的には見づらかったです。
他にも

return(
  <>
    {(() => {
      if (location.pathname === (`/user`)) {
        return <p>userのページです</p>
      } 
    })()}
  </>
)

公式ドキュメントの方法に論理演算子"&&"を使う方法が記載されていました。

構文は見当たりませんでしたが、公式ドキュメントを見る限り下記のように記述すれば問題ないと思います。

{ trueになる条件 && trueの時に返す式や値 }

そして、if文と同じ条件を"&&"で書くと、下記のようになります。
波括弧・括弧の数が減って見やすくなりました。

return(
  <>
     {location.pathname === (`/user`) &&
       <p>userのページです</p>
     }
  </>
)

もちろん三項演算子でも書いたり色々と方法がありそうです。
できるだけ可読性が高く、量が少ない記述ができるように実装しながら学んでいこうと思います。