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

生徒

「ReactのJSXって、ブラウザでどうやって動いてるんですか？」

先生

「実はそのままでは動かないんですよ。Babelというツールが変換してくれているんです。」

生徒

「えっ、JSXってJavaScriptじゃないんですか？」

先生

「正確にはJavaScriptに似た特別な書き方で、Babelが普通のJavaScriptに直してくれているんです。詳しく見てみましょう！」

1. JSXとは？JavaScriptに見えてJavaScriptじゃない？

JSX（ジェイエスエックス）は、Reactで使われる特別な構文で、HTMLのように見えるタグをJavaScriptの中で使える記述方法です。

たとえば、次のようなコードをよく見かけます。


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

このコードは見た目はHTMLに似ていますが、JavaScriptの構文ではありません。そのままではブラウザが理解できないのです。

2. JSXは誰が変換しているの？Babelの登場

JSXは、Babel（バベル）という変換ツールによって、ブラウザが理解できる普通のJavaScriptコードに変換されます。

この変換作業のことを「コンパイル」といいます。JSXは人間が読みやすいように書かれたコードで、Babelがそれを機械が読める形に直しているのです。

3. JSXがJavaScriptに変換される例を見てみよう

次のようなシンプルなJSXコードがあるとします。


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

このコードはBabelによって、次のようなJavaScriptコードに変換されます。


const element = React.createElement("h1", null, "こんにちは！");

React.createElement() は、Reactが使う関数で、要素（Element）を生成するためのものです。

4. Babelの役割とは？

BabelはJSXだけでなく、最新のJavaScriptの書き方（ES6以降）を古いブラウザでも動く形に変換してくれる便利なツールです。

Reactで開発するとき、JSXを書く → Babelが変換 → JavaScriptとして動作、という流れが自動的に行われています。

この変換処理は、npm start や yarn start などのコマンドを実行すると自動で走ります。

5. 実際のReactコードと変換後のコード

Reactでは次のようなJSXコードを書いたとします。


import React from "react";

function App() {
  return <h1>Reactへようこそ！</h1>;
}

export default App;

このJSXは、Babelによって次のような形に変換されます。


import React from "react";

function App() {
  return React.createElement("h1", null, "Reactへようこそ！");
}

export default App;

この変換によって、ReactがUIを作る処理をJavaScriptで制御できるようになります。

6. JSXがそのままでは動かない理由

もしBabelがなければ、JSXのコードはJavaScriptとしてエラーになります。なぜなら、<h1>〜</h1> のような記述は、本来のJavaScriptの構文にはないからです。

そのため、BabelがJavaScriptとして正しく動くように変換してくれているのです。

7. Babelは裏側で動いているから意識しなくてOK

create-react-app や Vite のようなツールを使えば、Babelの設定は自動で行われます。

つまり、開発者がBabelの操作を意識しなくても、JSXを書くだけで勝手にJavaScriptに変換されるという仕組みになっています。

でも、その裏側で「Babelが変換してくれている」ということを知っておくと、エラーが起きたときに原因を理解しやすくなります。

8. Babelを使ってJSXを書けるようになるとReactがもっと楽しくなる

JSXはReactの開発で欠かせない構文ですが、裏側ではJavaScriptに変換されているという仕組みを理解しておくと、Reactのコードがより深くわかるようになります。

ReactのJSX構文、JavaScriptの違い、Babelによるコンパイルの流れが頭に入っていると、安心してReact開発を進められるようになります。

まとめ

JSXとBabelの関係を全体で振り返る

この記事では、Reactでよく使われるJSXがどのようにしてブラウザ上で動作しているのか、その裏側の仕組みを中心に解説してきました。 JSXは見た目こそHTMLに近いですが、実際にはJavaScriptそのものではなく、React独自の構文です。そのため、ブラウザが直接JSXを理解して実行しているわけではありません。ここで重要な役割を果たしているのが、Babelという変換ツールです。

Babelは、開発者が書いたJSXをブラウザが理解できるJavaScriptのコードへと変換しています。この変換処理があるおかげで、私たちはHTMLに近い感覚でUIを記述しながら、実際にはJavaScriptの関数としてReactの画面構築処理を動かすことができています。 JSXが直接動いているように見えて、裏側ではReact.createElementという関数呼び出しに変わっている、この流れを理解することが、Reactを深く理解する第一歩になります。

なぜJSXをそのまま書けないのかを理解する

JavaScriptの文法として考えると、タグのような記述は本来存在しません。そのため、JSXはそのままでは構文エラーになります。ここでBabelが介入し、人間にとって読みやすいJSXを、機械が正しく解釈できるJavaScriptへと置き換えています。この処理は「コンパイル」と呼ばれ、React開発では欠かせない工程です。

開発中はBabelの存在を意識する場面は少ないですが、 JSXのエラーや警告が出たときに「これはBabelで変換される前の段階の問題かもしれない」と考えられるようになると、エラー解決のスピードが大きく変わってきます。表面上の書き方だけでなく、変換後の姿をイメージできることが、React初心者から一段階成長するポイントと言えるでしょう。

JSXがJavaScriptに変換される流れを再確認

JSXで書かれたコードは、最終的にReact.createElementという形に変換されます。これは、Reactが画面の構造を内部で管理するための基本的な仕組みです。見た目には単純なタグのように見えるJSXも、実際には関数の呼び出しとして扱われています。この仕組みを知ることで、「なぜJSXではclassではなくclassNameを使うのか」「なぜタグは必ず閉じなければならないのか」といった細かいルールにも納得がいくようになります。

シンプルなJSXと変換後のイメージ


function App() {
  return <h1>こんにちはReact</h1>;
}


function App() {
  return React.createElement("h1", null, "こんにちはReact");
}

（画面に「こんにちはReact」と表示されます）

このように、私たちが普段書いているJSXは、 Babelによって自動的にReact.createElementの形へと変換されています。普段は意識しなくても問題ありませんが、この変換の存在を知っていることで、Reactの動作原理がより立体的に理解できるようになります。

Babelを意識しすぎなくてよい理由

create-react-appやViteといった開発環境では、 Babelの設定はすでに用意されています。そのため、開発者はJSXを書くことに集中すれば問題ありません。ただし、裏側で何が起きているかを知っているかどうかで、エラー対応やコード理解の深さに差が出てきます。 JSXとBabelの関係は、Reactを使い続ける限り必ず関わる基礎知識です。

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

生徒

「JSXって、そのままブラウザで動いていると思っていましたが、裏でJavaScriptに変換されていたんですね。」

先生

「そうなんです。Babelが間に入ってくれているおかげで、私たちは読みやすい形でReactのUIを書けているんですよ。」

生徒

「変換後のコードを見ると、Reactが関数で画面を作っているのが分かって、仕組みが少し身近に感じられました。」

先生

「その感覚はとても大切です。 JSXとBabelの仕組みを理解していれば、Reactの学習はずっと楽になります。これから出てくるエラーや仕様も、落ち着いて理解できるようになりますよ。」