JavaScriptのswitch文で条件分岐する方法を初心者向けに解説！

2024-07-14

当サイトでは一部リンクに広告が含まれています

JavaScriptで条件分岐を行う場合、一般的にはif文が使われます。

しかし、特定の値に応じて処理を切り替えたい場合は、switch文を使うとコードがシンプルで読みやすくなります。

たとえば、ユーザーの選択した言語に応じてメッセージを表示するような処理をif文で書くと、次のようになります。

let lang = "ja";

if (lang === "ja") {
 console.log("こんにちは");
} else if (lang === "en") {
 console.log("Hello");
} else if (lang === "fr") {
 console.log("Bonjour");
} else {
 console.log("対応言語ではありません");
}

これをswitch文で書くと、以下のようになります。

let lang = "ja";

switch (lang) {
 case "ja":
   console.log("こんにちは");
   break;
 case "en":
   console.log("Hello");
   break;
 case "fr":
   console.log("Bonjour");
   break;
 default:
   console.log("対応言語ではありません");
}

switch文を使うと、if文に比べてネストが浅くなり、より読みやすいコードになるのがわかりますね。

switch文の基本構文

それではswitch文の基本的な書き方について解説しましょう。

switch (式) {
 case 値1:
   式が値1と一致する場合の処理;
   break;
 case 値2:
   式が値2と一致する場合の処理;
   break;
 default:
   式がどのcaseとも一致しない場合の処理;
}

switch文は以下のような流れで処理が行われます。

switch (式)の式を評価する
評価した値と最初のcaseの値を比較
一致しなければ次のcaseへ、一致すればその処理を実行
全てのcaseと一致しない場合はdefaultの処理を実行

各caseの最後にはbreak文を記述して、switch文を抜けるようにします。

また式には、具体的な値のほかに変数や計算式なども指定できます。

switch文を使って曜日を判定する例

それでは実際のコードを見ながら、switch文の使い方をもう少し詳しく確認していきましょう。

以下は、ある数値に対応する曜日を表示するサンプルコードです。

let day = 3;

switch (day) {
 case 0:
   console.log("日曜日");
   break;
 case 1:
   console.log("月曜日");
   break;
 case 2:
   console.log("火曜日");
   break;
 case 3:
   console.log("水曜日");
   break;
 case 4:
   console.log("木曜日");
   break;
 case 5:
   console.log("金曜日");
   break;
 case 6:
   console.log("土曜日");
   break;
 default:
   console.log("不正な値です");
}

このコードの実行結果は以下のとおりです。

水曜日

dayの値が3なので、case 3の処理が実行されて「水曜日」と表示されました。

0〜6のいずれにも該当しない値だった場合は、defaultの処理が実行されることになります。

switch文で注意すべきポイント

ここからは、switch文を使う上で注意すべき、少し応用的な使い方についてお伝えします。

break文を忘れずに！フォールスルーに注意

break文を書き忘れると、意図しない挙動を引き起こす可能性がある

各caseの処理が終わったら、必ずbreak文でswitch文を抜けるようにしましょう。

breakがないと、一致したcaseの次以降の処理も実行されてしまいます。これをフォールスルーといいます。

let num = 1;

switch (num) {
 case 1:
   console.log("numは1です");
 case 2:
   console.log("numは2です");
 case 3:
   console.log("numは3です");
}

上のコードを実行すると、次のような結果になります。

numは1です
numは2です
numは3です

本来はcase 1の処理だけが実行されるはずでしたが、breakがないためフォールスルーが発生してしまいました。

このように意図しない動作になるので、必ずbreakを忘れずに記述するようにしましょう。

ただし、複数のcaseをまとめて処理したい場合は、あえてbreakを省略することもできます。

式には比較演算子も使える！

switch (true)と書くと、case部分に比較式を書ける

switch文の式には具体的な値だけでなく、比較演算子を使った式も指定できます。

その場合は、switch (true)と書いて、caseに比較式を記述します。

let num = 80;

switch (true) {
 case num >= 90:
   console.log("優");
   break;
 case num >= 70:
   console.log("良");
   break;
 case num >= 60:
   console.log("可");
   break;
 default:
   console.log("不可");
}

このように書くことで、70以上90未満なら「良」、60以上70未満なら「可」のように、式の評価結果に応じて処理を切り替えられます。

if文との使い分け

最後に、switch文とif文の使い分けについて触れておきましょう。

if文は柔軟に条件を指定できる一方で、分岐が多くなるとネストが深くなり可読性が下がるデメリットがあります。

switch文は、特定の値に対する分岐処理を、より簡潔に書けるのが利点です。

if文が適している場面	switch文が適している場面
複雑な条件を指定する場合条件の組み合わせが多岐にわたる場合比較する値の範囲が広い場合	特定の値で分岐する場合分岐先が多数ある場合 ==や===で等価比較できる場合