【JavaScript入門】switch文で複数の条件をわかりやすく分岐する

JavaScriptで条件分けを行う際に使用される構文として、if文の他にもう１つswitch文と呼ばれる構文があります。
比較する条件よってはif文よりも switch文の方が可読性の高いコードを書ける場合があるため、どちらの使い方も理解しておくことが重要となります。

そこで今回は、JavaScriptで switch文を使用する方法について解説していきたいと思います。
基本構文や簡単な応用方法、if文との使い分けの基準などについても合わせて解説していきますので、ぜひ参考にしてみてください。

JavaScriptのswitch文とは？

switch文とは、条件分岐を行う際に使用する構文の一種です。
同じく条件分岐で使用する if文と同様に、指定した条件に応じて実行する処理を記述することができます。

switch文は、特定の値に一致する条件があるかを比較したい、かつ比較条件が多数に渡る場合に便利な構文です。

switchの使い方

それではさっそく、switch文の詳しい使い方について見ていきましょう。

基本構文

switch文を使用する際の基本構文は、以下のように記述します。

【基本構文】

switch (比較対象の値) {

  case 条件１:
    // 実行する処理
    break;

  case 条件2:
    // 実行する処理
    break;
  .
  .
  .
}

switch文における比較条件は、厳密等価演算子(===) での比較のみとなります。
その代わりに、条件式を省略して比較する値のみを記述するのが特徴です。

【サンプルコード】

const num = 3;

switch (num) {
  case 1:
    console.log("case 1 に一致しました");
    break;
  case 2:
    console.log("case 2 に一致しました");
    break;
  case 3:
    console.log("case 3 に一致しました");
    break;
}

【実行結果】

case 3 に一致しました

また、switch文の場合は上述のように、各caseの処理の終わりに breakを記述します。

breakを入れないとどうなる？

基本的には、処理の終わりに必ず記述する breakですが、仕様上は省略することも可能です。
その場合は一体どのような挙動をするのでしょうか？

以下の例で、実際の動きを見てみましょう。

【サンプルコード】

const num = 2;

switch (num) {
  case 1:
    console.log("case 1 に一致しました");
    break;
  case 2:
    console.log("case 2 に一致しました");
  case 3:
    console.log("case 3 に一致しました");
    break;
}

【実行結果】

case 2 に一致しました
case 3 に一致しました

値が一致するのは case2の条件ですが、実行結果を見ると、その下にある case3の処理まで実行されているのが分かるかと思います。

このように、breakの記述を省略した場合、一致した条件の処理が実行されても switch文から抜け出さずに、breakが記述されている行に当たるまで各条件の処理が実行され続けます。
この性質を利用して、わざと breakを記述せずに複数の処理を続けて実行する方法もあります。

if … else if文との使い分け

JavaScriptで、同じく条件分けの際に使用される構文の１つに、if文があります。
この if文の中でも、if … else if文と呼ばれる構文を使って、switch文と同じ挙動を実装することができます。

ここからは、if … else if文の使い方や、switch文との使い分け方について解説したいと思います。

if … else if文の基本構文

if … else if文を使用する際の基本構文は、以下のように記述します。

【基本構文】

if (条件式1) {
	//実行する処理内容
} else if (条件式2) {
	//実行する処理内容
}

if … else if文は、分岐したい条件の数だけ else if を繋げて記述することができるため、switch文と同様に複数のケースに対応することができます。
条件式の記述方法は、if文と同様です。

【サンプルコード】

const num = 7;
if (num < 5) {
	console.log("5より小さい数値です");
} else if (num === 5) {
	console.log("5です");
} else if (num > 5) {
	console.log("5より大きい数値です");
}

【実行結果】

5より大きい数値です

switch文の条件式は、上記のコードのうち 「num === 5」 と同じ比較式となります。

switchとif…else if文の使い分け

上述したように、switch文と if…else if文はどちらも同じような挙動をします。
では、どのように使い分けをすればいいのでしょうか？

if…else if文は、比較演算子を使用して様々な条件式を指定することができます。
例えば、一定の数値よりも大きい場合、あるいは小さい場合、全く同じ値である場合など、使用する演算子によって柔軟に変更可能です。

一方、switch文の場合は既に上述したように、厳密等価演算子(===) での比較のみとなります。
その代わりに条件式の記述を省略できるため、どの値と比較するかが if…else if文よりも視覚的に理解しやすい傾向にあります。

同じ内容の処理を、switch文と if…else if文で見比べてみましょう。

【サンプルコード】

