読み方：ジェーエスエックス

JSX【JavaScript XML】

JSXとは？

JavaScriptのコード内にHTMLに似た記法でユーザーインターフェースの構造を記述できる拡張構文。主に米メタ（Meta Platforms）社が開発したUIライブラリ「React」で用いられる構文で、現在はReactを用いたWeb開発で標準的に使われている。

通常のJavaScriptでHTML要素を生成するには、「document.createElement」のような関数を使って要素を一つずつ組み立てる必要がある。これは記述が冗長になりやすく、構造が複雑になるほど読みにくくなる。JSXを使うと「<h1>はじめに</h1>」のような記述をJavaScriptの中に直接書けるため、最終的な画面の出力を想像しながらコードを記述でき、他者が書いたコードの把握もしやすくなる。

JSXはWebブラウザがそのまま解釈できる形式ではなく、実行前に「Babel」などのトランスパイラによって通常のJavaScriptコードに変換される。変換後は「React.createElement」という関数の呼び出しに置き換えられる。この変換はビルドツールや開発環境に組み込まれており、開発者が変換過程を意識する必要はない。

HTMLと似た構文を持ちながらも、独自の規則がいくつかある。class属性はJavaScriptの予約語と衝突するため「className」と書く。XMLを基盤とする仕様であるため、「<br>」のような単独タグも「<br />」と閉じる必要がある。波括弧 { } を使うことでJavaScriptの変数や式を埋め込むことができ、条件による表示の切り替えや繰り返し処理もタグの中に直接記述できる。画面の見た目とそれを制御するロジックを一つの場所にまとめて管理できる。

ReactではUIを「コンポーネント」と呼ばれる部品単位で構成する。JSXはこのコンポーネントの見た目を定義するために使われ、自作のコンポーネントも「<MyButton />」のようにHTMLタグと同じ感覚で記述できる。親となる部品の中に別の部品をタグとして入れ子で配置でき、属性として値を渡すことで同じ部品でも内容や表示方法を変えられる。これにより、部品を組み合わせてアプリケーション全体を構成する設計が自然な形で実現する。

JSXはReact専用の仕様ではなく、「Preact」や「SolidJS」など他のライブラリでも採用されている。JavaScriptとHTML（厳密にはXML）の記法を組み合わせた独自の構文であるが、両者の基本的な記法を知っていれば習得のハードルは低く、モダンなWeb フロントエンド開発の現場で広く定着している。