はじめに

Reactでコードを書いていると、わからないことが溢れ出てくるので色々調べたり参考にすることが多いです。
その中で三項演算子を使用する場面が多いなぁと思ったので、ちゃんと理解して使うためにも言語化したことを備忘録として残したいと思います。

三項演算子とは

最初に記述する条件式の結果によって、実行する式が変わる演算子です。
真の際は左辺が実行され、偽の際は右辺が実行されます。

下記が構文です。
初めてみた時、構文を知らなかったから"?"と":"が怖かった。。

条件式 ? 真の時の式 : 偽の時の式

ifの代替としてよく使われるのですが、やっぱり1行でスマートにまとめられるのはとても便利だなぁと書いていて感じます。

公式ドキュメントの例がシンプルでわかりやすかったので引用させていただきます。
（mdnが公式ドキュメントだと思ってるんですが、間違ってたらご指摘いただけると嬉しいです。）

const beverage = (age >= 21) ? "ビール" : "ジュース";
//=>ageが21以下だった場合は偽なのでジュースが返ってくる
//=>ageが21以下だった場合は真なのでビールが返ってくる

ifがelse ifで繋げるのと同じで、下記のように三項演算子は繋げられるようです。

条件式1 ? 真の時の値
  :条件式2(条件式1が偽の時) ? 条件式2が真の時の値
  :条件式3(条件式2が偽の時) ? 条件式3が真の時の値
  :条件式3(条件式4が偽の時) ? 条件式4が真の時の値
  :条件式4が偽の値

連鎖をさせられるのは知らなかった。。

調べてみたらreactではなくてjsの機能でした。
やっぱりjsの基礎がめっちゃ大事なんだなぁと改めて感じました。
並行で勉強していこうと思います。