// switch文の場合
const str = "グー";
switch(str) {
  case "グー":
    console.log("グーを出しました");
    break;
  case "チョキ":
    console.log("チョキを出しました");
    break;
  case "パー":
    console.log("パーを出しました");
    break;
}

// if…else if文の場合
const str = "グー";
if(str === "グー") {
    console.log("グーを出しました");
} else if(str === "チョキ") {
    console.log("チョキを出しました");
} else if(str === "パー") {
    console.log("チョキを出しました");   
}

switch文は比較条件が1つに絞られているため、記述されている値を見るだけで比較対象を瞬時に理解することができます。

一方、if…else if文は比較する値だけでなく、どの演算子が使用されているかまで確認する必要があるため、switch文よりも直感的な理解が難しくなりがちです。
その代わりに、switch文では指定できない比較条件も柔軟に織り交ぜることができます。

2つの構文を使い分ける際は、全ての値を === で比較するかどうかを基準にするといいでしょう。

defaultキーワードの使い方

switch文では、いずれの条件にも一致しなかった場合の処理を記述する方法として、default が用意されています。

以下の例を見てみましょう。

【サンプルコード】

const num = 5;

switch (num) {
  case 1:
    console.log("case 1 に一致しました");
    break;
  case 2:
    console.log("case 2 に一致しました");
    break;
  case 3:
    console.log("case 3 に一致しました");
    break;
  default:
    console.log("想定されていない数値です");
    break;
}

【実行結果】

想定されていない数値です

変数に代入されている値は、指定されているいずれの条件にも一致しない値です。
そのため、defaultに記述した処理内容が実行されています。

また、基本的には switch文の終わりに記述されることが多いですが、記述場所を変更しても動作に影響はありません。

【サンプルコード】

const num = 3;

switch (num) {
  case 1:
    console.log("case 1 に一致しました");
    break;

 // 間に記述しても問題ない
  default:
    console.log("想定されていない数値です");
    break;

  case 2:
    console.log("case 2 に一致しました");
    break;

  case 3:
    console.log("case 3 に一致しました");
    break;
}

【実行結果】

case 3 に一致しました

複数の case で同じ処理をする

breakを記述しなかった場合に、switch文を抜けずに処理が継続される挙動を利用して、複数の caseで同じ処理を実行させることもできます。

以下の例で、実際の動作を見てみましょう。

【サンプルコード】

const num = 5;

switch (num) {
  case 1:
  case 2:
  case 3:
    console.log("1〜3のいずれかです");
    break;

  case 4:
  case 5:
  case 6:
    console.log("4〜6のいずれかです");
    break;

  case 7:
  case 8:
  case 9:
    console.log("7〜9のいずれかです");
    break;

  default:
    console.log("10以上の数値です");
    break;
}

【実行結果】

4〜6のいずれかです

同一の処理を行う case のうち、一番最後の case のみ処理内容と breakを記述することで、複数の条件の処理が同じ箇所に到達するようにする仕組みです。
このように、状況に応じて特定の case の処理内容を１つにまとめることもできます。

条件式に用いる等価演算子の使い分け

switch文は、厳密等価演算子 (===) による比較が行われることは既に上述しましたが、JavaScriptには等価演算子 (==) という比較演算子も存在します。
一見すると同じように見えるこの2つの演算子ですが、特定の場合において挙動が異なるため、違いを理解しておくことは重要です。

まず、どちらの演算子も、比較する値同士が同一であるか否かを比較する演算子です。
例えば、以下のようなケースはどちらも true判定となります。

【サンプルコード】

console.log(1 == 1);   // true
console.log(1 === 1);  // true

この2つの演算子の違いは、比較する値の型が異なる場合に、違う値であると見なすかどうかです。
以下のケースの場合、等価演算子と厳密等価演算子では比較結果が異なります。

【サンプルコード】

console.log(1 == "1");   // true
console.log(1 === "1");  // false

等価演算子の場合は、異なる型の際に型変換を行ってから比較をするため、同一の値であると判断されています。

まとめ

いかがでしたか？今回は、JavaScriptで switch文を使用する方法について解説しました。

breakの有無によって動作が異なったり、比較条件が if文よりも限られていたりと、switch文ならではのポイントがいくつかあったかと思います。
それぞれの構文を使い分けていく上で、動作の違いはしっかりと把握しておくべきポイントですので、しっかりとおさえておきましょう。

ぜひこの記事も参考にしながら、switch文の使い方をマスターして、今後の開発に役立てていってくださいね！

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。