React JSX 入門

Volardev 編集部 April 28, 2026

1. JSX とは？

JSX は JavaScript XML の略称です。
JSX を使用すると、React の中で HTML を記述できるようになります。
これにより、React における HTML の記述と追加が非常に容易になります。

2. JSX のコーディング

JSX を使用すると、createElement() や appendChild() といったメソッドを使わずに、JavaScript 内に HTML 要素を記述して DOM に配置できます。
JSX は HTML タグを React エレメント（React Elements）へと変換します。

JSX の使用は必須ではありませんが、React アプリケーションを開発する上でコードの記述が圧倒的に楽になります。

以下の 2 つの例を比較してみましょう。最初の例は JSX を使用しており、2 番目の例は使用していません。

2.1 JSX を使用した例

// main.jsx
const myElement = <h1>JSX が大好きです！</h1>;

createRoot(document.getElementById('root')).render(
  myElement
);

2.2 JSX を使用しない例

// main.jsx
const myElement = React.createElement('h1', {}, 'JSX は使っていません！');

createRoot(document.getElementById('root')).render(
  myElement
);

最初の例で見たように、JSX を使うことで JavaScript コード内に HTML を直接記述できます。
JSX は ES6 に基づく JavaScript 言語の拡張であり、実行時に通常の JavaScript に変換（コンパイル）されます。

3. JSX における式 (Expressions)

JSX では、波括弧 { } を使うことで JavaScript の式（Expressions）を記述できます。
この式には、React の変数、プロパティ、あるいはその他の有効な JavaScript 式を含めることが可能です。JSX はその式を実行し、結果を返します。

3.1 式 `5 + 5` を実行する例

// main.jsx
const myElement = <h1>React は JSX を使うことで {5 + 5} 倍良くなります</h1>;

4. 大規模な HTML ブロックの挿入

HTML を複数行にわたって記述する場合は、全体を丸括弧 ( ) で囲みます。

4.1 3 つの項目を持つリストの作成

// main.jsx
const myElement = (
  <ul>
    <li>リンゴ</li>
    <li>バナナ</li>
    <li>チェリー</li>
  </ul>
);

5. トップレベル要素は 1 つだけ

JSX のコードは、必ず単一のトップレベル要素でラップ（包囲）されていなければなりません。
例えば、2 つの段落（pタグ）を書きたい場合は、それらを div 要素などの親要素の中に配置する必要があります。

5.1 2 つの段落を 1 つの DIV でラップする

// main.jsx
const myElement = (
  <div>
    <p>私は段落です。</p>
    <p>私も段落です。</p>
  </div>
);

HTML が正しくない場合や、親要素が欠けている場合、JSX はエラーをスローします。

また、代替案として フラグメント（Fragment） を使用して複数行をラップすることもできます。これにより、DOM に余分なノード（divなど）を追加することを防げます。
フラグメントは空の HTML タグ <></> のような形をしています。

5.2 フラグメントでラップする例

// main.jsx
const myElement = (
  <>
    <p>私は段落です。</p>
    <p>私も段落です。</p>
  </>
);

6. 要素は必ず閉じる

JSX は XML のルールに従うため、HTML 要素は適切に閉じられている必要があります。

6.1 空の要素を `/>` で閉じる例

// main.jsx
const myElement = <input type="text" />;

HTML が適切に閉じられていない場合、JSX はエラーをスローします。

7. 属性：class ではなく className

class 属性は HTML でよく使われますが、JSX は最終的に JavaScript としてレンダリングされます。JavaScript において class キーワードは予約語（Reserved word）であるため、JSX 内で使用することはできません。

代わりに className 属性を使用します。
JSX がレンダリングされる際、className 属性は自動的に HTML の class 属性へと変換されます。

7.1 JSX で className を使用する例

// main.jsx
const myElement = <h1 className="myclass">ハローワールド</h1>;

8. JSX 内のコメント

JSX 内のコメントは、{/* */} という構文で記述します。

8.1 JSX でのコメント例

// main.jsx
const myElement = <h1>こんにちは {/* 素晴らしい */} 世界 </h1>;

9. React コンポーネントにおける JSX

React は UI を構築するためにコンポーネントを使用します。コンポーネントは独立し、再利用可能なコードの断片です。
React コンポーネントは JavaScript の関数のようであり、最終的に HTML（JSX）を返します。JSX は React コンポーネント内で完璧に動作します。

9.1 コンポーネント内での JSX 使用例

// main.jsx
function Car() {
  return (
    <>
      <h2>私の車</h2>
      <p>車種はフォード・マスタングです。</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Car />
);

コンポーネント内では、HTML を返す前に他の操作（ロジックの処理など）を行うことも可能です。

9.2 ロジックを含むコンポーネントの例

// main.jsx
function Car() {
  const brand = "フォード";
  const model = "マスタング";
  return (
    <>
      <h2>私の車</h2>
      <p>これは {brand} の {model} です。</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Car />
);