AI時代のReact入門第5回：JSXの基礎（シンタックス、HTMLとの違い）

「divタグの中にclassName=”container”って書くの？ JSXって結局HTMLとどう違うの？」

Reactを始めたばかりの方なら、きっとこんな疑問を持ったことがあるのではないでしょうか。確かにJSXは一見HTMLそっくりですが、実は重要な違いがいくつもあります。

今回の記事では、HTMLを書いてきた方が特に戸惑いやすいJSXの特徴を、実際のコード例を交えながら解説していきます。JSXを理解することは、Reactでのスムーズな開発の第一歩。この記事を読めば、「あれ？HTMLと違うぞ？」という混乱から「なるほど、そういうことか！」という理解へと変わるはずです。

JSXの基礎：HTMLとの違いを理解しよう
- JSXとは何か
なぜJSXを使うのか
HTMLとJSXの主な違い
よくあるエラーと解決方法
まとめ

JSXの基礎：HTMLとの違いを理解しよう

「divタグの中にclassName=”container”って書くの？ JSXって結局HTMLとどう違うの？」

JSXとは何か

JSXは、React開発において使用する特別な記法です。見た目はHTMLにそっくりですが、実際にはJavaScriptの拡張構文として機能します。以下のようなコードがJSXの例です：

jsx

const element = (
  <div className="container">
    <h1>こんにちは！</h1>
    <p>これはJSXで書かれています</p>
  </div>
);

一見するとHTMLそのものに見えますが、このコードは最終的にJavaScriptに変換されます。そう、JSXは「見た目はHTML、中身はJavaScript」なのです。

なぜJSXを使うのか

「HTMLがそのまま書けるわけではないなら、なぜJSXを使うのだろう？」

そう思われるかもしれません。しかし、JSXには以下のような大きなメリットがあります：

直感的なUI表現：HTMLライクな記法により、UIの構造が視覚的に理解しやすい
JavaScript式の埋め込み：波括弧{}を使って、JavaScriptの式を直接記述できる
セキュリティの向上：XSS（クロスサイトスクリプティング）攻撃を防ぐための対策が標準で組み込まれている

では、具体的なコード例を見ながら、HTMLとJSXの違いについて詳しく見ていきましょう…

HTMLとJSXの主な違い

1. クラス名の指定方法

HTMLではclass属性を使ってクラスを指定しますが、JSXではclassNameを使います：

jsx

// HTMLの場合
<div class="container">

// JSXの場合
<div className="container">

これは、classがJavaScriptの予約語であるため、JSXではこのような命名が採用されています。

2. スタイルの指定方法

インラインスタイルの書き方も大きく異なります：

jsx

// HTMLの場合
<div style="color: blue; font-size: 16px;">

// JSXの場合
<div style={{ color: 'blue', fontSize: '16px' }}>

JSXでは：

スタイルをオブジェクトとして指定
プロパティ名はキャメルケース（font-size → fontSize）
値は文字列として指定

3. イベントハンドラの指定

イベントハンドラの名前もキャメルケースで書きます：

jsx

// HTMLの場合
<button onclick="handleClick()">

// JSXの場合
<button onClick={handleClick}>

特徴として：

イベント名はキャメルケース（onclick → onClick）
波括弧{}で囲んで関数を直接渡す
文字列として関数を渡さない

4. 単一のルート要素

JSXでは、必ず単一のルート要素で囲む必要があります：

jsx

// ❌ 誤った書き方
const Element = () => {
  return (
    <h1>タイトル</h1>
    <p>段落</p>
  );
}

// ✅ 正しい書き方
const Element = () => {
  return (
    <div>
      <h1>タイトル</h1>
      <p>段落</p>
    </div>
  );
}

// ✅ Fragmentを使った書き方
const Element = () => {
  return (
    <>
      <h1>タイトル</h1>
      <p>段落</p>
    </>
  );
}

5. JavaScriptの式の埋め込み

JSXでは波括弧{}を使ってJavaScriptの式を埋め込めます：

jsx

const name = 'React';
const element = (
  <div>
    <h1>Hello, {name}!</h1>
    <p>1 + 1 = {1 + 1}</p>
    <p>現在時刻: {new Date().toLocaleTimeString()}</p>
  </div>
);

よくあるエラーと解決方法

JSXを書いていると、特に以下のようなエラーに遭遇することがあります：

Adjacent JSX elements must be wrapped in an enclosing tag
- 複数の要素を返す際に、親要素で囲み忘れている
- 解決策：<div>や<>（Fragment）で囲む
Expected corresponding JSX closing tag
- セルフクロージングタグの/を忘れている
- 解決策：<img src="...">ではなく<img src="..." />と書く
‘class’ is not a valid attribute
- classを使ってしまっている
- 解決策：classNameを使う