Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – JSXとは何か

Next.js
スポンサーリンク

JSXとは何か

「JavaScriptの中でHTMLっぽく書ける特別な文法」

JSX は、React で画面を作るときに使う「JavaScript拡張文法」です。
ぱっと見は HTML にそっくりですが、正体はあくまで「JavaScriptのコード」です。

イメージとしては、

「JavaScriptの中で、HTMLに似た見た目でUIを表現できる書き方」

だと思ってください。

普通の JavaScript で画面の構造を表そうとすると、かなり読みづらくなります。

// 素の JavaScript で DOM を作る例（イメージ）
const p = document.createElement("p");
p.textContent = "こんにちは";
document.body.appendChild(p);

これを JSX を使うと、React ではこう書けます。

function Hello() {
  return <p>こんにちは</p>;
}
JSX

HTML みたいに見える <p>こんにちは</p> は、
実際にはコンパイル（変換）されて JavaScript の関数呼び出しに変わります。

React がこの JSX を読み取って、実際の画面（DOM）を組み立ててくれている、という構造です。

HTMLとJSXの違い

見た目は似ているが「中身は別物」

HTML と JSX は見た目がよく似ているので、最初はほぼ同じ感覚で書けます。
ただし JSX は「JavaScript の中の文法」なので、いくつか重要な違いがあります。

特に初心者が最初につまずきやすいポイントを重点的に説明します。

class ではなく className を使う

HTML ではクラスを指定するときに class 属性を使います。

<p class="title">こんにちは</p>

しかし JSX では、class ではなく className を使います。

function Title() {
  return <p className="title">こんにちは</p>;
}
JSX

なぜかというと、class は JavaScript で予約語（クラス構文に使うキーワード）だからです。
JSX は JavaScript の世界の中にいるので、class の代わりに className という別名が用意されています。

イベント名などが「キャメルケース」になる

HTML では小文字で書くイベント属性も、JSX ではキャメルケース（途中を大文字で区切る書き方）になります。

HTML の例：

<button onclick="alert('クリックされました')">押す</button>

JSX の例：

function Button() {
  return (
    <button onClick={() => alert("クリックされました")}>
      押す
    </button>
  );
}
JSX

onclick → onClick のように、
on の後ろの単語の頭を大文字にするのが JSX のルールです。

同じように、

onchange → onChange
onmouseover → onMouseOver

という形になります。

ひとつのコンポーネントは「ひとつの親要素」を返す

JSX では、コンポーネントの return の中には「親がひとつだけ」の構造を書く必要があります。

これはよくあるエラーの元なので、少し丁寧に見ていきましょう。

例えば、これはダメな例です。

function Bad() {
  return (
    <h1>タイトル</h1>
    <p>本文</p>
  );
}
JSX

親要素が 2 つ並んでしまっているので、エラーになります。

正しい書き方は、何かひとつで包んであげることです。
例えば <div> で包むとこうなります。

function Good() {
  return (
    <div>
      <h1>タイトル</h1>
      <p>本文</p>
    </div>
  );
}
JSX

あるいは、React のフラグメントという仕組みを使って <></> で包むこともできます。

function Good() {
  return (
    <>
      <h1>タイトル</h1>
      <p>本文</p>
    </>
  );
}
JSX

「返すのは必ずひとつの大きな箱、その中に好きなだけ要素を入れる」というルールだと覚えておくとスッキリします。

{} の意味

JSX における {} は「JavaScriptモードに切り替えるスイッチ」

JSX の中に出てくる {} は、初心者が最初に「これ何？」と思うポイントです。

ゆっくり整理すると、

「JSX の中で {} を書いた場所には、JavaScript の値（式の結果）を埋め込める」

という意味になります。

普通のテキストはそのまま書きますが、
変数や計算結果、関数の戻り値など「JavaScript の値」を埋め込みたいときに {} を使います。

具体例：変数を表示する

例えば、次のようなコンポーネントを考えます。

function Greeting() {
  const name = "太郎";

  return <p>こんにちは、{name} さん！</p>;
}
JSX

ここで {name} と書いている部分がポイントです。
これは「変数 name の中身をここに差し込む」という意味になります。

ブラウザには、

こんにちは、太郎 さん！

と表示されます。

もし name を "花子" に変えれば、表示も自動的に変わります。
つまり、{} は「動的な値を JSX の中に埋め込む穴」だと思ってください。

