条件レンダリング(&&)

出すか出さないかだけを決めたい

作品一覧に「NEW」バッジを付けたいとします。新しい作品にはバッジを出し、それ以外には何も出しません。「A か B を出す」ではなく「出すか、出さないか」の1択です。この形は && で書きます。

左が真なら右の JSX が画面に出て、偽なら何も出ません。

なぜこれで消えるのか

JavaScript の && は「左が偽ならその左の値を返し、真なら右の値を返す」演算子です。第2章で確かめたとおりです。

つまり条件が偽のとき、JSX の波かっこの中には false が入ります。React は false と null と undefined を「何も描かないもの」として扱うので、画面には何も出ません。バッジを消すために if で分岐する必要はありません。

数値の 0 に注意

&& で一番よくはまるのが、左に数値を置いたときです。

作品が0件のとき works.length は 0 です。0 は偽なので右は評価されませんが、&& が返すのは false ではなく 0 そのものです。React は数値の 0 を描いてしまうので、画面に 0 という文字がぽつんと残ります。

防ぐには、左を必ず真偽値にします。

> を使った時点で結果は true か false になり、この事故は起きません。空文字列も同じ理由で危ないので、&& の左には比較を書く習慣にしておくと安全です。

つまずきどころ

&& は式なので、JSX の波かっこの中にそのまま書けます。逆に if (...) { ... } は文なので波かっこの中には書けません。条件が複雑で && に収まらないときは、return の前で変数に JSX を入れておき、波かっこではその変数を出します。

演習

作品カードに、2026年の作品だけ NEW バッジを出します。