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との主な違い
| 項目 | HTML | JSX |
|---|---|---|
| クラスの指定 | class | className |
| ラベルの関連付け | for | htmlFor |
| イベントの書き方 | onclick（小文字） | onClick（キャメルケース） |
| 閉じタグ | 省略できるものがある | 必ず閉じる必要がある |
これらの違いは、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が使う仕組みです。
コメント