【JavaScript】switch 文の使い方｜break・default・複数 case・if 文との使い分け・オブジェクトマップまで解説

const fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("りんご");
    break;
  case "banana":
    console.log("バナナ");
    break;
  case "orange":
    console.log("みかん");
    break;
  default:
    console.log("不明な果物");
}
// 出力: りんご

const color = "red";

switch (color) {
  case "red":
    console.log("赤");    // 実行される
    // break がない!
  case "blue":
    console.log("青");    // これも実行される（フォールスルー）
    // break がない!
  case "green":
    console.log("緑");    // これも実行される
    break;
  default:
    console.log("不明");
}
// 出力: 赤 → 青 → 緑（3 つ全て実行される）

const day = "Saturday";

switch (day) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("平日");
    break;
  case "Saturday":
  case "Sunday":
    console.log("休日");
    break;
  default:
    console.log("不正な曜日");
}
// 出力: 休日

function getLabel(status) {
  switch (status) {
    case "active":   return "有効";
    case "inactive": return "無効";
    case "pending":  return "保留中";
    case "deleted":  return "削除済み";
    default:         return "不明";
  }
}

console.log(getLabel("active")); // "有効"

const score = 75;

switch (true) {
  case score >= 90:
    console.log("A 評価");
    break;
  case score >= 70:
    console.log("B 評価");
    break;
  case score >= 50:
    console.log("C 評価");
    break;
  default:
    console.log("D 評価");
}
// 出力: B 評価

// default を先頭に書くパターン（あまり一般的ではないが動作する）
switch (value) {
  default:
    console.log("デフォルト処理");
    break;
  case 1:
    console.log("値は 1");
    break;
  case 2:
    console.log("値は 2");
    break;
}
// 可読性のため default は最後に書くのが一般的

// NG: case 内の let がスコープを共有してエラー
// switch (action) {
//   case "create":
//     let message = "作成しました";  // エラーになる場合あり
//     break;
//   case "delete":
//     let message = "削除しました";  // 同じスコープで重複宣言
//     break;
// }

// OK: 各 case を {} で囲む
switch (action) {
  case "create": {
    const message = "作成しました";
    console.log(message);
    break;
  }
  case "delete": {
    const message = "削除しました";
    console.log(message);
    break;
  }
}

// switch で書く場合
function getLabel(status) {
  switch (status) {
    case "active":   return "有効";
    case "inactive": return "無効";
    case "pending":  return "保留中";
    default:         return "不明";
  }
}

// オブジェクトマップで書く場合（よりシンプル）
const STATUS_LABELS = {
  active:   "有効",
  inactive: "無効",
  pending:  "保留中",
};

function getLabel(status) {
  return STATUS_LABELS[status] ?? "不明";
}

// アクションに応じた処理を実行
const actions = {
  create: (data) => createItem(data),
  update: (data) => updateItem(data),
  delete: (data) => deleteItem(data),
};

function handleAction(action, data) {
  const handler = actions[action];
  if (handler) {
    handler(data);
  } else {
    console.error("不明なアクション:", action);
  }
}

function handleResponse(status) {
  switch (status) {
    case 200:
      return { ok: true, message: "成功" };
    case 400:
      return { ok: false, message: "リクエストが不正です" };
    case 401:
      return { ok: false, message: "認証が必要です" };
    case 403:
      return { ok: false, message: "アクセス権限がありません" };
    case 404:
      return { ok: false, message: "見つかりません" };
    case 500:
      return { ok: false, message: "サーバーエラー" };
    default:
      return { ok: false, message: `不明なエラー: ${status}` };
  }
}

document.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "ArrowUp":
      moveUp();
      break;
    case "ArrowDown":
      moveDown();
      break;
    case "ArrowLeft":
      moveLeft();
      break;
    case "ArrowRight":
      moveRight();
      break;
    case "Escape":
      closeModal();
      break;
  }
});

// React の useReducer で頻繁に使われるパターン
function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    case "RESET":
      return { ...state, count: 0 };
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
}

function getDaysInMonth(month) {
  switch (month) {
    case 2:
      return 28; // 簡略化（うるう年は別途処理）
    case 4: case 6: case 9: case 11:
      return 30;
    default:
      return 31;
  }
}