JavaScript switch文の書き方｜複数条件とif elseの使い分け

JavaScriptのswitch文とは、1つの式の値を複数の case と順に比べ、一致したところから処理を実行する条件分岐の構文です。 比較は ===（厳密等価）で行われ、break か return に出会うまで下の case へ処理が続きます。この2つの性質を押さえると、switch文のつまずきの大半は説明がつきます。

この記事では、基本の書き方に加えて、break を書かなかったときのフォールスルー、"1" と 1 が一致しない厳密等価、case 内の let 再宣言で出る SyntaxError を Node.js 22.22.2 で実際に再現し、直したコードを並べて示します。複数の case をまとめる書き方、switch (true) による範囲条件、関数内の return で抜ける書き方、そして if else・switch・オブジェクト／Map の使い分けを比較表にまとめました。

switch文の早見表

基本形は「case ごとに break か return で終える」「default を最後に書く」の2つです。

switch文の基本の書き方

// basic.js
const rank = "silver";

switch (rank) {
  case "gold":
    console.log("金");
    break;
  case "silver":
    console.log("銀");
    break;
  case "bronze":
    console.log("銅");
    break;
  default:
    console.log("一般");
}
// 銀

各部分の役割は次のとおりです。

case は上から順に評価され、一致するものが見つかった時点で以降の case の式は評価されません。次のコードで確かめられます。

function c(n) {
  console.log("  case評価", n);
  return n;
}
switch (2) {
  case c(1): break;
  case c(2): console.log("2に一致"); break;
  case c(3): break;
}

  case評価 1
  case評価 2
2に一致

case c(3) は評価されていません。よく一致する値を上に書くと、比較の回数が少なくて済みます。

default を書かず、どの case にも一致しなかった場合は、何も実行されずに switch文を抜けます。関数の中であれば戻り値は undefined です。

function noDefault(v) {
  switch (v) {
    case "a": return 1;
  }
}
console.log(noDefault("a"), noDefault("z")); // 1 undefined

つまずき1：breakを書かないと下のcaseまで実行される（フォールスルー）

switch文は、一致した case を「入口」として、break に出会うまで下へ処理を続けます。この動きをフォールスルーと呼びます。

再現コード

// fallthrough.js
function label(rank) {
  const out = [];
  switch (rank) {
    case "gold":
      out.push("金");
    case "silver":
      out.push("銀");
    case "bronze":
      out.push("銅");
    default:
      out.push("一般");
  }
  return out.join(",");
}
console.log(label("gold"));
console.log(label("silver"));
console.log(label("x"));

金,銀,銅,一般
銀,銅,一般
一般

"gold" を渡すと、case "gold" に一致したあと break がないため、"silver"・"bronze"・default の処理まで順に実行されています。エラーにはならず、結果だけが変わるので、出力を見て初めて気づくことが多い部分です。MDN の switch のページにも、break を省略すると次の case 節、さらには default 節へも実行が進むと説明されています。

修正版：breakで終える／returnで抜ける

// 修正版A：break で終える
function labelA(rank) {
  let result;
  switch (rank) {
    case "gold":
      result = "金";
      break;
    case "silver":
      result = "銀";
      break;
    case "bronze":
      result = "銅";
      break;
    default:
      result = "一般";
  }
  return result;
}

// 修正版B：関数内で return して抜ける
function labelB(rank) {
  switch (rank) {
    case "gold":
      return "金";
    case "silver":
      return "銀";
    case "bronze":
      return "銅";
    default:
      return "一般";
  }
}
console.log(labelB("gold"), labelB("silver"), labelB("x"));
// 金 銀 一般

switch文を関数にくるんで return で抜ける書き方（修正版B）がおすすめです。return は関数そのものを終えるので break が不要になり、書き忘れる箇所がなくなります。結果を入れる変数（let result）も要らなくなるため、行数も減ります。

わざとフォールスルーを使うとき

フォールスルーは仕様どおりの動きなので、意図して使うこともできます。次の例は「速達は通常料金に 300 を上乗せする」という関係を表しています。

function shippingFee(plan) {
  let fee = 0;
  switch (plan) {
    case "express":
      fee += 300;
      // falls through
    case "standard":
      fee += 500;
      break;
    case "pickup":
      fee = 0;
      break;
    default:
      throw new RangeError(`未対応の受け取り方法です: ${plan}`);
  }
  return fee;
}
console.log(shippingFee("express"), shippingFee("standard"), shippingFee("pickup"));
// 800 500 0

