React JSX における式

JSX の最も強力な機能の一つは、マークアップの中に JavaScript の式を直接埋め込めることです。

1. 式 (Expressions)

有効な JavaScript 式であれば、波括弧 { } で囲むことで JSX 内に挿入できます。
React はその式を評価（エボリューション）し、その結果を DOM にレンダリングします。

1.1 計算式の実行例

以下の例では、式 218 * 1.36 を実行しています。

function Car() {
  return (
    <>
      <h1>私の車</h1>
      <p>この車は {218 * 1.36} 馬力です</p>
    </>
  );
}

2. 変数 (Variables)

変数も有効な式として扱われます。波括弧 { } でラップすることで JSX 内に変数値を挿入できます。

2.1 JSX 内での変数の使用

function Car() {
  const hp = 218 * 1.36;
  return (
    <>
      <h1>私の車</h1>
      <p>この車は {hp} 馬力です</p>
    </>
  );
}

3. 関数呼び出し (Function Calls)

関数呼び出しも有効な式です。波括弧 { } を使用して、JSX 内で関数を実行しその戻り値を表示できます。

3.2 JSX 内での関数の実行

function kwtohp(kw) {
  return kw * 1.36;
}

function Car() {
  return (
    <>
      <h1>私の車</h1>
      <p>この車は {kwtohp(218)} 馬力です</p>
    </>
  );
}

4. オブジェクトのプロパティ (Object Properties)

JSX 内でオブジェクトのプロパティに直接アクセスすることも可能です。

4.1 オブジェクトプロパティの参照例

function Car() {
  const myobj = {
    name: "フィアット",
    model: "500",
    color: "ホワイト"
  };
  return (
    <>
      <h1>私の車は {myobj.color} の {myobj.name} {myobj.model} です</h1>
    </>
  );
}