JavaScript XML

Page content

JSX（JavaScript XML）は、一言で言うと**「JavaScriptのコードの中でHTMLのような見た目の記述ができるようにする拡張構文」**のことです。

主にReactというライブラリで使用されており、UIの構造を直感的かつ簡潔に書くために生み出されました。

1. JSXの見た目

通常、JavaScriptでHTML要素を作ろうとすると複雑なコードになりがちですが、JSXを使うとまるでHTMLをそのまま書いているように見えます。

JavaScript

// これがJSXです
const element = <h1>こんにちは、世界！</h1>;

2. なぜJSXを使うのか？

JSXを使わずにReactでUIを作成する場合、React.createElement という関数を何度も呼び出す必要があります。

比較項目 JSXあり JSXなし（純粋なJS）
記述例 <h1>Hello</h1> React.createElement('h1', null, 'Hello')
直感性 高い（HTMLに近い） 低い（ネストが深くなると読みづらい）
生産性 速い 遅い

3. JSXの主な特徴とルール

JSXはHTMLに似ていますが、中身はJavaScriptなのでいくつかの独自ルールがあります。

  • JavaScriptを埋め込める: { }（波括弧）を使うことで、変数や関数を直接記述できます。

    • 例：<h1>{userName}さん、こんにちは！</h1>

  • 一つの親要素で囲む: 複数の要素を並べる場合は、必ず一つの親要素（または空のタグ <> </>）で囲む必要があります。

  • 属性名はキャメルケース: HTMLの class は className、onclick は onClick と書きます。

4. ブラウザがJSXを理解する仕組み

ブラウザはそのままではJSXを理解できません。そのため、**Babel（バベル）**などのコンパイラを使って、実行前に通常のJavaScriptに変換（トランスパイル）されます。

豆知識: 以前はReactをインポートしないとJSXが使えませんでしたが、最近のバージョン（React 17以降）では、自動的に変換されるため、必ずしも import React from 'react' と書く必要はなくなりました。