JSXの書き方：React開発の第一歩

2025-08-07

JSX（JavaScript XML）はReactの核となる構文で、JavaScript内にHTMLのようなマークアップを直接記述できるようにします。これにより、UIの構造を直感的に表現できるようになります。Reactを学び始めるにあたり、JSXの基本をしっかり理解することは非常に重要です。

JSXの基本概念

JSXとは何か？

JSXはJavaScriptの構文拡張で、以下のような特徴があります：

  • HTMLに似た構文でUIを記述できる
  • 実際にはJavaScriptに変換（トランスパイル）されて実行される
  • React要素（React Element）を生成する
const element = <h1>Hello, world!</h1>;

この例では、見た目はHTMLのようですが、実際にはJavaScriptのコードです。Babelなどのトランスパイラがこのコードを通常のJavaScriptに変換します。

JSXがなぜ必要なのか？

  1. 視覚的なわかりやすさ：UIの構造をコード上で直感的に理解できる
  2. 開発効率の向上：HTMLとJavaScriptを分離せずに記述できる
  3. Reactの機能をフル活用：Reactの仮想DOMと密接に連携する

JSXの基本的な書き方

基本的な要素のレンダリング

最も単純なJSXの例を見てみましょう：

const greeting = <h1>こんにちは、Reactの世界へ！</h1>;

ReactDOM.render(
  greeting,
  document.getElementById('root')
);

このコードは、「こんにちは、Reactの世界へ！」という見出しを表示します。

JSXの構文規則

  1. 単一のルート要素：
    JSXは常に1つのルート要素で囲む必要があります。
// 正しい例
const element = (
  <div>
    <h1>タイトル</h1>
    <p>本文</p>
  </div>
);

// 誤った例（複数のトップレベル要素）
const element = (
  <h1>タイトル</h1>
  <p>本文</p>
);

React 16.2以降ではFragment（<>...</>）を使用して不要なdivを避けられます。

   const element = (
     <>
       <h1>タイトル</h1>
       <p>本文</p>
     </>
   );
  1. タグの閉じ忘れに注意：
    HTMLとは異なり、JSXではすべてのタグを明示的に閉じる必要があります。
  // 正しい例
  <img src="image.jpg" alt="説明" />
  <br />
  <div></div>

  // 誤った例
  <img src="image.jpg" alt="説明">
  <br>
  1. classNameの使用：
    HTMLのclass属性は、JSXではclassNameとして記述します。
  // 正しい例
  <div className="container">...</div>

  // 誤った例
  <div class="container">...</div>
  1. インラインスタイル：
    スタイルをオブジェクト形式で記述します。プロパティ名はキャメルケースになります。
const style = {
  color: 'blue',
  fontSize: '20px', // ハイフン付きプロパティ名はキャメルケースに
  backgroundColor: '#f0f0f0' // 背景色もキャメルケース
};

<div style={style}>スタイル付き要素</div>

// または直接記述
<div style={{ color: 'red', padding: '10px' }}>インラインスタイル</div>

JSX内でのJavaScript式の埋め込み

JSX内でJavaScriptの式を実行するには、中括弧{}を使用します。

変数の表示

const name = '山田太郎';
const element = <p>こんにちは、{name}さん！</p>;

式の評価

const a = 5;
const b = 10;
const element = (
  <p>
    {a} + {b} = {a + b}
  </p>
);
// 結果: "5 + 10 = 15" と表示

関数の実行

function formatName(user) {
  return `${user.lastName} ${user.firstName}`;
}

const user = {
  firstName: '太郎',
  lastName: '山田'
};

const element = (
  <p>こんにちは、{formatName(user)}さん！</p>
);
// 結果: "こんにちは、山田 太郎さん！" と表示

条件付きレンダリング

JSX内でif文は直接使えませんが、三項演算子や論理AND演算子を使用できます。

const isLoggedIn = true;

const element = (
  <div>
    {isLoggedIn ? (
      <p>ようこそ、ユーザーさん！</p>
    ) : (
      <p>ログインしてください</p>
    )}
  </div>
);

または：

const unreadMessages = ['メッセージ1', 'メッセージ2'];

const element = (
  <div>
    <h1>メッセージボックス</h1>
    {unreadMessages.length > 0 && (
      <p>未読メッセージが{unreadMessages.length}件あります</p>
    )}
  </div>
);

JSXでのリストレンダリング

配列をリストとして表示するには、map()メソッドを使用します。

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) => (
  <li key={number.toString()}>{number}</li>
));

