React JSX における If 文の扱い

1. 条件分岐 - if 文

React は if 文をサポートしていますが、JSX の内部（Inside）で直接使用することはできません。

JSX 内で条件付きロジックを扱うには、if 文を JSX の外側に記述するか、あるいは JSX 内部で三項演算子（Ternary expression）を使用するという 2 つのアプローチがあります。

1.1 オプション 1：JSX の外側で if 文を使用する

JSX コードを返す前に、JavaScript の標準的な if 文を使って変数の値を決定する方法です。

実装例

変数 x が 10 未満の場合は「バナナ（Banana）」を表示し、それ以外の場合は「リンゴ（Apple）」を表示する例：

function Fruit() {
  const x = 5;
  let y = "リンゴ";

  // if 文は JSX の return の外側で実行する
  if (x < 10) {
    y = "バナナ";
  }

  return (
    <h1>{y}</h1>
  );
}

2. オプション 2：三項演算子の活用

JSX の内部でインラインに条件分岐を記述したい場合は、三項演算子を使用するのが一般的です。

2.1 実装例

同じロジックを三項演算子で記述すると、コードはより簡潔になります。

function Fruit() {
  const x = 5;
  return (
    <h1>{(x) < 10 ? "バナナ" : "リンゴ"}</h1>
  );
}

JSX 内に JavaScript の式を埋め込むには、そのコードを必ず波括弧 {} で囲む必要がある点に注意してください。このルールにより、マークアップの中に動的なロジックをシームレスに統合することが可能になります。