出し分け(三項)｜基礎を学ぶ

2択のときは三項演算子

前のレッスンの && は「出すか、出さないか」でした。今回は「公開中」か「非公開」か、どちらかを必ず出す2択です。この形は三項演算子で書きます。

<span>{work.published ? "公開中" : "非公開"}</span>

条件 ? 真のときの値 : 偽のときの値 で、結果は必ずどちらか1つの値になります。式なので JSX の波かっこにそのまま置けます。

三項演算子が返せるのは文字列だけではありません。JSX を返せば、見た目ごと切り替わります。

{work.published
  ? <a href={work.url}>作品を見る</a>
  : <p>準備中です</p>}

出し分けたいのが中身ではなく class 名のこともあります。className の中身も式なので、同じ書き方が通ります。

<span className={work.published ? "label-public" : "label-private"}>
  {work.published ? "公開中" : "非公開"}
</span>

これで文字と見た目の両方が状態に合わせて変わります。CSS 側で .label-public を緑、.label-private を灰色にしておけば、コンポーネントのほうは何も足さずに色が付きます。

三項演算子を入れ子にすると、とたんに読めなくなります。

{a ? "A" : b ? "B" : "C"}

2段までなら我慢できますが、3段を超えたら三項演算子をやめる合図です。return の前に普通の if 文で変数を組み立て、JSX では変数を出すほうが読みやすくなります。JSX の中で if が書けないだけで、コンポーネントの本体では自由に if を書けます。

もう1つ、&& と三項演算子の使い分けも覚えておきます。片方のときだけ出すなら &&、どちらかを必ず出すなら三項演算子です。条件 ? <Badge /> : null と書けなくはありませんが、それは && で書くほうが短く読めます。

作品カードに、公開中と非公開のラベルを出し分けて付けます。