条件表示 出したり、消したり

いいねが0件のときは「まだいいねがありません」、1件以上なら件数を表示——状況によって画面の中身を変えたい場面は、アプリなら必ず出てきます。stateで「状況」は持てるようになりました。この章では、それを表示の分岐に繋ぎます。

窓には「文」が入らない

どうやって表示するか、しないかのコードをReactで実装しようかと思う時、素直に考えると、if文を窓に入れたくなります。

return <p>{if (count > 0) { ... }}</p>;  // × エラー

これは書けません。チャプター8で「{ } の窓には値になる式が入る」と言いました。実はあれは「入るもの」の定義であると同時に「入らないもの」の宣言でもありました——if文は文であって、値にならないので、窓に入れません。

では条件で表示を変えたいときはどうするか。道具は2つです。

道具①　三項演算子——「もし〜なら A、でなければ B」

const LikeStatus = ({ count }: { count: number }) => {
  return <p>{count > 0 ? `いいね ${count}件` : "まだいいねがありません"}</p>;
};

条件 ? Aの値 : Bの値 ——これが三項演算子です。読み方は「条件が正しいならA、違うならB」。if文と違って、全体がひとつの値になるので窓に入れられます。「?」が「もし」、「:」が「でなければ」と読んでください。

値の部分にはタグも書けます。

{isLoggedIn ? <p>ようこそ</p> : <p>ログインしてください</p>}

道具②　&&——「〜のときだけ出す」

「条件を満たすときだけ表示、満たさないときは何も出さない」という場面には、専用の短縮形があります。