JSX（JavaScript XML）は、Reactで使われる特殊な記法です。HTMLによく似ていますが、JavaScriptの中で直接HTMLのようなコードを書くことができます。このレッスンでは、プログラミング初心者の方にもわかりやすく、JSXの基本的な書き方とルールを説明します。

JSXとは何か

JSXは、JavaScriptの拡張構文で、HTMLのように見えるコードをJavaScriptの中に書くことができます。これにより、Webページの見た目を直感的にコードで表現できます。

💡 JSXの読み方

JSXは「ジェイエスエックス」と読みます。JavaScript XMLの略称ですが、XMLよりもHTMLに近い記法です。

📝 簡単な例

const element = <h1>こんにちは、世界！</h1>;

このコードが表示される結果：

こんにちは、世界！

💡 コードの構造：

const element：JSX要素を保存する変数
<h1>：見出しタグ（HTMLと同じ）
こんにちは、世界！：表示されるテキスト

これはJSXの最も簡単な例です。HTMLのように見えますが、実際にはJavaScriptのコードです。

📚 例題

以下の例題に挑戦して、JSXの基本を理解しましょう。各例題のコードを実際に書いて、どのように表示されるか確認してください。

例題1: 自己紹介のJSX

あなたの名前を表示するJSX要素を作成してください。h2タグを使って「こんにちは、[あなたの名前]です」と表示するコードを書いてみましょう。

const introduction = <h2>こんにちは、山田太郎です</h2>;

表示結果：

こんにちは、山田太郎です

例題2: パラグラフタグのJSX

好きな言葉やメッセージをpタグ（段落）で表示するJSX要素を作成してください。「Reactを学んでいます」というメッセージを表示してみましょう。

const message = <p>Reactを学んでいます</p>;

表示結果：

Reactを学んでいます

例題3: 複数の要素

divタグを使って、h1タグとpタグを1つの要素にまとめてください。タイトルと説明文を含むJSXを作成しましょう。

const content = (
  <div>
    <h1>React学習</h1>
    <p>JSXの基礎を学んでいます</p>
  </div>
);

表示結果：

React学習

JSXの基礎を学んでいます

💡 ポイント：

<div>タグで複数の要素を1つにまとめています。JSXでは1つの要素しか返せないため、このようにdivで囲む必要があります。

JSXの基本的な書き方

JSXはHTMLとよく似ていますが、いくつか重要な違いがあります。まずは、基本的な書き方を見ていきましょう。

✅ 基本的な例

const Greeting = () => {
  return <h1>こんにちは！</h1>;
}

このコードは、"こんにちは！"という文字列を表示するh1タグを返します。

※ 関数の中でJSXを返す場合、returnキーワードの後にJSXを書きます。

📚 例題

以下の例題で、関数コンポーネントとJSXの基本的な書き方を練習しましょう。

例題1: 挨拶コンポーネント

「おはようございます」と表示するGreetingコンポーネントを作成してください。

const Greeting = () => {
  return <h1>おはようございます</h1>;
}

表示結果：

おはようございます

例題2: 説明コンポーネント

pタグを使って「今日は良い天気です」という説明文を返すDescriptionコンポーネントを作成してください。

const Description = () => {
  return <p>今日は良い天気です</p>;
}

表示結果：

今日は良い天気です

例題3: カードコンポーネント

divタグの中にh2タグとpタグを含むCardコンポーネントを作成してください。タイトルと本文を表示する構造にしましょう。

const Card = () => {
  return (
    <div>
      <h2>カードタイトル</h2>
      <p>カードの内容です</p>
    </div>
  );
}

表示結果：

カードタイトル

カードの内容です

JSXの重要なルール

ルール1: 1つの要素を返す

JSXは必ず1つの親要素で囲む必要があります。複数の要素を返したい場合は、<div>や<>（フラグメント）で囲みます。

❌ 間違った例

return (
  <h1>タイトル</h1>
  <p>説明</p>
);

エラー：複数の要素を返そうとしているため、エラーが発生します。JSXでは1つの親要素で囲む必要があります。

✅ 正しい例

return (
  <div>
    <h1>タイトル</h1>
    <p>説明</p>
  </div>
);

ポイント：<div>で複数の要素を1つにまとめています。これで正しく動作します。

ルール2: classNameを使う

HTMLではclass属性を使いますが、JSXではclassNameを使います（classはJavaScriptの予約語のため）。

❌ 間違った例

<div class="container">...</div>

エラー：JSXではclassは使用できません。JavaScriptの予約語のため、classNameを使う必要があります。

✅ 正しい例

<div className="container">...</div>

ポイント：classNameを使うことで、正しくスタイルが適用されます。

