Reactでは三項演算子をよく使う

2024年05月10日

三項演算子とは

if...else を1行で書ける便利な記法。

if...elseで書いた場合

const age = 20;

// if...elseで書いた場合
let message;
if (age >= 20) {
  message = "大人です";
} else {
  message = "未成年です"
}

これを、三項演算子で書いた場合

const age = 20;

const message = age >= 20 ? "大人です" : "未成年です";

三項演算子の注意点としては、ネストが深くなると読みづらくなる。

const score = 85;
const grade =
  score >= 90 ? "A" :
  score >= 70 ? "B" :
  score >= 50 ? "C" : "D";

ReactのUI切り替えでよく使用する。

{isLoggedIn ? <Dashboard /> : <Login />}