React 条件付きレンダリング

React では、条件に応じてコンポーネントをレンダリング（Conditional Rendering）することができます。
これにはいくつかの手法が存在します。

1. if 文 (if Statement)

JavaScript の if ステートメントを使用して、どのコンポーネントをレンダリングするかを決定できます。

1.1 使用するコンポーネントの定義

まず、以下の 2 つのコンポーネントを用意します。

function MissedGoal() {
  return <h1>ミス！</h1>;
}

function MadeGoal() {
  return <h1>ゴール！</h1>;
}

1.2 条件分岐コンポーネントの作成

次に、条件に基づいてレンダリングするコンポーネントを選択する別のコンポーネントを作成します。

function Goal(props) {
  const isGoal = props.isGoal;
  if (isGoal) {
    return <MadeGoal/>;
  }
  return <MissedGoal/>;
}

// root 要素にレンダリング（isGoal が false の場合）
createRoot(document.getElementById('root')).render(
  <Goal isGoal={false} />
);

isGoal 属性を true に変更して、結果を確認してみてください。

createRoot(document.getElementById('root')).render(
  <Goal isGoal={true} />
);

2. 論理 AND 演算子 (&&)

React コンポーネントを条件付きでレンダリングするもう一つの方法は、&& 演算子を使用することです。
以下の例では、props.brand プロパティが空でない場合のみ、見出し（h1）がレンダリングされます。

2.1 ショートサーキット評価によるレンダリング

&& の左側が真（true）である場合にのみ、右側がレンダリングされます。

function Car(props) {
  return (
    <>
      {props.brand && <h1>私の車は {props.brand} です！</h1>}
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Car brand="フォード" />
);

props.brand が true と評価される場合、&& の後の式がレンダリングされます。
brand プロパティを空にして試してみましょう。

createRoot(document.getElementById('root')).render(
  <Car />
);

3. 三項演算子 (Ternary Operator)

要素を条件付きでレンダリングするもう一つの方法は、三項演算子を使用することです。
構文：条件 ? 真の場合の処理 : 偽の場合の処理

3.1 ゴールの例を三項演算子で書き換える

isGoal が true であれば MadeGoal コンポーネントを返し、そうでなければ MissedGoal コンポーネントを返します。

function Goal(props) {
  const isGoal = props.isGoal;
  return (
    <>
      { isGoal ? <MadeGoal/> : <MissedGoal/> }
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Goal isGoal={false} />
);