switch文での分岐

switch 文は、複数の状態に応じて異なる内容を表示する場合に便利です。特に状態が列挙型（enum）や定数のように明確に分けられる場合に有効です。

✅ 基本構文

type Status = "success" | "error" | "loading" | "idle";

export const StatusMessage = ({ status }: { status: Status }) => {
  let message;

  switch (status) {
    case "success":
      message = "成功しました！";
      break;
    case "error":
      message = "エラーが発生しました。";
      break;
    case "loading":
      message = "読み込み中です...";
      break;
    default:
      message = "待機中です。";
  }

  return 
<p>{message}</p>;
};

🧠 コンポーネントの分岐表示にも使える

type Step = "input" | "confirm" | "complete";

const InputForm = () => 
<div>入力画面</div>;
const ConfirmScreen = () => 
<div>確認画面</div>;
const CompletionMessage = () => 
<div>完了しました！</div>;

export const Stepper = ({ step }: { step: Step }) => {
  switch (step) {
    case "input":
      return <InputForm />;
    case "confirm":
      return <ConfirmScreen />;
    case "complete":
      return <CompletionMessage />;
    default:
      return 
<p>無効なステップです</p>;
  }
};

⚠️ 注意点

• switch 文は JSX 内で直接使えないため、return 前に処理するか、コンポーネントの return に直接書く必要があります。
• break を忘れると fall-through（次のケースへ続行）するため注意が必要です。
• 条件が多数ある場合や明示的に全てを網羅したい場合に便利。

✅ まとめ

• 状態が限定的で列挙できる場合、switch が読みやすい。
• if や三項演算子よりも複雑なロジックの分岐に向いている。