はじめに｜なぜJSXの記事を書こうと思ったのか
Reactを学び始めたときに最初にぶつかる壁が「JSXって何？」だと思います。
僕自身も
「なんでHTMLっぽいのにJavaScriptの中で書けるの？」
「結局これはHTMLなの？違うの？」
と混乱しました。
この記事では、Reactを学ぶ上で避けて通れない JSX（JavaScript XML） の基本を、初心者の方でも迷わないように丁寧に解説します。
JSXとは何か？
JSXとは、JavaScriptの中でXML風の構文（HTMLに似た書き方）を使えるようにしたものです。
通常のJavaScriptでは、DOMをこう書きます。
const element = React.createElement('h1', null, 'Hello, world!');これをJSXで書くと、こんなにスッキリします。
const element = <h1>Hello, world!</h1>;見た目はHTMLに近いですが、中身はJavaScriptに変換されているという点を忘れないでください。
JSXとHTMLの違い
1. 属性名の違い
class → className
for → htmlFor
HTMLの例
<label for="username">名前</label>JSXの例
<label htmlFor="username">名前</label>→ for は JavaScript の予約語のため htmlFor を使います。
2. 属性はキャメルケース
HTMLは小文字で書きますが、JSXでは JavaScript の命名規則に合わせてキャメルケースにします。
onclick → onClick
tabindex → tabIndex
HTMLの例
<button onclick="handleClick()">Click</button>
<input tabindex="0" />JSXの例
<button onClick={handleClick}>Click</button>
<input tabIndex={0} />3. 値は文字列ではなく {} で囲む
HTMLの例
<a href="https://example.com">リンク</a>JSXの例
const url = "https://example.com";
<a href={url}>リンク</a>4. JavaScript式を直接埋め込める
JSXの例
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? <p>ログイン中</p> : <p>ログインしてください</p>}
</div>
);5. 必ず閉じタグが必要
HTMLの例
<br>
<img src="logo.png">JSXの例
<br />
<img src="logo.png" />6. 属性値は基本的にクォーテーション不要
数値や真偽値を渡す場合、文字列ではなくそのまま書けます。
JSXの例
<input type="text" maxLength={10} disabled={true} />
<input type="text" maxLength={10} disabled />7. 複数要素は親タグでラップする必要がある
NG例
return (
<h1>Hello</h1>
<p>World</p>
);OK例（divでラップ）
return (
<div>
<h1>Hello</h1>
<p>World</p>
</div>
);OK例（Fragmentでラップ）
return (
<>
<h1>Hello</h1>
<p>World</p>
</>
);8. コメントの書き方が違う
HTMLの例
<!-- これはコメント -->JSXの例
return (
<div>
{/* これはコメント */}
<p>Hello JSX</p>
</div>
);9. スタイル指定はオブジェクト
HTMLの例
<p style="color: red; font-size: 20px;">赤文字のテキスト</p>JSXの例
const style = { color: 'red', fontSize: '20px' };
<p style={style}>赤文字のテキスト</p>JSXとHTMLの違い一覧表
| 機能 | HTML | JSX |
|---|---|---|
| クラス指定 | class | className |
| for属性 | for | htmlFor |
| 属性名 | 小文字 | キャメルケース |
| 自己終了タグ | <br> | <br /> |
| コメント | <!-- --> | {/* */} |
| スタイル | style="color:red;" | style={{ color: 'red' }} |
| 属性値 | 文字列 | {}で式を書ける |
| 複数要素 | OK | 親要素 or Fragmentでラップ |
JSXを使うメリット
- 可読性が高い：HTMLに近い見た目で直感的に理解できる
- 柔軟性がある：JavaScriptの式を組み込める
- エラーが減る：JSXはコンパイル時にチェックされるのでタイプミスが早く見つかる
JSXのつまずきポイント
初心者（自分含め..）がよく混乱するポイントをまとめてみました！
1. class ではなく className を使う
NG例
<div class="container">Hello</div>OK例
<div className="container">Hello</div>2. 属性名はキャメルケース（onClick, tabIndex など）
NG例
<button onclick="handleClick()">Click</button>
<input tabindex="0" />OK例
<button onClick={handleClick}>Click</button>
<input tabIndex={0} />3. 複数要素を返すときは必ず親要素でラップする必要がある
NG例
return (
<h1>Hello</h1>
<p>World</p>
);OK例（divでラップ）
return (
<div>
<h1>Hello</h1>
<p>World</p>
</div>
);OK例（Fragmentでラップ）
return (
<>
<h1>Hello</h1>
<p>World</p>
</>
);4. 自己終了タグが必要
NG例
<img src="logo.png">
<br>OK例
<img src="logo.png" />
<br />5. JavaScript式を文字列として書いてしまう
NG例
const name = "React";
<p>"{name}"</p>OK例
const name = "React";
<p>{name}</p>まとめ｜JSXを理解するとReactが一気に書きやすくなる
JSXはReactの基礎ですが、HTMLと似ているからこそ混乱しやすい部分です！
ポイントは、「JSXはHTMLではなく、JavaScriptの拡張構文」 という意識を持つこと。
- 見た目はHTMLっぽい
- 実態はJavaScriptに変換されている
- 書き方はHTMLと少し違う（className, onClick, {} など）
これさえ押さえれば、Reactのコードがぐっと読みやすくなるはずです！
JSXは、Facebook社がReactのために作った構文拡張（シンタックス拡張）になります