JSXの基本

JSXとは？

JSX（JavaScript XML）は、JavaScriptの中にHTMLのような構文を書ける Reactの拡張構文です。ブラウザはJSXを直接理解できませんが、Babelなどのツールが通常のJavaScriptに変換してくれます。

JSXを使うと、UIの構造を直感的に表現できます。HTMLとよく似ていますが、いくつかの重要な違いがあります。

• class の代わりに className を使う
• for の代わりに htmlFor を使う
• すべてのタグは閉じる必要がある（例：<br />）
• JSXは1つのルート要素で囲む必要がある

JSXの基本構文

JSXはHTMLとほぼ同じ見た目ですが、JavaScript式を {} で埋め込むことができます。

function Greeting() {
  const name = "太郎";
  const age = 25;

  return (
    <div>
      <h1>こんにちは、{name}さん！</h1>
      <p>あなたは {age} 歳です。</p>
      <p>来年は {age + 1} 歳ですね。</p>
    </div>
  );
}

波括弧 {} の中には、変数、関数呼び出し、計算式などあらゆるJavaScript式を書くことができます。

JavaScript式の埋め込み

JSXの {} 内では、さまざまなJavaScript式を利用できます。

function Expressions() {
  const items = ["りんご", "バナナ", "みかん"];
  const price = 150;
  const isLoggedIn = true;

  return (
    <div>
      {/* 文字列の結合 */}
      <p>{"Hello, " + "World!"}</p>

      {/* 三項演算子 */}
      <p>{isLoggedIn ? "ログイン中" : "未ログイン"}</p>

      {/* メソッド呼び出し */}
      <p>フルーツ: {items.join("、")}</p>

      {/* 計算式 */}
      <p>税込: {Math.floor(price * 1.1)}円</p>

      {/* テンプレートリテラル */}
      <p>{`合計 ${items.length} 種類のフルーツ`}</p>
    </div>
  );
}

注意：if 文やfor 文は「式」ではなく「文」なので、 JSXの波括弧の中に直接書くことはできません。代わりに三項演算子や map() を使います。

フラグメント（Fragment）

JSXでは1つのルート要素が必要ですが、余分な <div> を 増やしたくない場合があります。そんなときはフラグメントを使います。

import { Fragment } from "react";

// 方法1: <Fragment> を使う
function Method1() {
  return (
    <Fragment>
      <h1>タイトル</h1>
      <p>説明文</p>
    </Fragment>
  );
}

// 方法2: 省略記法 <> を使う（よく使う）
function Method2() {
  return (
    <>
      <h1>タイトル</h1>
      <p>説明文</p>
    </>
  );
}

// フラグメントは不要なDOMノードを作らずに
// 複数の要素をグループ化できます

条件付きレンダリング

条件に応じて異なるUIを表示する方法はいくつかあります。

function ConditionalRendering({ isLoggedIn, notifications }) {
  return (
    <div>
      {/* 方法1: 三項演算子 */}
      {isLoggedIn ? (
        <p>ようこそ！</p>
      ) : (
        <p>ログインしてください</p>
      )}

      {/* 方法2: && 演算子（条件がtrueの時だけ表示） */}
      {notifications > 0 && (
        <span>通知が {notifications} 件あります</span>
      )}

      {/* 方法3: 早期return（コンポーネント全体を分岐） */}
      {/* → 別のコンポーネントで使うパターン */}
    </div>
  );
}

// 方法3の例：早期return
function UserProfile({ user }) {
  if (!user) {
    return <p>ユーザーが見つかりません</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

JSXでのスタイル適用

JSXでスタイルを適用する方法を確認しましょう。

function StyledComponent() {
  // インラインスタイル（オブジェクトで指定）
  const headerStyle = {
    color: "blue",
    fontSize: "24px",       // キャメルケースで書く
    backgroundColor: "#f0f0f0",
    padding: "16px",
  };

  return (
    <div>
      {/* className でCSSクラスを適用 */}
      <h1 className="title main-title">タイトル</h1>

      {/* インラインスタイル */}
      <h2 style={headerStyle}>スタイル付きヘッダー</h2>

      {/* インラインで直接書くことも可能 */}
      <p style={{ color: "red", fontWeight: "bold" }}>
        赤い太字テキスト
      </p>

      {/* 動的なクラス名 */}
      <div className={`card ${isActive ? "active" : ""}`}>
        動的クラス
      </div>
    </div>
  );
}

インラインスタイルはJavaScriptオブジェクトで指定し、CSSプロパティ名はキャメルケース （font-size →fontSize）に変換します。

まとめ

• JSXはJavaScriptの中にHTMLライクな構文を書ける仕組み
• 波括弧 {} でJavaScript式を埋め込める
• フラグメント <></> で余分なDOM要素なしにグループ化
• 三項演算子や && で条件付きレンダリング
• className と style でスタイルを適用