C
React 一覧
前へ2 / 22次へ
React/はじめに/Lesson 02

JSX 構文

25分·theory
このチャプター
2/2
JavaScript

JSX 構文

💡 なぜ学ぶ必要があるのか？

🎯 ReactでWebサイトを構築するために必須の文法です。
💼 HTMLとJavaScriptを混在させて書けるため、学びやすいです。
⚡ すべてのReact開発者が毎日使う基本スキルです。
🏢 실무에서는
実務では、JSXを使ってボタン、フォーム、カードといったUIを作成します。例えば、ECサイトの開発者はJSXで商品一覧画面を記述し、それをJavaScriptコードにコンパイルしてブラウザに表示します。

JSX とは？— HTML に見える JavaScript

JSX は、JavaScript の中で HTML のように UI を記述するための構文です。

jsx
// これがJSX — HTMLではないJavaScriptコードです！
const element = <h1>こんにちは！</h1>;

ブラウザは JSX を解釈できないため、Vite/Webpack が自動的に変換します：

js
// 実際にこのように変換されます（私たちが見る必要はありません）
const element = React.createElement('h1', null, 'こんにちは！');

> 💡 「HTML のように書けばよいもの」として理解すれば十分です。

JSX で JavaScript を使う — 波括弧 {}

JSX内でJavaScriptの式を使うには、波括弧 {} を使います。

jsx
const name = "ホン・ギルドン";
const age = 25;

// {} の中にJSの値/式を入れる
return (
  <div>
    <h1>こんにちは、{name}さん！</h1>
    <p>年齢: {age}歳</p>
    <p>来年の年齢: {age + 1}歳</p>
    <p>成人かどうか: {age >= 18 ? "成人" : "未成年"}</p>
  </div>
);
💻 JSX ルール一覧 
// ✅ 1. 必ず一つの親タグで囲む
return (
  <div>          {/* 親タグ */}
    <h1>タイトル</h1>
    <p>内容</p>
  </div>
);

// ✅ 2. class → className (classはJSの予約語)
return <div className="container">内容</div>;

// ✅ 3. 自己閉じタグは / が必須
return <img src="photo.jpg" />;   // HTMLでは/>がなくてもよいが、JSXでは必須

// ✅ 4. スタイルはオブジェクトで
return (
  <h1 style={{ color: 'red', fontSize: '24px' }}>
    赤いタイトル
  </h1>
);

⚛️ React パターン — JSX 構文

JSX 構文が React でどのように使われるか、コードと一緒にステップごとに学びましょう。
1 🧩 1. JSX 構文の使用シナリオ
この機能が必要な場面。
↓
2 💻 2. コードを書く
JSX 構文の基本的な使い方。
↓
3 🎨 3. レンダリング結果
ユーザーが見る画面。
↓
4 💡 4. 実務のヒント
よくある落とし穴とベストプラクティス。

🎮 JSX 構文 — ステップごとに理解する

各ステップをクリックして内容を読み、✓ 理解した ボタンで進捗を確認してください。
🖥️ 実行結果 — レンダリングされたReactコンポーネント
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — まず結果を確認し、エディタで自由に編集できます。

確認クイズ

JSX で CSS クラスを指定する正しい方法は？
💡 JSXでは、`class`の代わりに`className`を使う必要があります。`class`はJavaScriptの予約語（クラス宣言キーワード）であるため、属性名として使用できないためです。
先に読むとよい概念: Reactの紹介
次のおすすめ: コンポーネントの基礎
前へ一覧次へ
JSX 構文 - React