意図したフォールスルーには // falls through のコメントを添えると、読む人に「書き忘れではない」と伝わります。ESLint の no-fallthrough ルールは、このコメントがある箇所を意図的なものとして扱います（ESLint での確認は今回は未実行です）。

つまずき2："1" と 1 は一致しない（厳密等価）

switch文の比較は == ではなく === です。MDN にも、入力式と同じ値に評価される最初の case を厳密等価の比較で探すと書かれています。型が違うと一致しません。

再現コード

// strict.js
function check(v) {
  switch (v) {
    case 1:
      return "一致";
    default:
      return "不一致";
  }
}
console.log(check(1));     // 一致
console.log(check("1"));   // 不一致
console.log("1" == 1);     // true （== なら一致する）
console.log("1" === 1);    // false（switch はこちら）

フォームの入力値、URL のクエリ文字列、localStorage から取り出した値は、数字に見えてもすべて文字列です。<select> の value をそのまま switch に渡して case 1: と書くと、どの case にも一致せず default に進みます。

修正版：比べる前に型をそろえる

// 修正版A：数値に変換してから渡す
console.log(check(Number("1"))); // 一致

// 修正版B：case 側を文字列で書く
function checkStr(v) {
  switch (v) {
    case "1":
      return "一致";
    default:
      return "不一致";
  }
}
console.log(checkStr("1")); // 一致

文字列の大文字・小文字や前後の空白も一致に影響します。入力をそのまま比べるのではなく、switch の式のところで形をそろえると安定します。

function statusLabel(input) {
  switch (String(input).trim().toLowerCase()) {
    case "open":
      return "受付中";
    case "closed":
      return "終了";
    default:
      return "不明";
  }
}
console.log(statusLabel(" OPEN "), statusLabel("Closed"), statusLabel(null));
// 受付中 終了 不明

厳密等価で知っておきたい値

NaN を判定したいときは、switch の前に Number.isNaN() で確かめます。オブジェクトや配列は中身が同じでも別物として扱われるので、shape.type のような文字列のプロパティを取り出して switch に渡すのが定番です。

つまずき3：case内のlet／constで出るSyntaxError

再現コード

// redeclare.js
function describe(kind) {
  switch (kind) {
    case "a":
      let message = "Aです";
      return message;
    case "b":
      let message = "Bです";
      return message;
  }
}

Node.js 22.22.2 で実行すると、次のエラーで止まります。

redeclare.js:7
      let message = "Bです";
          ^

SyntaxError: Identifier 'message' has already been declared

case ごとに別の場所に見えますが、switch文の { } 全体が1つのブロック（スコープ）です。case や default は新しいスコープを作らないため、同じブロックの中で message を2回宣言したことになり、構文エラーになります。SyntaxError なので、その case を通るかどうかに関係なく、ファイルを読み込んだ時点で止まります。MDN でも同じエラーメッセージの例とともに説明されています。

名前を変えて再宣言を避けても、別のエラーに出会うことがあります。

function tdz(v) {
  switch (v) {
    case 1:
      let msg = "one";
      return msg;
    case 2:
      return msg; // case 1 を通っていないので msg は初期化前
  }
}
tdz(2);

ReferenceError: Cannot access 'msg' before initialization

msg は switch 全体のスコープに存在しますが、case 2 から入ると let msg = ... の行が実行されていないため、初期化前の変数に触れたことになります。

修正版：caseごとに { } で囲む

// block.js
function area(shape) {
  switch (shape.type) {
    case "circle": {
      const r = shape.r;
      return Math.round(Math.PI * r * r * 100) / 100;
    }
    case "rect": {
      const r = shape.w * shape.h; // 同じ名前 r でも別のブロックなので問題なし
      return r;
    }
    default:
      throw new Error("未対応の図形: " + shape.type);
  }
}
console.log(area({ type: "circle", r: 2 }), area({ type: "rect", w: 2, h: 3 }));
// 12.57 6

case 値: { ... } と波かっこで囲むと、その case 専用のスコープができます。 同じ変数名を別の case でも使えるようになり、初期化前の変数に触れる心配もなくなります。break を使う場合は、ブロックの中の最後に書きます。ESLint の no-case-declarations ルールは、この書き方をうながすためのものです（ESLint での確認は今回は未実行です）。

なお、default を2つ書いた場合も構文エラーになります（実行して確認）。

SyntaxError: More than one default clause in switch statement

複数のcaseを1つにまとめる書き方