ルール3: 閉じタグが必要

JSXでは、すべてのタグを閉じる必要があります。<br>や<img>のような自己終了タグも、<br />や<img />のように書きます。

❌ 間違った例

<br>
<img src="image.jpg">

エラー：JSXではすべてのタグを閉じる必要があります。<br>や<img>のような自己終了タグも、必ず/>で閉じる必要があります。

✅ 正しい例

<br />
<img src="image.jpg" />

ポイント：自己終了タグは/>で閉じることで、正しく動作します。

ルール4: 属性名はキャメルケース

HTML属性の一部は、JSXではキャメルケース（単語の最初を大文字にする）で書きます。例: tabindex → tabIndex, onclick → onClick

❌ 間違った例

<div tabindex="0">...</div>

エラー：HTMLではtabindexですが、JSXではtabIndexのようにキャメルケース（大文字で始まる単語）で書く必要があります。

✅ 正しい例

<div tabIndex="0">...</div>

ポイント：JSXでは属性名をキャメルケースで書くことで、正しく動作します。他にもonclick → onClick、onchange → onChangeなどがあります。

変数や式の埋め込み

JSXの中では、中括弧 { } を使って、JavaScriptの変数や式を埋め込むことができます。

📝 変数を埋め込む

const Welcome = () => {
  const name = "太郎";
  return <h1>こんにちは、{name}さん！</h1>;
}

表示結果：

こんにちは、太郎さん！

💡 ポイント：

{name}の部分で、変数nameの値（"太郎"）が表示されます。

このコードは、"こんにちは、太郎さん！"と表示します。

📝 式を埋め込む

const Calculation = () => {
  const a = 5;
  const b = 3;
  return <p>{a} + {b} = {a + b}</p>;
}

表示結果：

5 + 3 = 8

💡 ポイント：

{a + b}のように、中括弧内で計算式を書くと、計算結果が表示されます。

このコードは、"5 + 3 = 8"と表示します。

📚 例題

変数や式をJSXに埋め込む練習をしましょう。中括弧 { } を使って、動的な値を表示してみてください。

例題1: 年齢の表示

年齢を変数として定義し、「私は[年齢]歳です」と表示するコンポーネントを作成してください。年齢は20として定義しましょう。

const AgeDisplay = () => {
  const age = 20;
  return <p>私は{age}歳です</p>;
}

実際の表示結果

年齢:

私は20歳です

💡 上のコードを実行すると、このように変数の値が表示されます。年齢を変更して、表示が更新されることを確認してみましょう！

例題2: 計算結果の表示

2つの数値（10と5）を定義し、その掛け算の結果を表示するコンポーネントを作成してください。「10 × 5 = 50」のように表示しましょう。

const Multiplication = () => {
  const num1 = 10;
  const num2 = 5;
  return <p>{num1} × {num2} = {num1 * num2}</p>;
}

実際の表示結果

数値1:

数値2:

10 × 5 = 50

💡 上のコードを実行すると、このように計算結果が表示されます。数値を変更して、計算結果が自動的に更新されることを確認してみましょう！

例題3: 文字列の連結

姓と名を別々の変数として定義し、フルネームを表示するコンポーネントを作成してください。姓は「山田」、名は「花子」としましょう。

const FullName = () => {
  const lastName = "山田";
  const firstName = "花子";
  return <h2>{lastName}{firstName}</h2>;
}

実際の表示結果

姓:

名:

山田花子

💡 上のコードを実行すると、このように変数を連結して表示されます。姓や名を変更して、表示が更新されることを確認してみましょう！

条件分岐（条件によって表示を変える）

JSXでは、条件によって表示内容を変えることができます。いくつかの方法があります。

📝 三項演算子を使う

const Greeting = () => {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn ? <h1>ようこそ！</h1> : <h1>ログインしてください</h1>}
    </div>
  );
}

isLoggedInがtrueの場合は「ようこそ！」、falseの場合は「ログインしてください」と表示します。

📝 &&演算子を使う

const Message = () => {
  const hasMessage = true;
  return (
    <div>
      {hasMessage && <p>メッセージがあります</p>}
    </div>
  );
}

hasMessageがtrueの場合のみ、<p>タグの内容が表示されます。

📚 例題

条件分岐を使って、条件に応じて異なる内容を表示するコンポーネントを作成してみましょう。

例題1: 時間帯による挨拶

時間帯（午前か午後か）を判定し、午前なら「おはようございます」、午後なら「こんにちは」と表示するコンポーネントを作成してください。isMorningという変数を使ってみましょう。

