条件付きレンダリング
なぜ学ぶか： 「ログイン済みなら名前、未ログインならボタン」— 画面の出し分けはUIの基本で、AIのコードでは&&と? :で書かれます。知らないと暗号ですが、パターンは2つだけです。
まずはこの例を見てみましょう
// パターン①: 三項演算子 「〜なら A、でなければ B」
{isLoggedIn ? <p>ようこそ</p> : <button>ログイン</button>}
// パターン②: && 「〜なら表示（でなければ何も出さない）」
{cartCount > 0 && <span>カート: {cartCount}件</span>}「? : ＝ 2択」「&& ＝ 出すか出さないか」。出し分けはこの2パターンでほぼ全部です。
JSXの中ではifを直接書けない
代わりに「式」として書けるこの2つで出し分けます。
? :は「〜ならA、でなければB」
例の①は「ログイン済みなら『ようこそ』、でなければログインボタン」。if-elseの1行版です。
&&は「〜なら表示」
例の②は「カートに商品があるときだけ表示」。条件がfalseなら何も出ません。
&&の落とし穴：数値の0
{count && ...}はcountが0のとき、画面に「0」という文字が出てしまいます。例のようにcount > 0 &&と書くのが安全。AIもやる有名なバグです。
ステップ 1 / 3
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。