条件付きレンダリング(出し分け)

「今の状態」で見せるものを変える

画面は常に同じものを見せているわけではありません。読み込み中はスピナー、ログイン済みならユーザー名、未ログインならログインボタン。こうした「状態によって表示を出し分ける」ことを条件付きレンダリングと呼びます。JSX の中では if 文を直接書けないので、JavaScript の式である && や三項演算子を使います。

まずは「条件が真のときだけ表示する」パターン。論理積 && を使います。左が true のときだけ右の JSX が描画され、false のときは何も表示されません。

function Panel({ isLoading }: { isLoading: boolean }) {
  return (
    <div>
      {isLoading && <Spinner />}
      <p>本文</p>
    </div>
  );
}

次は「A か B のどちらかを出す」パターン。三項演算子 条件 ? A : B を使います。条件が true なら A、false なら B が描画されます。ログイン状態での出し分けが典型例です。

function Header({ isLoggedIn }: { isLoggedIn: boolean }) {
  return (
    <header>
      {isLoggedIn ? <p>ようこそ!</p> : <button>ログイン</button>}
    </header>
  );
}

{count && <Badge count={count} />}

{count > 0 && <Badge count={count} />}

• 条件が真のときだけ出す → 条件 && <要素 />
• AかBのどちらかを出す → 条件 ? <A /> : <B />
• JSX の {} には「式」しか置けないので if 文は使えない
• && の左は数値でなく比較(> 0 など)にして 0 の表示を防ぐ