「0 か 6 なら休日」のように、複数の値で同じ処理をしたいときは case を縦に並べます。 これは「処理のない case から次の case へフォールスルーする」動きを利用した、標準的な書き方です。

// multi.js
function dayType(d) {
  switch (d) {
    case 0:
    case 6:
      return "休日";
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
      return "平日";
    default:
      return "範囲外";
  }
}
console.log([0, 3, 6, 7].map(dayType).join(","));
// 休日,平日,休日,範囲外

カンマや || でつなぐと一部しか一致しない

他の言語の感覚で case "sat", "sun": や case "sat" || "sun": と書いても、エラーにはなりません。ただし、どちらも片方の値としか比べられません。

function byComma(d) {
  switch (d) {
    case "sat", "sun": // カンマ演算子：右側の "sun" だけが残る
      return "休日";
    default:
      return "平日";
  }
}
console.log(byComma("sat"), byComma("sun")); // 平日 休日

function byOr(d) {
  switch (d) {
    case "sat" || "sun": // || 演算子：左側の "sat" だけが残る
      return "休日";
    default:
      return "平日";
  }
}
console.log(byOr("sat"), byOr("sun")); // 休日 平日

case の後ろは「値の一覧」ではなく「1つの式」です。複数の値は、case を1行ずつ並べて書きます。 値の数が多いときは、["sat", "sun"].includes(d) のように配列の includes を使った if 文にすると短く書けます。

switch(true)で範囲条件を書く

switch文は「値が等しいか」を比べる構文なので、case score >= 90: のような範囲条件はそのままでは使えません。そこで、switch の式を true にして、case 側に条件式を書く方法があります。

// range.js
function grade(score) {
  switch (true) {
    case score >= 90:
      return "A";
    case score >= 70:
      return "B";
    case score >= 50:
      return "C";
    default:
      return "D";
  }
}
console.log([95, 90, 70, 69, 10, "abc", undefined].map(grade).join(","));
// A,A,B,C,D,D,D

true === (score >= 90) が上から順に比べられ、最初に true になった case が実行されます。MDN でも if...else の連なりの代わりとして紹介されている書き方です。使うときのポイントは3つあります。

1. 条件は上から順に評価されるので、範囲の広い条件を下に書きます。 score >= 50 を一番上に書くと、95 点も "C" になります。
2. case の式は真偽値（true／false）になるようにします。 === で true と比べるため、case 1: のような「真とみなされる値」は一致しません。
3. switch の式に score を書いたままにしないようにします。

2 と 3 を実行して確かめた結果です。

function truthy(n) {
  switch (true) {
    case n:
      return "一致";
    default:
      return "default";
  }
}
console.log(truthy(1), truthy(true)); // default 一致

function gradeMistake(score) {
  switch (score) {          // ← true ではなく score を書いた場合
    case score >= 90:       // 95 === true は false
      return "A";
    default:
      return "D";
  }
}
console.log(gradeMistake(95)); // D

範囲条件はif elseや対応表でも書ける

switch (true) は「条件を縦にそろえて並べたい」ときに読みやすい書き方ですが、同じ処理は if 文でも、配列の対応表でも書けます。

// if 文（早期 return）
function gradeIf(score) {
  if (score >= 90) return "A";
  if (score >= 70) return "B";
  if (score >= 50) return "C";
  return "D";
}

// 対応表（しきい値を配列で持つ）
const GRADES = [[90, "A"], [70, "B"], [50, "C"]];
function gradeByTable(score) {
  const hit = GRADES.find(([min]) => score >= min);
  return hit ? hit[1] : "D";
}
console.log([95, 70, 49].map(gradeIf).join(","), [95, 70, 49].map(gradeByTable).join(","));
// A,B,D A,B,D

範囲条件が3〜4個までなら早期 return の if 文、しきい値が増えたり変更が多かったりするなら対応表が扱いやすくなります。switch (true) はチームで書き方をそろえたうえで使うと、読む人が迷いません。

関数内でreturnして抜ける書き方

「値を受け取って結果を返す」分岐は、switch文を小さな関数にして return で返す形がいちばんすっきりします。

// typename.js
function typeName(v) {
  switch (typeof v) {
    case "string":
      return "文字列";
    case "number":
      return Number.isNaN(v) ? "NaN" : "数値";
    case "boolean":
      return "真偽値";
    case "undefined":
      return "未定義";
    case "object":
      return v === null ? "null" : Array.isArray(v) ? "配列" : "オブジェクト";
    default:
      return typeof v;
  }
}
console.log(["a", 1, NaN, true, undefined, null, [], {}, () => 1, 1n].map(typeName).join(","));
// 文字列,数値,NaN,真偽値,未定義,null,配列,オブジェクト,function,bigint