const TimeGreeting = () => {
  const isMorning = true;
  return (
    <div>
      {isMorning ? <h1>おはようございます</h1> : <h1>こんにちは</h1>}
    </div>
  );
}

実際の表示結果

午前

おはようございます

💡 上のコードを実行すると、このように条件によって表示が変わります。チェックボックスを切り替えて、表示が変わることを確認してみましょう！

例題2: エラーメッセージの表示

hasErrorという変数がtrueの場合のみ、「エラーが発生しました」というメッセージを表示するコンポーネントを作成してください。&&演算子を使いましょう。

const ErrorMessage = () => {
  const hasError = true;
  return (
    <div>
      {hasError && <p className="text-red-500">エラーが発生しました</p>}
    </div>
  );
}

実際の表示結果

エラーあり

エラーが発生しました

💡 上のコードを実行すると、このように条件によってメッセージが表示/非表示になります。チェックボックスを切り替えて、表示が変わることを確認してみましょう！

例題3: 点数に応じた評価

点数（score）が80以上なら「優秀」、60以上なら「合格」、それ以外なら「不合格」と表示するコンポーネントを作成してください。ネストした三項演算子を使ってみましょう。

const ScoreEvaluation = () => {
  const score = 85;
  return (
    <div>
      <p>点数: {score}点</p>
      <p>
        評価: {score >= 80 ? '優秀' : score >= 60 ? '合格' : '不合格'}
      </p>
    </div>
  );
}

実際の表示結果

点数:85点

点数: 85点

評価: 優秀

💡 上のコードを実行すると、このように点数によって評価が変わります。スライダーを動かして、点数を変えると評価が変わることを確認してみましょう！

リストの表示

配列のデータをリストとして表示する場合、mapメソッドを使います。各要素には、keyという属性を付ける必要があります。

📝 配列をリストとして表示

const FruitList = () => {
  const fruits = ["りんご", "バナナ", "オレンジ"];
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

このコードは、果物のリストを表示します。key属性は、Reactが要素を識別するために必要です。

⚠️ key属性について

key属性は、リストの各要素に一意の値を設定する必要があります。配列のインデックスを使うこともできますが、データにidがある場合は、それを使う方が推奨されます。

📚 例題

配列データをリストとして表示する練習をしましょう。mapメソッドとkey属性の使い方をマスターしてください。

例題1: 商品リスト

「パン」「牛乳」「卵」という商品名の配列を作成し、それらをリストとして表示するコンポーネントを作成してください。

const ProductList = () => {
  const products = ["パン", "牛乳", "卵"];
  return (
    <ul>
      {products.map((product, index) => (
        <li key={index}>{product}</li>
      ))}
    </ul>
  );
}

実際の表示結果

パン
牛乳
卵

💡 上のコードを実行すると、このようにリストが表示されます。商品を追加・削除して動作を確認してみましょう！

例題2: 番号付きリスト

「第1章」「第2章」「第3章」というタイトルの配列を作成し、番号と一緒に表示するコンポーネントを作成してください。各項目に番号も表示しましょう。

const ChapterList = () => {
  const chapters = ["第1章", "第2章", "第3章"];
  return (
    <ol>
      {chapters.map((chapter, index) => (
        <li key={index}>{chapter}: JSXの基礎</li>
      ))}
    </ol>
  );
}

実際の表示結果

第1章: JSXの基礎
第2章: JSXの基礎
第3章: JSXの基礎

💡 上のコードを実行すると、このように番号付きリストが表示されます。章を追加・削除して動作を確認してみましょう！

例題3: カードリスト

「React」「Vue」「Angular」というフレームワーク名の配列を作成し、それぞれをdivタグで囲んでカードのように表示するコンポーネントを作成してください。

const FrameworkList = () => {
  const frameworks = ["React", "Vue", "Angular"];
  return (
    <div>
      {frameworks.map((framework, index) => (
        <div key={index} className="card">
          <h3>{framework}</h3>
        </div>
      ))}
    </div>
  );
}

実際の表示結果

React

Vue

Angular

💡 上のコードを実行すると、このようにカード形式でリストが表示されます。フレームワークを追加・削除して動作を確認してみましょう！

まとめ

このレッスンでは、JSXの基礎を学びました。

JSXは、JavaScriptの中にHTMLのようなコードを書くための記法です
JSXは1つの親要素で囲む必要があります
class属性の代わりにclassNameを使います
すべてのタグを閉じる必要があります
中括弧 { } を使って、変数や式を埋め込めます
条件分岐やリスト表示もJSXで書けます

JSXの基本を理解したら、次のレッスンでコンポーネントの作成方法を学びましょう！

← 前のレッスン: 環境構築レッスン一覧に戻る次のレッスン: コンポーネントの作成 →