Zenn
🙆‍♀️

JavaScriptを一から理解する: switch命令について

2022/02/06に公開
JavaScript
Web
switch文
tech

はじめに

こんにちは、Doxperと申します。
今回はJavaScriptの制御構文(switch)命令の使い方についてご説明します。
前提条件としてif命令について分かっている方を対象としています。知識が曖昧の方、まだ知らない方は先にこちらをご一読ください。

この記事でできるようになること

  • switch命令の使い方を学ぶことができる。
  • if命令との違いを理解することができる。

対象読者

  • エンジニアを目指している同士
  • JavaScriptの基礎を身につけたい方
  • 過去にプログラミング学習に挫折した方
  • プログラミング言語は他に触ったことがない方

JavaScript Switch Statement

switch命令もif命令と同様に分岐処理の一種です。
しかしswitch命令では複雑なif...else命令をきれいに記述することが可能です。
実際にコードを見てみましょう。

//これはif文で書いた例です

let bloodType = "O";

if (bloodType === "A") {
  console.log("A型です");
} else if (bloodType === "B") {
  console.log("B型です");
} else if (bloodType === "O") {
  console.log("O型です");
} else if (bloodType === "AB") {
  console.log("AB型です");
} else {
  console.log("不明です");
}

//　結果: O型です

上記のコードは血液型によって異なった結果をコンソールに表示するシンプルなプログラムですが、変数 === 値の形式が何度も記述されており、コードが冗長になっています。このようなケースではif命令を利用せず、switch命令で記述するべきです。
書き方を見てみましょう。

switch構文
switch (変数または式) {
  case 値1:
    //式の結果が値1と等しい場合に実行される命令(群)
    break;
  case 値2:
    //式の結果が値2と等しい場合に実行される命令(群)
    break;
  case 値3:
    //式の結果が値3と等しい場合に実行される命令(群)
    break;
  default:
    //式の結果全ての値に合致しない場合に実行される命令(群)
    break;
}

https://zenn.dev/doxper/articles/d8092a2ce91f37
switch命令の流れを簡単に説明すると

  1. 先頭の式(switch(式))を評価
  2. 式の値に一致するcase句を見つけ実行
  3. 一致すつcase句がない場合はdefault

if...elseで記述されたプログラムをswitch命令で書き直すと以下のようになります。

let bloodType = "O";

switch (bloodType) {
  case "A":
    console.log("A型です");
    break;
  case "B":
    console.log("B型です");
    break;
  case "O":
    console.log("O型です");
    break;
  case "AB":
    console.log("AB型です");
    break;
  default:
    console.log("不明です");
    break;
}
//結果:  O型です

if...else命令で記述したものと比べて、コードがすっきりしています。

caseのグルーピング

caseをグループ化して同じコードを実行することも可能です。

let prefecture = "Kyoto";

switch (prefecture) {
  case "Osaka":
  case "Kyoto":
  case "Hyogo":
  case "Nara":
  case "Mie":
  case "Shiga":
  case "Wakayama":
    console.log("近畿地方出身です");
    break;
  default:
    console.log("近畿地方出身ではありません");
    break;
}
//結果: 近畿地方出身です

おわりに

いかがでしたでしょうか？
今回はJavaScriptの制御構文(switch)命令の使い方についてご説明しました。
if命令とswitch命令の構文、使い分けについて理解できたのではないでしょうか?

また、記事について間違っている点やよりよい表現などの提案などありましたらご気軽にコメントいただけますと幸いです。

それではまた次回の記事でお会いしましょう👋

参考文献

JavaScript Switch Case – JS Switch Statement Example
JavaScript switch case Statement with Practical Examples
https://ja.javascript.info/switch
山田 祥寛(2016).改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

Discussion