JSXのルール｜基礎を学ぶ - ゆめさくコード

JSX は HTML ではない

JSX は HTML によく似ていますが、正体は JavaScript です。似ているせいで、HTML のつもりで書くと動かないところがいくつかあります。数は多くないので、ここでまとめて覚えてしまいます。

class ではなく className

一番よく出会うのがこれです。JSX では class ではなく className と書きます。

<div className="profile">
  <h2>あおい</h2>
</div>

理由は、JSX が JavaScript だからです。class は JavaScript の予約語で、クラス定義に使われる単語なので、属性名としては使えません。同じ理由で for は htmlFor になります。CSS 側は今までどおり .profile と書きます。変わるのは JSX の書きかただけです。

閉じないタグも閉じる

HTML では <hr> や <br> や <img> は閉じタグを省略できました。JSX では省略できず、末尾を /> にして自分で閉じます。

<hr />
<br />
<img src="/works/recipe.png" alt="レシピ検索アプリ" />

閉じ忘れると、そのあとの行が全部そのタグの中身だと解釈されてしまい、エラーになります。

返せるのは1つだけ

return で返せる要素は、いつでも1つです。並べたいものが2つ以上あるときは、外側を1つのタグで包みます。

export default function App() {
  return (
    <div className="profile">
      <h2>あおい</h2>
      <p>Web エンジニアです</p>
    </div>
  );
}

これを 単一ルート の決まりと呼びます。包むための div を増やしたくないときは、名前の無いタグ <> と </> で包むこともできます。これは画面には何も出ません。

そのほかの違い

細かいものは下記のとおりです。今すぐ覚えなくても、出てきたときに戻ってくれば十分です。

属性名はハイフンではなく大文字区切りになる。tabindex は tabIndex
コメントは {/* ここにコメント */} の形で書く
中身が空でも、タグは必ずどちらかの形で閉じる

つまずきどころ

class と書いてもエラーにはならず、警告が出るだけで画面は表示されます。そのかわり CSS が当たらないので「なぜか見た目だけ反映されない」という形で気付くことになります。見た目が当たらないときは、まず className になっているかを見てください。

演習

次の HTML で書かれたプロフィールの断片を、そのまま動く JSX に直します。

<div class="profile">
  <h2>あおい</h2>
  <p>Web エンジニアです</p>
  <hr>
</div>

JSXのルール