JSX（JavaScript XML）

JSX（JavaScript XML）とは、JavaScriptのコードの中にHTMLのようなタグを直接書けるようにする記法のことです。Reactとともに広まったもので、画面の見た目とその動きを1か所にまとめて記述できます。

現実世界に例えると、JSXは設計図に完成イメージのスケッチを直接描き込む書き方のようなものです。図面（プログラム）と外観図（画面の構造）を別々の紙に分けず同じ場所にまとめることで、どの処理がどの見た目に対応するのかがひと目で分かります。

JSXの書き方

JavaScriptの中に、HTMLに似たタグをそのまま書きます。たとえば const el = <h1>こんにちは</h1>; のように、変数へタグを代入できます。タグの中で波かっこを使えば <h1>{name}さん</h1> のように変数や計算結果を埋め込めるのが大きな利点です。

ブラウザはJSXをそのまま読めない

JSXはJavaScriptの正式な文法ではないため、ブラウザはJSXをそのまま実行できません。Babelなどのツールが、JSXを通常のJavaScriptへ変換（トランスパイル）したうえで配信されます。変換後は関数呼び出しの形になり、その戻り値をもとに画面が組み立てられます。

HTMLとの主な違い

これらの違いは、JSXが最終的にJavaScriptへ変換されることに由来します。classやforはJavaScriptの予約語と重なるため、別の名前が割り当てられているのです。

JSXを使う利点

• 見た目と処理をまとめられる
  部品ごとに、画面の構造とその動きを1か所に書けます。
• 構造が読み取りやすい
  完成する画面の形が、コードを見ただけで想像しやすくなります。
• 記述ミスに気づきやすい
  変換の段階で、タグの閉じ忘れなどが検出されます。
• 部品を組み合わせやすい
  自作した部品をタグと同じ形で呼び出せます。

いくつかの決まり

JSXでは、返せるタグは常に1つの親要素にまとめる必要があります。複数の要素を並べたい場合は、囲むためのタグを置くか、余分な要素を作らない書き方を使います。また、繰り返しで要素を並べるときは、どの要素がどれなのかを区別するための目印を付けます。

利用時の注意点

JSXは便利ですが、変換の仕組みが必要なため、ビルド環境の用意が前提となります。素のHTMLファイルにそのまま書いて動かすことはできません。なおJSXはReact専用ではなく他のライブラリでも採用されており、逆にReactでもJSXを使わずに書くことは可能です。ただし記述量が大きく増えるため、実務ではJSXを使うのが一般的です。

あわせて知っておきたい用語

• React：
  画面部品を組み合わせてUIを作るJavaScriptライブラリで、JSXとともに使われます。
• JavaScript：
  Webページに動きを与えるプログラミング言語です。
• HTML：
  Webページの構造を記述する言語。JSXはこれに似た見た目の記法です。
• DOM：
  ブラウザがページの構造を扱うための仕組みです。
• 仮想DOM：
  変更箇所だけを効率よく反映するための、Reactが使う仕組みです。