break 方式と return 方式を比べると次のようになります。

状態を更新する関数でも同じ形が使えます。default で元の状態をそのまま返すのがポイントです。

function reducer(state, action) {
  switch (action.type) {
    case "added":
      return [...state, action.item];
    case "removed":
      return state.filter((x) => x !== action.item);
    case "cleared":
      return [];
    default:
      return state;
  }
}
let state = [];
state = reducer(state, { type: "added", item: "ペン" });
state = reducer(state, { type: "added", item: "ノート" });
state = reducer(state, { type: "removed", item: "ペン" });
console.log(JSON.stringify(state)); // ["ノート"]

defaultの書き方と置き場所

default は「どの case にも一致しなかったとき」の受け皿です。慣例として最後に書きますが、文法上は途中にも置けます。途中に置いた場合もフォールスルーの規則は同じです。

function mid(v) {
  const out = [];
  switch (v) {
    case 1:
      out.push("one");
      break;
    default:
      out.push("default");
    case 2:
      out.push("two");
      break;
  }
  return out.join(",");
}
console.log(mid(1), "|", mid(2), "|", mid(9));
// one | two | default,two

mid(9) は default に入ったあと break がないため、下の case 2 の処理まで実行されています。default を最後に置けば、この組み合わせは起きません。

default の中身は、目的に応じて次の3つから選びます。

値の種類が決まっている分岐では、default で例外を投げておくと、あとから種類を増やしたときに「case の追加漏れ」へすぐ気づけます。前の章の shippingFee("drone") を実行すると、次のメッセージで止まります。

RangeError: 未対応の受け取り方法です: drone

ループの中のswitchとbreak／continue

switch の中の break はswitch文だけを抜けます。外側の for は続きます。

const r1 = [];
for (const x of [1, 2, 3]) {
  switch (x) {
    case 2:
      break;        // switch を抜けるだけ。ループは続く
    default:
      r1.push(x);
  }
}
console.log(r1.join(",")); // 1,3

ループごと抜けたいときは、ラベルつきの break を使うか、ループを関数にして return します。continue は switch ではなくループに対して働き、次の周回へ進みます。

const r2 = [];
outer: for (const x of [1, 2, 3]) {
  switch (x) {
    case 2:
      break outer;  // ラベルつき：for ごと抜ける
    default:
      r2.push(x);
  }
}
console.log(r2.join(",")); // 1

const r3 = [];
for (const x of [1, 2, 3]) {
  switch (x) {
    case 2:
      continue;     // 次の周回へ。下の push も飛ばされる
    default:
      r3.push(x);
  }
  r3.push("after" + x);
}
console.log(r3.join(",")); // 1,after1,3,after3

オブジェクトやMapで対応表にする書き方

「値 A なら結果 X」という対応だけを書きたいなら、switch文の代わりにオブジェクトや Map を対応表として使えます。

// map.js
const LABELS = new Map([
  ["gold", "金"],
  ["silver", "銀"],
  ["bronze", "銅"],
]);
const rankLabel = (rank) => LABELS.get(rank) ?? "一般";

console.log(rankLabel("gold"), rankLabel("x")); // 金 一般

??（null合体演算子）は、左側が null か undefined のときだけ右側の値を使います。これが switch文の default にあたります。

オブジェクトを使うときはObject.hasOwnで確かめる

通常のオブジェクトは、toString や constructor といったプロパティを最初から受け継いでいます。外から来た文字列をそのままキーにすると、対応表に書いていない値が返ることがあります。

const OBJ = { gold: "金" };
console.log(typeof OBJ["constructor"]);          // "function"（受け継いだプロパティ）
console.log(OBJ["constructor"] ?? "一般");        // [Function: Object] が返る

// 修正版：自分自身のプロパティかを確かめる
const label = (key) => (Object.hasOwn(OBJ, key) ? OBJ[key] : "一般");
console.log(label("gold"), label("constructor")); // 金 一般

外部からの入力をキーにするなら、Map を使うか Object.hasOwn() で確かめるのが確実です。Map は受け継いだプロパティを持たないため、LABELS.get("constructor") は undefined になります。

もう1つの違いはキーの型です。オブジェクトのキーは文字列に変換されますが、Map は型を区別します。

