JSXの読み方 — HTMLそっくりだが実はJavaScript

HTMLに見える。でも実体はJavaScript

Reactのコードを開くと、JavaScriptファイルの中に<p>や<div>といったHTMLらしきものが直接書いてあって驚くかもしれません。これがJSXです。見た目はHTMLそっくりですが、正体はJavaScript。ブラウザに届く前に、裏で「画面を組み立てるJSの命令」へ変換されます。だから『HTMLの顔をしたJS』と思って読むのがコツです。

function Hello() {
  return <p>こんにちは、Reactの世界へ</p>;
}

returnの後ろに書いた<p>...</p>が、この関数の「見た目」です。関数が値を返すのと同じ感覚で、Reactの部品は「画面の一部」を返します。文字列を返すのではなく、画面の構造を返している、と読み替えてください。

{}の中にはJavaScriptを書ける

JSXがただのHTMLと決定的に違うのは、波かっこ{}の中にJavaScriptの変数や式を差し込めることです。{}は『ここからはJSですよ』という切り替えスイッチだと考えてください。文字を埋め込むだけでなく、足し算や関数呼び出しの結果も書けます。

function Price() {
  const yen = 1200;
  return <p>お値段は {yen} 円、税込 {Math.round(yen * 1.1)} 円です</p>;
}

HTMLとの小さな違い: className と閉じタグ

JSXはJavaScriptなので、HTMLの一部の書き方がそのままは使えません。代表がclassです。classはJavaScriptの予約語(クラス構文で使う)なので、JSXではclassNameと書きます。見た目はほぼ同じでも、名前が違う点に気づけると読み間違いが減ります。

// HTMLでは class だが、JSXでは className
function Badge() {
  return <span className="badge">NEW</span>;
}

returnで返せるのは「1つのかたまり」だけ

JSXを読むときにもう1つ知っておきたいのが、関数がreturnで返せるJSXは『必ず1つの親要素にまとまっている』というルールです。並んだ要素をそのまま2つ返すことはできません。だからReactのコードでは、中身を<div>や<>...</>(フラグメント)で1つに包んでいる形がよく出てきます。『いちばん外側を1枚の入れ物で包む』のがJSXの決まり、と読み替えてください。

// これはエラー: 親がなく、2つを並べて返している
function Ng() {
  return (
    <h1>タイトル</h1>
    <p>本文</p>
  );
}

// OK: <> </> (フラグメント)で1つに包む
function Ok() {
  return (
    <>
      <h1>タイトル</h1>
      <p>本文</p>
    </>
  );
}