JSXの書き方：HTMLとの違いを知ってヒーローセクションを作る

たける ヒーローセクションを書いてたんですけど、`class="hero"` って書いたらエラーが出て……。

りこ JSXはHTMLじゃないから。`class` は `className` と書く。

たける なんで変えたんですか……。

りこ ReactのDOM用propsでは `className` を使う。HTMLの属性名とReactのprops名には違いがある。

JSXとは

JSXは「JavaScriptの中にHTMLライクな記法で書ける構文」。Reactコンポーネントの見た目を書くために使う。

見た目はHTMLそっくりだが、JavaScriptとして処理されるので、HTMLとは異なるルールがある。

HTMLとJSXの主な違い

1. class → className

// ❌ HTML の書き方
<div class="hero">

// ✅ JSX の書き方
<div className="hero">

2. for → htmlFor

// ❌
<label for="email">メールアドレス</label>

// ✅
<label htmlFor="email">メールアドレス</label>

Reactではラベルの対応先を htmlFor で指定し、入力欄の id とそろえる。

3. 自己終了タグは必ず / で閉じる

// ❌ HTMLでは省略できるが、JSXではエラー
<img src="/characters/riko.jpg">
<input type="text">
<br>

// ✅
<img src="/characters/riko.jpg" />
<input type="text" />
<br />

4. style は文字列ではなくオブジェクト

// ❌ HTMLの書き方
<div style="background-color: #818cf8; padding: 16px;">

// ✅ JSXではオブジェクト。プロパティ名はキャメルケース
<div style={{ backgroundColor: '#818cf8', padding: '16px' }}>

たける `{{` が2つある……これは何ですか？

りこ 外側の `{}` は「ここにJavaScriptを書く」という記号。内側の `{}` はJavaScriptのオブジェクトリテラル。つまり「JavaScriptのオブジェクトを渡している」。

{} でJavaScriptを埋め込む

JSXの中の {} の中には、任意のJavaScript式を書ける。

const siteName = 'React Guide'
const year = 2025

function Hero() {
  return (
    <div>
      <h1>{siteName}</h1>              {/* 変数を表示 */}
      <p>© {year}</p>                  {/* 式を埋め込む */}
      <p>記事数: {10 + 5}本</p>        {/* 計算も書ける */}
    </div>
  )
}

{} の中に書けるのは式（値を返すもの）だけ。if 文や for 文は書けない。

// ❌ 文は書けない
{if (isOpen) { return <Modal /> }}

// ✅ 式（三項演算子）なら書ける
{isOpen ? <Modal /> : null}

必ず1つのルート要素で囲む

JSXは必ず1つのルート要素を返さなければならない。

// ❌ 要素が2つ並んでいるのでエラー
function Hero() {
  return (
    <h1>タイトル</h1>
    <p>説明文</p>
  )
}

// ✅ 1つの要素で囲む
function Hero() {
  return (
    <div>
      <h1>タイトル</h1>
      <p>説明文</p>
    </div>
  )
}

たける でも、divで囲むと余分なHTMLが増えますよね。デザインに影響しないですか？

りこ そういうときは**フラグメント**を使う。HTMLに何も出力されない、Reactだけの仮の容れ物。

フラグメント：余分なdivを出さない

// ✅ <>...</> はHTMLに出力されない
function Hero() {
  return (
    <>
      <h1>タイトル</h1>
      <p>説明文</p>
    </>
  )
}

<> と </> で囲むだけ。DOMには何も追加されない。

ヒーローセクションを作る

ここまでの知識でヒーローセクションを作ってみる。

// src/components/Hero.tsx
export const Hero = () => {
  return (
    <section className="hero">
      <div className="hero-inner">
        <p className="hero-label">React実践シリーズ</p>
        <h1 className="hero-title">
          生成AI時代の<br />React Guide
        </h1>
        <p className="hero-description">
          対話形式で学ぶ、実践的なReactの教科書。
          開発環境の構築からWebサイト公開まで。
        </p>
        <a href="/series/react-basics/00-why-learn-in-ai-era" className="hero-button">
          最初の記事から読む
        </a>
      </div>
    </section>
  )
}

たける `<br />` も自己終了タグで閉じるんですね。HTMLで `<br>` って書いてたので間違えそう。

りこ エラーが出るのでわかる。エラーメッセージを読む習慣をつけて。TypeScriptとESLintが教えてくれる。

まとめ

• {} の中にJavaScript式を書ける。文（if/for）は書けない
• 返すJSXは必ず1つのルート要素。余分なdivを避けたいときは <>...</> フラグメントを使う

次の第6回では、propsを使って「データを受け取るコンポーネント」を作る。特徴紹介の FeatureCard を例に、TypeScriptの型定義と合わせて解説する。

確認してみる

labelを押して入力欄へフォーカスするか確認する。htmlForとidが一致しない場合と比べる。

仕様・手順の参照先