React入門 練習問題 11：JSX：JavaScript式の埋め込み構文
Reactにおいて、JSXの中に通常のJavaScript式を埋め込む際に使う正しい記法はどれか。
- 波括弧 { } で式を囲む
- 角括弧 [ ] で式を囲む
- 二重波括弧 {{ }} を必ず使う
- テンプレートリテラルの `${}` 構文をJSX全体に直接使う
- パーセント記号 % で式を囲む
正解と解説を見る
正解：波括弧 { } で式を囲む
JSXの中でJavaScriptの変数や式を表示したい場合、波括弧 { } で囲むことで評価結果を埋め込むことができます。
【正解の理由】
JSXは基本的にHTMLに似た記法ですが、波括弧の中だけはJavaScript式として評価されます。例えば `<p>{name}</p>` のように書くと、変数nameの値が表示されます。
【不正解の理由】
• 「角括弧 [ ] で式を囲む」：JSXでは配列リテラルの記法であり、式埋め込みの構文ではない
• 「二重波括弧 {{ }} を必ず使う」：二重波括弧はstyle属性などにオブジェクトを渡す際に見られる書き方だが、これは波括弧の中にオブジェクトリテラル{}を書いているだけで、式埋め込み自体は単一の波括弧で行う
• 「テンプレートリテラルの `${}` 構文をJSX全体に直接使う」：`${}` はテンプレートリテラル文字列の中でのみ使える構文であり、JSX自体の埋め込み構文ではない
• 「パーセント記号 % で式を囲む」：JSXにそのような構文は存在しない