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

2025-08-07

はじめに

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

JSXの基本概念

JSXはJavaScriptの構文拡張で、HTMLのようにUIを記述できる。式を埋め込める柔軟性があり、Reactでの画面構築を直感的かつ効率的に行えます。

JSXとは何か？

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

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

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

JSXがなぜ必要なのか？

JSXが必要とされる理由は、まずUIの構造をコード上で直感的に理解できるという視覚的なわかりやすさにあります。また、HTMLとJavaScriptを分離せずに一体として記述できるため、開発効率の向上にもつながります。さらに、Reactの仮想DOMと密接に連携することで、Reactの機能を最大限に活用できる点も大きな利点です。

JSXの基本的な書き方

JSXはHTMLに似た記法で要素を記述し、JavaScriptの式は{}で埋め込む。classNameなど独自属性を使い、要素は単一のルートで囲む必要があります。

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

最も単純な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の式を実行するには、中括弧{}を使用します。

変数の表示

JSXではHTML風の記述の中に、{}を使ってJavaScriptの変数や式を埋め込めるため、動的に内容を表示できるのが特徴です。

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

式の評価

JSXでは{}内にJavaScriptの式を記述でき、変数だけでなく計算結果もそのまま画面に動的に表示できるのが特徴です。

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

関数の実行

JSXでは{}内に関数呼び出しも記述でき、関数の戻り値を使って表示内容を動的に生成できるのが特徴です。

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の注意点

JSXでは要素は必ず1つのルートで囲む必要があります。また、classNameなどHTMLと異なる記法に注意し、式は{}内に記述する点にも気をつけましょう。

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内でのコメントは特殊な構文です。HTMLのように直接コメントを書くのではなく、{/* コメント */}の形式で記述します。また、{}内であれば通常のJavaScriptコメント（//や/* */）も使用できます。

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

実践的なJSXの例

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

オブジェクトのデータをもとにプロフィールカードを表示するコンポーネントです。

{}を使って名前や年齢などのデータを埋め込み、map関数で趣味の配列をリスト表示しています。また、key属性で各要素を識別し、&&を使った条件付きレンダリングにより、プレミアム会員の場合のみ特定の表示を行っています。さらに、classNameやstyleを使って見た目の装飾も行っているのが特徴です。

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>
);

天気表示コンポーネント

天気情報を表示するコンポーネントです。オブジェクトのデータから都市名や現在の気温、天気の状態を{}で埋め込んで表示し、map関数を使って週間予報の配列を繰り返し描画しています。各要素にはkeyを設定し、classNameでスタイル指定を行うことで、構造的で見やすいUIを実現しているのが特徴です。

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のよくある間違いとデバッグ

JSXではタグの閉じ忘れや単一ルート未対応、classとclassNameの混同がよくある間違いです。エラー文を確認し、該当箇所を特定して修正することが重要です。

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

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

JSXのデバッグ方法

  1. コンソールログ

次はelementというReact要素の中身をコンソールに出力し、どのような構造になっているかを確認するためのデバッグ処理です。

   console.log(element); // React要素を確認
  1. Babel REPL

JSXがどのようなJavaScriptに変換されるか確認できます。（https://babeljs.io/repl）

  1. React Developer Tools

Chrome拡張をインストールして、Reactコンポーネントツリーを検査できます。

まとめ

JSXは、UIを直感的に記述できるJavaScriptの構文拡張であり、React開発の基礎となる技術です。見た目はHTMLに似ていますが、classNameの使用やスタイル記述方法などいくつかの違いがあります。また、{}を使ってJavaScriptの式を埋め込める点が特徴で、リストを描画する際にはkeyプロパティが必要です。さらに、要素は常に単一のルートで囲む必要があり、その際にはFragmentが便利に使えます。加えて、JSXは自動的にエスケープ処理が行われるため、XSS攻撃への対策も施されています。最初は慣れが必要ですが、一度理解すれば非常に強力であり、次のステップではこれを用いたコンポーネント作成へと進みます。

同じカテゴリーの記事