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>;
}