先生と生徒の会話形式で理解しよう

生徒

「先生、Reactのサンプルコードを見たらJavaScriptの中にHTMLみたいなものが書かれていてびっくりしました。あれは何ですか？」

先生

「それはJSXと呼ばれる仕組みです。JavaScriptの中にHTMLのような構文を埋め込めるようにしたものなんですよ。」

生徒

「なるほど！でもどうしてそんな書き方が必要なんですか？」

先生

「それは、Reactで画面を作るときに便利だからです。詳しく仕組みやメリットを見ていきましょう！」

1. JSXとは何か？

JSXとは「JavaScript XML」の略で、JavaScriptの中にHTMLのようなタグを書ける仕組みです。通常のJavaScriptではHTMLを書くことはできませんが、JSXを使うとまるでHTMLを書くようにUIを表現できます。初心者にとっては「JavaScriptの中にHTMLをそのまま書いているみたい」に感じられると思います。

例えば、以下のように書けます。


const element = <h1>こんにちは、React！</h1>;

一見するとHTMLですが、実際はJavaScriptのコードとして扱われています。

2. JSXを使うメリット

JSXを使うと、画面の見た目とロジックをひとつのファイルにまとめて管理できるため、コードの見通しが良くなります。特にReactでは「コンポーネント」という単位でUIを作るので、JSXを使うと部品を直感的に表現できます。

例えばHTMLのようにタグを使えるので、初心者でも読みやすく、デザイナーが見ても理解しやすいというメリットがあります。

3. JSXの基本ルール

JSXにはいくつかの基本ルールがあります。これを知らないとエラーが出てしまうので注意が必要です。

ひとつのコンポーネントは必ずひとつの親タグで囲む必要がある
属性（HTMLのプロパティ）はキャメルケース（例: className, onClick）で書く
JavaScriptの値を埋め込みたいときは{ }で囲む


function App() {
  const name = "太郎";
  return (
    <div>
      <h1>こんにちは、{name}さん！</h1>
    </div>
  );
}

（画面に「こんにちは、太郎さん！」と表示されます）

4. HTMLとの違いを理解しよう

JSXはHTMLに似ていますが、完全に同じではありません。例えばclassではなくclassNameを使う必要があります。これはJavaScriptの予約語（すでに特別な意味を持つ単語）と区別するためです。

また、イベントの書き方も違います。HTMLではonclickですが、JSXではonClickと書きます。このように細かいルールを知っておくことでエラーを避けられます。

5. JSXは裏側でJavaScriptに変換される

JSXはそのままブラウザが理解できるわけではありません。裏側ではBabelというツールによって通常のJavaScriptに変換されています。つまり、JSXは「便利な書き方」であり、実際にはReactの関数呼び出しに置き換えられているのです。

例えば、次のようなJSX：


const element = <h1>Hello, world!</h1>;

これは内部的には次のように変換されます：


const element = React.createElement("h1", null, "Hello, world!");

この変換のおかげで、開発者はわかりやすい書き方ができるのです。

6. JSXを使わない場合との比較

もしJSXを使わなければ、画面の部品を全てReact.createElementで書く必要があります。これは非常に読みづらく、初心者にとっては直感的ではありません。そのためReactの開発現場ではほとんどの場合、JSXが使われています。

7. JSXを使うときの注意点

便利なJSXですが、注意点もあります。

タグを閉じ忘れるとエラーになる（例: <img> ではなく <img />）
JavaScriptの変数や関数を埋め込むときは必ず{ }を使う
配列や条件分岐を使って複雑なUIを作れるが、読みやすさを意識する

8. JSXの理解がReact学習の第一歩

Reactを学ぶ上で、まず最初につまずきやすいのがJSXです。しかし、HTMLのように見えるコードが実はJavaScriptであることを理解すれば、一気に見通しが良くなります。JSXはReactの基盤であり、初心者が「Reactらしい書き方」に慣れるための最初の関門なのです。

まとめ

ReactのJSXについて学んだことを振り返ると、JSXはJavaScriptの中にHTMLのような構文を書ける仕組みであり、Reactで画面を構築する上で非常に重要な基盤です。JSXを使うことで、コンポーネントの見た目とロジックを同じファイルで管理でき、コードの可読性やメンテナンス性が向上します。基本的なルールとしては、タグは必ず1つの親要素で囲むこと、属性はキャメルケースで書くこと、JavaScriptの値や式を埋め込むときは必ず{ }で囲むことが重要です。

また、JSXはそのままではブラウザが理解できず、Babelなどのツールで通常のJavaScriptに変換されます。これはReact.createElementを呼び出す形に変換され、JSXは開発者にとってわかりやすい書き方を提供しているに過ぎません。JSXを使わずに全てReact.createElementで書くことも可能ですが、可読性が低く、初心者には直感的ではありません。

さらに、JSXではHTMLとの微妙な違いに注意する必要があります。例えばclassではなくclassNameを使う、onclickではなくonClickを使う、タグを必ず閉じるなどです。これらのルールを理解し、正しく使うことでReactコンポーネントを安全かつ効率的に作成できます。

サンプルプログラムまとめ


import React from "react";

function Greeting({ name }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="太郎" />
      <p>ReactでJSXを使うとコードがわかりやすくなります。</p>
    </div>
  );
}

export default App;

（画面に「こんにちは、太郎さん！」と「ReactでJSXを使うとコードがわかりやすくなります。」が表示されます）

先生と生徒の振り返り会話

生徒

「JSXは見た目はHTMLだけど、中身はJavaScriptなんですね。だから変数や式も埋め込めるんですね。」

先生

「そうです。JSXを理解すると、コンポーネントを直感的に書けるようになり、状態やpropsも組み合わせやすくなります。」

生徒

「BabelでJavaScriptに変換される仕組みも理解できました。JSXを使うと可読性が上がるんですね。」

先生

「その通りです。JSXのルールを守りつつ、親タグで囲む、属性の書き方に注意する、タグを閉じるなどを意識すると、Reactコンポーネントを安全に作れます。」

生徒

「これでReactでの画面作りの基礎がしっかり理解できました！JSXを使いこなすことがReact学習の第一歩ですね。」