JSX

JSX とは

JSX (JavaScript XML) は、React で UI を宣言的に記述するための JavaScript の構文拡張である。HTML に似た記法でコンポーネントを記述し、トランスパイラが React.createElement() の呼び出しに変換する。2013 年に React とともに Facebook が発表した。

JSX のトランスパイル

// JSX (開発者が書くコード)
const element = <Button onClick={handleClick} variant="primary">Click me</Button>;

// トランスパイル後 (React 17+ の新しい JSX Transform)
import { jsx as _jsx } from "react/jsx-runtime";
const element = _jsx(Button, { onClick: handleClick, variant: "primary", children: "Click me" });

JSX はシンタックスシュガーであり、最終的には関数呼び出しに変換される。

JSX の基本ルール

// 1. 式の埋め込み: {} 内に JavaScript 式を記述
<h1>{user.name}</h1>
<p>{isLoggedIn ? 'Welcome' : 'Please login'}</p>

// 2. className (class ではない)
<div className="container">...</div>

// 3. 単一のルート要素 (Fragment で囲む)
<>
  <h1>Title</h1>
  <p>Content</p>
</>

// 4. 自己閉じタグ
<img src="photo.jpg" alt="Photo" />
<Input type="text" />

// 5. 配列のレンダリング (key が必須)
{items.map(item => <li key={item.id}>{item.name}</li>)}

TSX (TypeScript + JSX)

TypeScript で JSX を使う場合、ファイル拡張子は .tsx にする。props の型チェックが効く。

interface ButtonProps {
  variant: 'primary' | 'secondary';
  onClick: () => void;
  children: React.ReactNode;
}

function Button({ variant, onClick, children }: ButtonProps) {
  return (
    <button className={`btn btn-${variant}`} onClick={onClick}>
      {children}
    </button>
  );
}

// ✅ 型チェックが効く
<Button variant="primary" onClick={handleClick}>Click</Button>
// ❌ コンパイルエラー: variant に "danger" は許可されていない
<Button variant="danger" onClick={handleClick}>Click</Button>

JSX と XSS

React は JSX 内の値を自動的にエスケープするため、XSS に対して安全だ。

const userInput = '<script>alert("XSS")</script>';
<p>{userInput}</p>
// 出力: <p>&lt;script&gt;alert("XSS")&lt;/script&gt;</p>
// スクリプトは実行されない

dangerouslySetInnerHTML を使うと自動エスケープが無効になるため、使用時はサニタイズが必須だ。

JSX なしの React

JSX は必須ではない。React.createElement を直接呼び出すこともできるが、可読性が大幅に低下する。

// JSX なし (冗長)
React.createElement('div', { className: 'card' },
  React.createElement('h2', null, title),
  React.createElement('p', null, description)
);

// JSX あり (簡潔)
<div className="card">
  <h2>{title}</h2>
  <p>{description}</p>
</div>

JSX vs テンプレートエンジン

観点	JSX	テンプレート (EJS, Handlebars)
言語	JavaScript の拡張	独自構文
型安全性	✅ TypeScript で検証	❌
ロジック	JS の全機能が使える	制限された構文
ツール	IDE の補完が効く	限定的
用途	React, SPA	サーバーサイドレンダリング

体系的に学ぶなら関連書籍を参照してほしい。