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

生徒

「先生、Reactのコードを見たらHTMLみたいなタグがいっぱい出てきました。これって本当にJavaScriptなんですか？」

先生

「そうですね、それはJSXという書き方なんです。見た目はHTMLにそっくりですが、実際にはJavaScriptに変換されて動いています。」

生徒

「なるほど！でもタグの書き方とか属性の書き方が普通のHTMLと違うように見えるんですけど…？」

先生

「いいところに気づきましたね。JSXにはいくつかの基本ルールがあるので、順番に学んでいきましょう！」

1. JSXでタグを書く基本ルール

JSXはHTMLに似ていますが、JavaScriptの文法として扱われるため、タグの書き方に注意点があります。基本はHTMLと同じように開始タグと終了タグを使います。


function App() {
  return (
    <div>
      <h1>こんにちは、JSX！</h1>
      <p>これは段落です。</p>
    </div>
  );
}

このように<div>で囲んで、その中に<h1>や<p>を配置できます。HTMLとほぼ同じですが、必ず閉じタグを忘れないようにしましょう。

2. 自己終了タグのルール

HTMLでは<img>や<br>のように終了タグが不要な要素がありますが、JSXでは必ずスラッシュ/をつけて書きます。


function App() {
  return (
    <div>
      <img src="logo.png" alt="ロゴ" />
      <br />
    </div>
  );
}

これを忘れるとエラーになるので、初心者がつまずきやすいポイントです。

3. 属性の書き方とキャメルケース

JSXではHTMLの属性に似た書き方をしますが、JavaScriptのルールに合わせて「キャメルケース」というスタイルを使います。キャメルケースとは、単語の区切りを大文字にする書き方です。

class → className
onclick → onClick
tabindex → tabIndex


function App() {
  return (
    <div className="container">
      <button onClick={() => alert("クリックされました！")}>
        ボタン
      </button>
    </div>
  );
}

（画面にボタンが表示され、クリックするとアラートが出ます）

4. JavaScriptの値を埋め込むルール

JSXでは波かっこ{ }を使ってJavaScriptの変数や関数を埋め込めます。これによって動的に表示内容を変えられます。


function App() {
  const name = "花子";
  const age = 20;
  return (
    <div>
      <h1>{name}さん、こんにちは！</h1>
      <p>年齢は{age}歳です。</p>
    </div>
  );
}

（画面に「花子さん、こんにちは！」と表示され、「年齢は20歳です」と出ます）

5. スタイルを指定する場合のルール

HTMLではstyle="color:red;"のように文字列で書けますが、JSXではオブジェクトとして指定します。つまり波かっこを二重にして書きます。


function App() {
  return (
    <div>
      <h1 style={{ color: "red", fontSize: "24px" }}>
        赤い文字の見出し
      </h1>
    </div>
  );
}

このようにCSSプロパティもキャメルケースで書くのがルールです。

6. JSXで複数要素を返すときのルール

JSXではひとつのコンポーネントが複数の要素を返す場合、必ずひとつの親要素で包む必要があります。これはJavaScriptが複数の値をそのまま返せないためです。


function App() {
  return (
    <div>
      <h1>見出し</h1>
      <p>段落</p>
    </div>
  );
}

もし余計なタグを増やしたくない場合は、<>...</>というフラグメントを使うこともできます。

7. JSXの基本ルールを覚えることが大切

ここまで見てきたように、JSXはHTMLに似ていますがJavaScriptのルールを持っています。タグの閉じ方や属性のキャメルケース、波かっこの使い方などを覚えることで、エラーを防ぎスムーズに開発できます。Reactを始める初心者にとって、まずはこのルールを身につけることが大切です。

まとめ

JSXはReactを扱う上で欠かせない書き方であり、HTMLに近い見た目を持ちながらJavaScriptとして動作する特別な構文です。この記事で紹介されていたとおり、タグの閉じ忘れや自己終了タグ、キャメルケースの属性名、波かっこによる変数の埋め込みなど、JSXには独自の基本ルールが存在します。これらを正しく理解することで、Reactのコンポーネントがどのように描画されているのかが見えてきて、コード全体の読みやすさや保守性が格段に向上します。

たとえばclassNameやonClickなど、HTMLとは異なる名称が使われている点は初学者がつまずきやすい部分ですが、一度習得すれば自然に書けるようになります。また、JavaScriptの値を{ }で埋め込む仕組みは、動的な画面を作るReactの魅力そのものであり、データや状態を柔軟に表示できる強力な機能です。スタイル指定においても、オブジェクト形式を使って書くことで、より細かな見た目の変更が可能になります。

Reactで重要なのは「ひとつの親要素でラップする」ルールを守ることです。複数のタグをそのまま返すことはできないため、<div>で包むか、フラグメント<></>を使うことになります。こうしたJSX特有のルールは、慣れると効率的にコードを書けるようになるだけでなく、Reactコンポーネントの役割や構造を理解する上でも非常に役立ちます。初心者がReactの第一歩としてJSXをしっかり習得することは、後の学習全体をスムーズに進める大きな助けとなります。

JSXは見た目こそHTMLに近くても、その裏ではJavaScriptに変換されて動いています。そのため、動的な値の扱いや関数の呼び出しなど、JavaScriptらしい書き方が多く登場します。こうした違いを意識しながら、HTMLとの共通点とReactならではの特徴を理解することで、より実践的なコンポーネント開発ができるようになります。JSXの基本ルールを確実に身につけることが、Reactの世界で柔軟にUIを作り上げるための土台になるのです。

サンプルプログラムの振り返り

最後に、記事内容の理解を深めるためのJSXを活用したサンプルコードを振り返ってみます。属性のキャメルケースや波かっこの使い方、スタイル指定など、ポイントが一度に確認できる例になっています。


function SampleJSX() {
  const user = { name: "太郎", age: 25 };
  const headingStyle = { color: "blue", fontSize: "20px" };

  return (
    <div className="wrapper">
      <h1 style={headingStyle}>{user.name}さんのプロフィール</h1>
      <p>年齢：{user.age}歳です。</p>

      <img src="profile.png" alt="プロフィール画像" />

      <button onClick={() => alert("クリックされました！")}>
        アクションボタン
      </button>
    </div>
  );
}

このサンプルでは、スタイルをオブジェクトで指定し、動的な値を波かっこで埋め込む基本が確認できます。また、自己終了タグの<img />やonClick属性も実際に使われており、JSXを書く際の注意点を自然に意識できる構成になっています。こうしたサンプルを繰り返し書いてみることで、初心者でもJSXのルールが身につき、Reactコンポーネントを自在に操作できる感覚が得られます。

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

生徒「JSXってHTMLに似ているけど、JavaScriptのルールで動いているっていうのがよく分かりました！」

先生「そうですね。波かっこで値を埋め込めたり、キャメルケースで属性を書いたり、Reactならではの工夫が詰まっています。」

生徒「自己終了タグの書き方とか、閉じタグを忘れちゃいけない理由も理解できました！」

先生「どれもReactでエラーを避ける大切なポイントですよ。JSXの基本を正しく身につければ、コンポーネント作りがとてもスムーズになります。」

生徒「これでReactのコードを読むのが楽になりそうです！」

先生「基本ルールに慣れてくると、より複雑なUIにも挑戦できるようになります。ぜひたくさん書いてみてくださいね。」