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

生徒

「ReactのJSXってJavaScriptと何が違うんですか？」

先生

「JSXはJavaScriptの文法に似ていますが、HTMLのように見える特別な書き方です。」

生徒

「見た目はHTMLなのにJavaScriptなんですね？ちょっとややこしそう…」

先生

「でも大丈夫。それぞれの違いをやさしく解説していきますよ！」

1. JSXとは？React専用のHTML風な書き方

まず、JSX（ジェイエスエックス）は、ReactというJavaScriptライブラリで使われる特別な構文です。見た目はHTMLのように見えますが、実はJavaScriptであり、コンピュータが読めるように変換されます。

たとえば、次のように書くのがJSXの基本です。


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

このように、JSXはJavaScriptの中でHTMLのようなタグを書くことができるのが特徴です。

2. JavaScriptとの違いはどこにある？

JavaScriptは、ブラウザを動かしたり、画面に表示する内容をプログラムで操作するための言語です。ふつうは文字や数値を扱ったり、関数や条件分岐を使ったりします。

一方、JSXは「画面に表示する見た目（UI）」を記述するための拡張構文です。JavaScriptと混ぜて使うことができ、HTMLタグのように見えるけれど、実はJavaScriptのコードとして動作します。

3. JSXとJavaScriptの組み合わせ例

Reactでは、JSXの中でJavaScriptの変数や関数を{ }を使って組み込めます。


import React from "react";

function App() {
  const name = "さくら";

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

export default App;

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

{name} のように、中かっこでJavaScriptの変数を埋め込むのがJSXの特徴です。

4. 属性の書き方が違う：HTMLとの違いに注意

JSXはHTMLに似ていますが、完全に同じではありません。たとえばCSSのクラスを指定する場合、classではなくclassNameと書きます。


<h1 className="title">見出し</h1>

これは、classという単語がJavaScriptの予約語（特別な意味を持つ言葉）としてすでに使われているためです。

5. JavaScriptのif文やfor文は直接使えない

JSXの中では、if文やfor文のような文（ステートメント）は使えません。代わりに三項演算子やmap()などを使います。

たとえば、次のように条件分岐を書くのがJSXのスタイルです。


<p>{isLoggedIn ? "ログイン済み" : "ゲスト" }</p>

また、リストを表示するにはmap()を使って、JavaScriptの配列から複数の要素を生成します。

6. JSXはJavaScriptに変換されて動く

JSXはそのままではブラウザで動きません。Babel（バベル）というツールを使って、JavaScriptのコードに変換されてから実行されます。

たとえば、次のJSX：


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

は、Babelによって次のようなJavaScriptに変換されます：


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

このように、JSXは書きやすくするための文法であり、最終的にはJavaScriptとして動いているのです。

7. JSXを使うメリットとは？

JSXを使うことで、HTMLのように見えるコードでUIを構築できるため、見た目とロジックが一体化しやすく、視覚的に理解しやすいです。

タグのような記述で視覚的に構造がわかりやすい
JavaScriptの変数や関数を直接使える
UIのパーツ（コンポーネント）を柔軟に組み合わせられる

ただし、HTMLとまったく同じではないので、classNameやhtmlForなど、JSX独自の書き方に注意が必要です。

8. JSXはJavaScriptの中で使うテンプレートのようなもの

最後にまとめると、JSXはJavaScriptの一部として使う「HTMLっぽい見た目のテンプレート」です。

ただの文字ではなく、実際に動くコードとして機能するため、JavaScriptとJSXの違いを理解しておくことがReactを学ぶ第一歩になります。

まとめ

ここまでReactのJSXについて学んできましたが、あらためて振り返ると、JSXという仕組みはReactを使ううえで欠かせない、とても大切な考え方だとわかります。見た目はHTMLのようでも、内部ではJavaScriptのコードとして変換されて動作するため、画面の構造とロジックを一体的に扱うことができます。とくに、ふだんJavaScriptを書き慣れていない初心者にとって、タグで見た目を表現しながら動きも同時に記述できる点は理解しやすさにつながります。 JSXは、単に「HTMLっぽく書ける」便利な書き方ではなく、コンポーネントというReactの仕組みと強く結びついています。ひとつのコンポーネントの中にJSXで画面の構造を書き、その中で変数や関数を{ }で自由に使えることで、ReactのUI構築はとても直感的で柔軟なものになります。加えて、属性名の違い（className や htmlFor），if文が使えない特徴，三項演算子や map を使ったUI生成など、JSXには独特のルールがありますが、それらは慣れれば自然に扱えるようになります。なお、JSXはブラウザが直接理解できるものではなく、BabelというツールによってJavaScriptコードに変換されてから動作します。この「変換される仕組み」を知っておくと、JSXが単なる装飾的な文法ではなく、Reactの動きを支える重要な基盤であることがよりよく理解できます。以下には、今回学んだ内容を整理したサンプルコードを掲載します。変数の埋め込み、三項演算子、リストの生成など、JSXの要素が自然に組み合わされた構成になっているので、復習としてぜひチェックしてみてください。

まとめサンプル：JSXで画面をつくる総合例


import React from "react";

function App() {
  const user = { name: "さくら", loggedIn: true };
  const fruits = ["りんご", "みかん", "ぶどう"];

  return (
    <div>
      <h1 className="title">
        {user.loggedIn ? `${user.name}さん、ようこそ！` : "ログインしてください"}
      </h1>

      <h2>好きな果物リスト</h2>
      <ul>
        {fruits.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（ログイン状態によって表示されるメッセージが変わり、下には果物のリストが表示されます）

このサンプルでは、「JSXの中にJavaScriptの値を埋め込む」「条件によってテキストを切り替える」「mapで配列を繰り返して要素を生成する」といったReactの基本がすべて含まれています。単純ですが、ReactのUI構築の本質がつまった構成になっており、最初の練習としてとても適しています。 JSXを理解することは、Reactアプリケーションを作る上で避けて通れない必須のステップです。HTMLとJavaScriptの違いを意識しながら、それぞれの良さを活かしてUIを組み立てる力を着実に身につけていきましょう。小さなサンプルからでも構いませんので、ぜひ実際に手を動かしてJSXを書く習慣を付けてみてください。

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

生徒

「JSXって最初はHTMLっぽいけれど別物だとわからなくて混乱しました。でも使い方が分かると、とても書きやすいんですね！」

先生

「そうですね。JSXは見た目を作りながらプログラムの動きも書けるので、慣れるととても便利なんですよ。Reactが人気なのもこの書きやすさが大きな理由です。」

生徒

「classNameや中かっこの書き方にも慣れてきました！JavaScriptがそのまま使えるのがすごく便利です。」

先生

「その調子です。JSXの基本を理解できれば、コンポーネント同士の組み合わせもスムーズになりますし、Reactをもっと楽しめるようになりますよ。」