JSX入門 — JavaScriptの中にHTMLが書ける仕組みを理解する

はじめに

Reactのコードを初めて見た時、こんな疑問を持つ人は多いです。

「JavaScriptの中にHTMLが書いてある…これは何？」

function Hello() {
  return <h1>Hello, World!</h1>; // JSの中にHTMLっぽいものがある
}

これが JSX（JavaScript XML）です。この記事ではJSXの仕組みと書き方を整理します。

---

JSXとは何か

JSXはJavaScriptの拡張構文です。HTMLではありません。

ブラウザはJSXを直接解釈できないため、ビルド時に通常のJavaScriptへ変換されます。

// 書いたコード（JSX）
const element = <h1>Hello</h1>;

// 変換後（JavaScript）
const element = React.createElement('h1', null, 'Hello');

React.createElement() を毎回書くのは大変なので、HTMLに近い記法で書けるようにしたのがJSXです。

---

HTMLとJSXの違い

見た目は似ていますが、いくつか違いがあります。

1. 属性名がキャメルケース

// HTML
<div class="box" onclick="handleClick()">

// JSX
<div className="box" onClick={handleClick}>

class → className、onclick → onClick など、JavaScriptの予約語と衝突する名前が変わっています。

2. 閉じタグが必須

// HTML（閉じタグ省略可）
<input type="text">
<br>

// JSX（必ず閉じる）
<input type="text" />
<br />

3. 返せる要素は1つだけ

// NG: 複数の要素をそのまま返せない
return (
  <h1>タイトル</h1>
  <p>本文</p>
);

// OK: 1つの要素で囲む
return (
  <div>
    <h1>タイトル</h1>
    <p>本文</p>
  </div>
);

// OK: Fragmentを使うとdivを増やさずに済む
return (
  <>
    <h1>タイトル</h1>
    <p>本文</p>
  </>
);

---

JSXの中でJavaScriptを使う

{} の中にJavaScriptの式を書けます。

const name = '田中';
const age = 25;

return (
  <div>
    <p>名前: {name}</p>
    <p>年齢: {age}</p>
    <p>来年: {age + 1}歳</p>
  </div>
);

式は書けるが、文は書けないのがポイントです。

// OK: 式（値を返すもの）
{age >= 20 ? '成人' : '未成年'}
{list.map(item => <li>{item}</li>)}
{'hello'.toUpperCase()}

// NG: 文（if文・for文など）
{if (age >= 20) { return '成人' }} // これは書けない

条件分岐には三項演算子や**&&演算子**を使います。

// 三項演算子
<p>{isLoggedIn ? 'ログイン中' : 'ログアウト'}</p>

// &&演算子（条件を満たす時だけ表示）
<p>{isAdmin && '管理者'}</p>

---

スタイルの書き方

// インラインスタイルはオブジェクトで渡す
<div style={{ color: 'red', fontSize: '16px' }}>テキスト</div>

// CSSクラスはclassName
<div className="container">テキスト</div>

インラインスタイルのプロパティ名もキャメルケースです（font-size → fontSize）。

---

コメントの書き方

return (
  <div>
    {/* JSXの中のコメントはこう書く */}
    <p>本文</p>
  </div>
);

// や /* */ はJSXタグの外側でしか使えません。タグの中では {/* */} を使います。

---

まとめ

項目	HTMLとの違い
属性名	class → className、for → htmlFor
イベント	onclick → onClick（キャメルケース）
閉じタグ	全ての要素に必要（<br />など）
ルート要素	1つだけ返す必要あり（Fragmentで回避可）
JS式の埋め込み	{} で囲む
コメント	{/* */}

JSXはHTMLに似ていますが、あくまでJavaScriptです。「HTMLっぽく見えるJavaScript」として捉えると、ルールの理由が理解しやすくなります。

次回はコンポーネントとPropsについて整理します。