const element = <ul>{listItems}</ul>;

key属性の重要性

リストをレンダリングする際、各項目に一意のkey属性を指定する必要があります。これによりReactはどの項目が変更、追加、削除されたかを効率的に判断できます。

const todos = [
  { id: 1, text: 'Reactを学ぶ' },
  { id: 2, text: 'プロジェクトを作成' },
  { id: 3, text: 'デプロイする' }
];

const todoList = todos.map((todo) => (
  <li key={todo.id}>{todo.text}</li>
));

JSXの注意点

HTMLとの違い

  1. 属性名の違い：
  • class → className
  • for → htmlFor
  • tabindex → tabIndex
  1. スタイルの記述方法：
    CSSプロパティ名はキャメルケースで、値は文字列として記述します。
<div style={{ marginTop: '10px', paddingLeft: '20px' }}>...</div>

インジェクション攻撃の防止

JSXは自動的にXSS（クロスサイトスクリプティング）攻撃を防ぎます。すべての値はレンダー前にエスケープされます。

const userInput = '<script>alert("危険！")</script>';

// 安全 - スクリプトは実行されず、テキストとして表示される
const element = <div>{userInput}</div>;

コメントの書き方

JSX内でのコメントは特殊な構文です：

const element = (
  <div>
    {/* これはJSX内のコメントです */}
    <h1>タイトル</h1>
    {
      // これも有効なコメント
    }
  </div>
);

実践的なJSXの例

シンプルなプロフィールカード

const profile = {
  name: '佐藤花子',
  age: 28,
  hobbies: ['読書', '旅行', '写真'],
  isPremium: true
};

const ProfileCard = () => (
  <div className="profile-card" style={{ border: '1px solid #ccc', padding: '20px', borderRadius: '8px' }}>
    <h2>{profile.name}</h2>
    <p>年齢: {profile.age}歳</p>
    <div>
      <h3>趣味:</h3>
      <ul>
        {profile.hobbies.map((hobby, index) => (
          <li key={index}>{hobby}</li>
        ))}
      </ul>
    </div>
    {profile.isPremium && <p className="premium">プレミアム会員</p>}
  </div>
);

天気表示コンポーネント

const weatherData = {
  city: '東京',
  temp: 22,
  condition: '晴れ',
  forecast: [
    { day: '月', temp: 22 },
    { day: '火', temp: 24 },
    { day: '水', temp: 19 }
  ]
};

const WeatherDisplay = () => (
  <div className="weather">
    <h1>{weatherData.city}の天気</h1>
    <p>現在の気温: {weatherData.temp}°C</p>
    <p>状態: {weatherData.condition}</p>

    <h2>週間予報</h2>
    <div className="forecast">
      {weatherData.forecast.map((dayData, index) => (
        <div key={index} className="forecast-day">
          <p>{dayData.day}曜日</p>
          <p>{dayData.temp}°C</p>
        </div>
      ))}
    </div>
  </div>
);

JSXのよくある間違いとデバッグ

よくあるエラーと解決方法

  1. Unexpected tokenエラー：
  • 原因：HTMLタグが正しく閉じられていない
  • 解決法：すべてのタグを閉じる
  1. Adjacent JSX elementsエラー：
  • 原因：複数のトップレベル要素がある
  • 解決法：Fragmentまたはdivで囲む
  1. ‘className’ is not definedエラー：
  • 原因：classを使用している
  • 解決法：classNameに変更

JSXのデバッグ方法

  1. コンソールログ：
   console.log(element); // React要素を確認
  1. Babel REPL：
    JSXがどのようなJavaScriptに変換されるか確認できます（https://babeljs.io/repl）
  2. React Developer Tools：
    Chrome拡張をインストールして、Reactコンポーネントツリーを検査

まとめ：JSXの重要なポイント

  1. JSXはJavaScriptの構文拡張で、UIを直感的に記述できる
  2. HTMLと似ているが、いくつかの重要な違いがある（className、スタイル記述など）
  3. JavaScriptの式を{}で囲んで埋め込める
  4. リストをレンダリングする際はkeyプロパティが必須
  5. 常に単一のルート要素で囲む必要がある（Fragmentが便利）
  6. ReactはJSXを自動的にエスケープ処理するため、XSS攻撃から保護される

JSXはReact開発の基礎であり、最初は慣れが必要ですが、一度理解すれば非常に強力なツールとなります。次のステップでは、このJSXを使ってコンポーネントを作成する方法を学びましょう。

同じカテゴリーの記事