{} の中に書けるもの・書けないもの

{} の中には「JavaScript の式」を書けます。

式というのは「値に評価されるもの」のことです。
例えば次のようなものは OK です。

変数名（name）
計算式（1 + 2）
関数呼び出し（getMessage()）
三項演算子（isLogin ? "ログイン中" : "ゲスト"）

逆に、if 文や for 文のような「文（statement）」は {} の中には直接書けません。
それらは JSX の外側、もしくは関数の中で処理してから、結果だけを {} に渡すイメージです。

JSXで文字を表示

「ただの文字」と「変数からの文字」

JSX で文字を表示するパターンを、具体的な例で見ていきます。

もっともシンプルなのは、ただの文字列を書く場合です。

function SimpleText() {
  return <p>こんにちは、世界！</p>;
}
JSX

これは HTML とほぼ同じ感覚です。

ここに「変数」を混ぜたい場合に、{} が登場します。

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

この場合、{name} の部分に "太郎" が挿入されて、ブラウザには
こんにちは、太郎 さん！ と表示されます。

複数の値を組み合わせて表示する例

{} はいくつも使えますし、文字列と混ぜて書いて問題ありません。

function Profile() {
  const name = "太郎";
  const age = 25;

  return (
    <p>
      名前：{name} / 年齢：{age} 歳
    </p>
  );
}
JSX

このように、

静的なテキスト（決まった文字）
動的な値（変数・計算結果）

を組み合わせて画面に表示するのが、JSX の基本的な使い方です。

簡単な計算表示

計算結果をそのまま埋め込む

{} の中には計算式も書けます。
例えば、シンプルに足し算の結果を表示してみます。

function CalcExample() {
  return <p>1 + 2 = {1 + 2}</p>;
}
JSX

このコンポーネントを表示すると、ブラウザには
1 + 2 = 3 と表示されます。

{1 + 2} の部分は、JavaScript として計算されて 3 という値になり、
その結果だけが画面に表示されます。

変数を使った計算例

もう少し実用的な例として、「税込み金額」を計算して表示してみます。

function Price() {
  const price = 1000;
  const taxRate = 0.1; // 10%

  return (
    <p>
      税抜き価格：{price} 円 / 税込み価格：
      {price * (1 + taxRate)} 円
    </p>
  );
}
JSX

ここでは {price * (1 + taxRate)} の部分が計算式です。
1000 * 1.1 が計算されて 1100 になり、その値が JSX に埋め込まれます。

ブラウザには、

税抜き価格：1000 円 / 税込み価格：1100 円

と表示されます。

条件によって表示を変える簡単な例

計算だけでなく、「条件分岐」を使って表示を変えることもできます。
三項演算子という書き方を使うと、JSX 内でもスマートに書けます。

function AdultCheck() {
  const age = 20;

  return (
    <p>
      年齢：{age} / {age >= 18 ? "大人です" : "未成年です"}
    </p>
  );
}
JSX

この例では、age >= 18 ? "大人です" : "未成年です" という式が {} の中に入っています。
age が 18 以上なら "大人です"、そうでなければ "未成年です" が表示されます。

ブラウザには、

年齢：20 / 大人です

と表示されます。

まとめ（JSXと{}の感覚をつかむ）

ここまでの内容を、感覚として整理しておきます。

JSX は「JavaScript の中で HTML っぽく UI を書ける特別な文法」で、React がこれを解釈して画面を作る。
HTML とよく似ているが、class が className になったり、イベント名が onClick のようなキャメルケースになるなどの違いがある。
JSX の {} は「ここから中は JavaScript の世界です」というスイッチで、変数・計算結果・関数の戻り値など「値」を埋め込める。
文字を表示するときは、固定の文字はそのまま書き、動的な値は {} の中に書いて組み合わせる。
計算式や条件分岐も {} の中で書けるので、画面上に「計算結果」や「状態に応じたメッセージ」を簡単に表示できる。

この感覚がつかめてくると、

「HTML っぽく見えるけど、実は全部 JavaScript の中なんだな」
「画面に出したい値は、とりあえず {} の中に書けばいいんだな」

という理解に変わっていきます。

次のステップとしては、

自分の page.tsx に、
名前や年齢、簡単な計算、条件分岐を使った表示などを色々試し書きして、
画面がどう変わるかを確認してみると、JSX と {} の感覚が一気に身についてきます。

スポンサーリンク
タイトルとURLをコピーしました