React入門 練習問題 4：三項演算子の理解と活用
Reactのレンダリングで次のJSXコードがある場合、「?」と「:」の記号は何を表していますか？
```{isLoggedIn ? <UserProfile /> : <LoginButton />}```
- オプショナルチェーン演算子と型注釈
- 三項演算子（条件演算子）
- Nullish合体演算子とオブジェクト分割代入
- JSXの特殊構文
- 論理AND演算子とスプレッド構文
Qraftユーザーの成績：正答率 72%（23/32回正解）
正解と解説を見る
正解：三項演算子（条件演算子）
`{isLoggedIn ? <UserProfile /> : <LoginButton />}`の`?`と`:`は、三項演算子（条件演算子、＝「条件 ? 真の値 : 偽の値」の形で条件分岐を1行で書ける演算子）を構成しています。
【正解の理由】
`isLoggedIn`が`true`なら`<UserProfile />`、`false`なら`<LoginButton />`を返すという、三項演算子そのものの動きをしています。
【不正解の理由】
• オプショナルチェーン演算子と型注釈：オプショナルチェーン（`?.`）はnull/undefinedチェック用、型注釈はTypeScriptの機能で、いずれも今回の構文とは異なる。
• Nullish合体演算子とオブジェクト分割代入：Nullish合体演算子（`??`）はデフォルト値を設定する演算子で、オブジェクト分割代入とも無関係。
• JSXの特殊構文：`?`と`:`はJSX固有の構文ではなく、JavaScript標準の三項演算子。
• 論理AND演算子とスプレッド構文：論理AND（`&&`）は表示/非表示の切り替えに使う別の演算子で、スプレッド構文（`...`）とも無関係。