JSXとは？React特有の書き方を最短で理解する – 5/12

JSXは初心者が最初につまずくポイントです。この記事では「JSXの正体」「よくあるエラー」「必須ルール」に絞って解説し、迷わず書けるようにします。

JSXは何か：見た目はHTML、中身はJavaScript

JSXはJavaScriptの拡張構文で、最終的にはJavaScriptの関数呼び出しに変換されます。とはいえ初心者は「HTMLみたいに書ける」と捉えてOKです。

export default function App() {
  return <h1>Hello React</h1>
}

ポイントは「JSXも結局はJSなので、変数や式を埋め込める」ことです。

JSXの中でJavaScriptの値を表示したいときは {} を使います。

const name = "Taro"
return <p>Hello {name}</p>

注意：{} の中は「文」ではなく「式」です。if文そのものは書けません。条件分岐は三項演算子や && を使います（後半で扱います）。

JSXは返す要素が1つである必要があります。次はNGです。

return (
  <h1>A</h1>
  <p>B</p>
)

回避は次のどちらか。

return (
  <>
    <h1>A</h1>
    <p>B</p>
  </>
)

JSXの属性はJavaScriptと衝突するものがあります。代表例は次です。

<label htmlFor="email">Email</label>
<input id="email" className="input" />

初心者は「classが効かない」問題に遭遇しやすいので、まずここだけ覚えると良いです。