const m = new Map([[1, "数値キー"], ["1", "文字列キー"]]);
console.log(m.get(1), m.get("1"));           // 数値キー 文字列キー
console.log({ 1: "a" }["1"], { 1: "a" }[1]); // a a

関数を対応表に入れる

処理そのものを切り替えたいときは、値として関数を入れます。

const handlers = {
  add: (a, b) => a + b,
  sub: (a, b) => a - b,
  mul: (a, b) => a * b,
};
function calc(op, a, b) {
  const fn = Object.hasOwn(handlers, op) ? handlers[op] : null;
  if (!fn) throw new Error(`未対応の操作です: ${op}`);
  return fn(a, b);
}
console.log(calc("add", 2, 3), calc("mul", 2, 3)); // 5 6
calc("pow", 2, 3); // Error: 未対応の操作です: pow

対応表にすると、分岐を増やすときに表へ1行足すだけで済みます。一方で、case ごとに処理の形が大きく違う場合や、フォールスルーを使いたい場合は switch文のほうが素直に書けます。

if else・switch・オブジェクト／Mapの使い分け比較表

選び方を流れにすると次のようになります。

flowchart TD
  A[分岐を書きたい] --> B{1つの値を<br>複数の候補と比べる?}
  B -- いいえ：範囲や複数の変数 --> C[if else]
  B -- はい --> D{caseごとの中身は<br>値を返すだけ?}
  D -- はい：対応だけ --> E[オブジェクト / Map]
  D -- いいえ：処理が複数行 --> F[switch + return]

「1つの値を候補と比べる」なら switch、「値と結果の対応だけ」なら Map、「範囲や複数の変数」なら if else が出発点です。

「switchのほうが速い」は手元ではどうだったか

「分岐が多いときは switch のほうが速い」と説明されることがあります。10個の文字列キーを順に渡して 2,000万回呼び出す簡単な計測を、Node.js 22.22.2 で3回行いました。

この計測では、if else と switch はほぼ同じで、回によって順位が入れ替わりました。いちばん差がある組み合わせでも1回あたり 0.00001 ミリ秒ほどです。これは1台の環境・1つの条件での参考値で、エンジンのバージョンや値の種類で結果は変わります。速さではなく、読みやすさと変更のしやすさで選んで差し支えないといえます。

書き終えたら確かめるチェックリスト

よくある質問

Q. switch文とif else文はどちらを使えばよいですか？ A. 1つの値が複数の候補のどれと一致するかで分けるなら switch、範囲条件や複数の変数を組み合わせるなら if else が書きやすくなります。本記事の計測では速さの差はごくわずかだったので、読みやすさで選んで問題ありません。値と結果の対応だけなら Map やオブジェクトの対応表も選択肢になります。

Q. caseに複数の値を指定するにはどう書きますか？ A. case 0: case 6: のように case を並べます。case 0, 6: や case 0 || 6: はエラーにはなりませんが、片方の値としか比べられません。値が多いときは [0, 6].includes(d) を使った if 文も読みやすい書き方です。

Q. switch文で「以上・以下」の条件は書けますか？ A. switch (true) と書き、case score >= 90: のように条件式を case に置くと書けます。上から順に評価されるため、範囲の広い条件を下に並べます。条件が少ないなら if 文の早期 return でも同じ結果になります。

Q. breakは必ず書く必要がありますか？ A. case の最後が return や throw なら不要です。それ以外で break を書かないと、次の case の処理まで続けて実行されます。関数にくるんで return で抜ける形にすると、break を書く箇所そのものをなくせます。

まとめ

• switch文は1つの値を case と === で比べます。 "1" と 1 は一致しないので、渡す前に型をそろえます。
• break を書かないと、下の case まで続けて実行されます（フォールスルー）。 関数内で return して抜ける形にすると書き忘れがなくなります。
• case の中で let／const を使うときは { } で囲みます。 囲まないと SyntaxError: Identifier 'message' has already been declared になります。
• 複数の値で同じ処理をするときは case を縦に並べます。 , や || でつなぐと片方としか比べられません。
• 範囲条件は switch (true) で書けます。 条件は上から順に評価されるので、広い範囲を下に置きます。
• default は最後に書き、想定外の値でどうするか（初期値・そのまま・例外）を決めておきます。
• 値と結果の対応だけなら Map やオブジェクトの対応表、範囲や複数の変数なら if else、と使い分けます。

株式会社RJCでは、JavaScriptの条件分岐の書き方を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。