三項演算子と&&
if 文ではなく、値を返す条件分岐
三項演算子は、条件によって 2 つの値のどちらかを選ぶ書き方です。
const status = work.published ? "公開中" : "下書き";読み方は「work.published が真なら "公開中"、そうでなければ "下書き"」です。if 文との一番の違いは、これ全体が 1 つの値になることです。だから変数に入れられますし、文字列の中に埋め込めます。
// if 文は値にならないので、いったん変数を用意することになる
let status;
if (work.published) {
status = "公開中";
} else {
status = "下書き";
}&& は「左が真のときだけ右を返す」
&& は条件式でよく見ますが、実際には真偽値ではなく値そのものを返します。
true && "新着"; // "新着"
false && "新着"; // false
0 && "新着"; // 0
"" && "新着"; // ""左が偽ならその左の値を返し、真なら右の値を返します。|| はその逆で、左が真ならその左を返します。
なぜ React でこれが要るのか
JSX の中には if 文が書けないからです。JSX の波かっこに書けるのは値になるものだけなので、条件で表示を変えたいときは三項演算子か && を使います。
<p>{work.published ? "公開中" : "下書き"}</p>
{work.published && <span>公開中</span>}上は「どちらかを出す」、下は「条件を満たすときだけ出す」です。React は false や null や undefined を画面に何も描かない値として扱うので、&& の左が偽のときは何も表示されません。この 2 つが、第6章の条件レンダリングでそのまま出てきます。
&& の有名な落とし穴
&& の左に数値を書くと事故ります。件数が 0 のとき、React は 0 を「描かない値」ではなく数値として扱い、画面に 0 と表示してしまいます。
{works.length && <p>作品があります</p>}作品が 0 件のとき、この式は 0 を返すので、画面に 0 だけが出ます。左を必ず真偽値にすれば防げます。
{works.length > 0 && <p>作品があります</p>}もう 1 つ、文字列を組み立てるときに && を使うと false という文字が混ざります。"公開中" + (isNew && "（新着）") は、新着でないときに "公開中false" になります。文字列をつなぐときは、偽のときに空文字を返す三項演算子を使ってください。JSX の中では &&、文字列の組み立てでは三項演算子、と場所で使い分けます。
演習
作品 1 件の状態を表す短い文言を、条件によって組み立てます。
要件
- published が true なら 公開中、false なら 下書き を先頭に置く
- year が 2026 以上のときだけ、うしろに （新着） を付ける
if文を使わず、三項演算子で書く- 新着でないときは空文字を足す。false という文字が混ざらないようにする
入出力例
toStatusText({"published":true,"year":2026}) → "公開中（新着）"
toStatusText({"published":true,"year":2025}) → "公開中"
toStatusText({"published":false,"year":2026}) → "下書き（新着）"
toStatusText({"published":false,"year":2024}) → "下書き"
toStatusText({"published":true,"year":2027}) → "公開中（新着）"ヒント
