第3回：JSXとは？JavaScriptの中でHTMLを書く不思議なルールの正体

前回：5分で完了！Viteを使った最速React開発環境の構築手順では、ついにあなたのPCでReactを動かしました。

その際、App.jsx の中身を見てこう思いませんでしたか？ 「JavaScriptの中にHTMLが書いてある……これ、エラーにならないの？」

この「HTMLのような見た目をしたJavaScript」こそが、Reactの肝である JSX（JavaScript XML） です。今回は、JSXの仕組みと、初心者が必ずハマる「3つの鉄則」を解説します。

1. JSXは「HTML」ではなく「JavaScript」である
2. JSXの「3つの鉄則」を覚えよう
3. 【実践】JSXのパワーを体験する最小サンプル
1. App.jsx（最小構成版）
4. コードの解説（JavaScript & React）
1. JavaScriptのポイント
2. React（JSX）のポイント
5. なぜ JSX を使うのか？（記憶のコツ）
1. 今回のまとめ
2. 次回予告：UIを「部品」にして再利用する

1. JSXは「HTML」ではなく「JavaScript」である

結論から言うと、JSXはHTMLではありません。最終的にブラウザが理解できる「純粋なJavaScript」へと変換されます。

2026年現在の開発環境（Viteなど）では、あなたが書いたJSXを裏側で高速に変換してくれています。だからこそ、JavaScriptの強力な機能（計算、ループ、条件分岐など）をUIの中に直接組み込めるのです。

2. JSXの「3つの鉄則」を覚えよう

JSXを書くとき、普通のHTMLと同じ感覚で書くとエラーになります。特に重要な3つのルールを抑えましょう。

鉄則①：隣り合う要素は「1つのタグ」で囲む

JSXは、複数の要素をバラバラに返すことができません。必ず大きな1つのタグで包む必要があります。

NG: <h1></h1><p></p> （隣り合っている）
OK: <div> <h1></h1> <p></p> </div> （1つにまとまっている）

※余計な <div> を増やしたくないときは、空のタグ <> ... </>（フラグメント）で囲むのが2026年現在の常識です。

鉄則②：class ではなく className を使う

JavaScriptには class という単語が既に別の意味（クラス定義）で存在します。そのため、HTMLのクラスを指定したいときは className と書くルールになっています。

鉄則③：JavaScriptを書くときは { } で囲む

ここが最大のメリットです。波括弧 { } を使うと、その中では自由にJavaScriptが使えます。

3. 【実践】JSXのパワーを体験する最小サンプル

それでは、JSXのルールを詰め込んだ最小限のコードを書いてみましょう。前回作成した環境の App.jsx を以下に書き換えてください。

App.jsx（最小構成版）

JavaScript

import React from 'react';

export default function App() {
  const name = "React初心者"; // JavaScriptの変数
  const today = new Date().toLocaleDateString(); // 今日の日付を取得

  return (
    <>
      {/* 鉄則①：全体を <> で囲んでいる */}
      {/* 鉄則②：class ではなく className を使う（CSSは未定義でOK） */}
      <h1 className="title">こんにちは、{name}さん！</h1>
      
      {/* 鉄則③：{ } の中でJavaScriptの計算や変数を使っている */}
      <p>今日は {today} です。</p>
      <p>1 + 2 の答えは {1 + 2} です。</p>
      
      <button onClick={() => alert("JSXの学習中！")}>
        クリックしてJavaScriptを実行
      </button>
    </>
  );
}

CodeSandboxで今回のサンプルを動かす

4. コードの解説（JavaScript & React）

JavaScriptのポイント

new Date().toLocaleDateString(): 現在の日付を取得し、人間が読みやすい形式（2026/03/19など）に変換する標準的な命令です。
テンプレートリテラル不要: 通常のJSでは ${variable} と書きますが、JSXのタグ内では {variable} だけでOKです。

React（JSX）のポイント

<></>（Fragment）: ブラウザの実際のHTMLには出力されない「透明な包み紙」です。鉄則①を守りつつ、不要なタグを増やさないための賢い書き方です。
onClick内のアロー関数: onClick={alert(...)} と書くと画面を開いた瞬間に実行されてしまいます。() => alert(...) と書くことで「クリックされた時だけ実行する」という予約になります。