【JavaScript】switch/caseによる分岐処理を詳しく解説

2022年3月9日
Javascript
Javascript

switch/caseの使い方、理解できていますか？

JavaScriptで分岐処理を実装するときは、if文を使うことが多いです。しかし、条件が複数存在する場合、if文のみで記述しようとするとソースコードが読みづらくなり、品質を落としてしまいかねません。そこで活用したいのが、switch/caseです。

今回は、switch/caseを使った分岐処理の記述方法について、基本や応用テクニックなどを詳しく解説します。switch/caseを理解すれば、よりスマートな分岐処理を実装できるようになります。ぜひ参考にしてください。

フリーランス案件を探すならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い・福利厚生サービスが受けられる・首都圏の案件が中心	・給与保証制度で安定した収入を得られる・税務処理のサポートあり・マージン率は実質20%	・週2/週3の案件が多い・在宅/リモート案件が多い・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス・株式会社ユーザベース	・Sansan株式会社・株式会社一休・株式会社FiNC Technologies など	・クックパッド株式会社・株式会社カオナビ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている・カウンセリングに時間をかける・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント・業界経験者がキャリアコンサルタントを務める・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス・スキル・経験重視で評価してもらえる・他エンジニアの入札結果を見ることで自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社・株式会社サイバーエージェント・Chatwork株式会社など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ・ZOZOテクノロジーズ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

1 switch文とは？
2 switch文の基本的な使い方
3 switch文を使う時のテクニック
4 switch文を使う時の注意点
- 4.1 breakを記載しなかった場合の挙動
5 最後に

switch文とは？

switch/caseは、if文と同じように条件式によって処理を分岐するために使われるキーワードです。分岐処理を実装できることから、if文だけで記述してもプログラムを実行する分には特に問題ありません。しかし、if文だけに頼っているとソースコードが読みづらくなる場合があり、プログラムの品質を損ねるおそれがあります。

switch/caseキーワードは、分岐処理の中でも分岐する本数が多い場合が使いどころです。具体的には、「else if」が複数回登場するような分岐処理の場合に、switch/caseキーワードに置き換えることで、ソースコードが見やすくなります。

なお、if文の使い方については以下の記事にて詳しく解説していますので、こちらもぜひご確認くださいね。

switch文の基本的な使い方

早速ですが、switch/caseの最も基本となる用法について、サンプルコードを見ながら確認していきましょう。

let data = 4;

// switchキーワードによる分岐処理
switch(data % 4){
  case 0: // 条件式の値が0の場合
    console.log('余りは0です。');
    break;
  case 1: // 条件式の値が1の場合
    console.log('余りは1です。');     
    break;
  case 2: // 条件式の値が2の場合
    console.log('余りは2です。');
    break;
  case 3: // 条件式の値が3の場合
    console.log('余りは3です。');
    break;
  default: // 条件式の値が0~3以外の場合
}

switchキーワードの横には条件式を記述します（4行目）。この部分はif文の場合と違いはありません。

次に、条件式が取りうる値を、caseキーワードを利用して各々記述します（5、8、11、14行目）。1つのcase内の処理を記述し終えたら、最後にbreakキーワードを記述することを忘れないようにしましょう。

最後に、caseキーワードの値全てに当てはまらない場合の条件分岐として、defaultキーワードを記述します。

サンプルコードの分岐処理を、if/elseに書き換えたものと比べてみましょう。

if(data % 4 == 0) {
  console.log('余りは0です。');
} else if(data % 4 == 1) {
  console.log('余りは1です。');    
} else if(data % 4 == 2) {
  console.log('余りは2です。');    
} else if(data % 4 == 3) {
  console.log('余りは3です。');    
} else {
}

条件式と値が1つのカッコ内に記述されており、switch/caseよりも見にくいことが分かります。プログラムの動作としては変わりないですが、キーワードの使い分け次第でソースコードの見栄えが格段に良くなります。

switch文を使う時のテクニック

この節では、switch/caseキーワードを使う際に実践すべきテクニックを3つ解説します。

caseを複数設定する

1つ目は、caseを複数記述することです。前節で述べたように、switch/caseキーワードは、条件式の値が複数個存在する場合に使うと効果的です。プログラミングする際は、条件式の値が複数ある部分を探し出すことがポイントです。

例えば、曜日ごとに処理を分岐させたい場合は、変数に格納された値が最低でも7通りあると考えることができます。とり得る値が多いため曜日ごとの分岐処理は、if/elseキーワードよりもswitch/caseキーワードを用いて実装するのが妥当と言えます。実際に実装したサンプルプログラムを、以下に示します。

let date = new Date(); // プログラム実行時の日付が設定される

// getDay()メソッドで曜日を示す値を取得（値：0~6）
switch (date.getDay()) {
  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:
}

JavaScriptに標準で備わっているDateオブジェクトを利用して、プログラムを実行したタイミングの日付情報を設定します（1行目）。4行目のgetDay()メソッドは、曜日に対応する数値を取得する機能を持ち、日曜日が0、月曜日が1のように順番に対応付けされているので、覚えておきましょう。

switchキーワードの条件式で、getDay()メソッドの戻り値を評価するようにし、各値をcaseキーワードでそれぞれ記述すれば、曜日ごとに条件分岐する処理が実装できます。

caseに比較演算子を設定する

2つ目のテクニックは、caseに比較演算子を設定することです。今まで、caseの横には値を直接記述していましたが、if文の条件式のように比較演算子を併用することができます。比較演算子を併用したcaseキーワードの記述方法は、以下のサンプルコードを参考にしてください。

let purchase = 12301; // 購入金額
let payment = 0; // 割引適用後の支払金額

switch(true) {
  case purchase <= 3000: // 3,000円以下なら割引なし
    payment = purchase;
    break;
  case purchase > 3000 && purchase <= 6000: // 3,001円以上6,000円以下は5%引き
    payment = purchase * (1 - 0.05);
    break;
  case purchase > 6000 && purchase <= 10000: // 6,001円以上10,000円以下は10%引き
    payment = purchase * (1 - 0.1);
    break;
  default: // 10,001円以上は15%引き
    payment = purchase * (1 - 0.15);
    break;
}

payment = Math.floor(payment); // 小数点以下切り捨て
console.log('支払金額は' + payment + '円です。');

サンプルコードでは、購入金額の範囲ごとに割引を適用し実際の支払金額を算出する処理を実装しています。ポイントとなるのは4行目です。

caseと比較演算子を組み合わせて用いる際は、switchキーワード横の条件式をtrueに設定しましょう。true以外の値を設定すると、switch/caseを一切評価せずにプログラムが進んでしまうおそれがあるため、書き間違いのないように気をつけてください。

switch文をネストする

3つ目は、switchのネストです。つまり、switch文の中にswitch文を含めるような記述方法のことです。以下のサンプルコードのように、switch文が入れ子になるように実装することもできます。

let test_score = 59; // 試験点数
let task_score = 70; // 課題点数

// 試験点数で成績を判定
switch (true) {
  case test_score <= 100 && test_score >= 80:
    console.log('成績判定：優');
    break;
  case test_score < 80 && test_score >= 70:
    console.log('成績判定：良');
    break;
  case test_score < 70 && test_score >= 60:
    console.log('成績判定：可');
    break;
  default:
    // 試験点数が60点未満の場合は課題点で評価
    switch (true) {
      case task_score >= 60:
        console.log('成績判定：可');
        break;
      case task_score < 60 && task_score >= 50:
        console.log('要補習');
        break;
      default:
        console.log('進級不可');
        break;
    }
}

ただし、ネストが深くなるとソースコードが横に伸びてしまい、余計読みづらくなるおそれがあります。そのため、switch文のネストは1回だけに留めるようにしましょう。

switch文を使う時の注意点

switch/caseキーワードは、ソースコードの見栄えを良くするために有効である一方で、使い方を誤るとプログラムのバグを生む原因となってしまいます。特に、switch/caseキーワードを用いるうえで注意したいのは、breakキーワードです。

breakを記載しなかった場合の挙動

breakキーワードは、case内の処理が一通り終わった後にswitch文から抜け出すために必ず記述しなければなりません。

もしbreakキーワードを書き損ねると、意図しない動作をするおそれがあるため注意が必要です。一体どのような動作をするのか、サンプルコードで確認してみましょう。

let weather = 'sunny'; // 天気

switch(weather) {
  case 'sunny':
    console.log('天気：晴れ');
    // breakを書き忘れた場合、switchから抜け出さず
    // case 'cloudy'の処理が実行される
  case 'cloudy':
    console.log('天気：曇り');
    break;
  case 'rain':
    console.log('天気：雨');
    break;
  case 'snow':
    console.log('天気：雪');
    break;
  default:
}

変数に設定された天気の文字列に応じて、天気をコンソール出力する処理を実装しています。もし、変数weatherに「sunny」が設定されているのであれば、コンソール出力は「天気：晴れ」となるのが理想です。

しかし、コンソール出力後にbreakキーワードを記述し忘れているため、次の「case ‘cloudy’」内の処理が続けて実行されてしまいます。これは意図した動作とは言えません。

switch/caseを用いるときは動作確認を念入りに行い、breakキーワードの記述忘れがないか、常々意識することを心がけておきましょう。

一方で、あえてbreakキーワードを記述しないような処理を実装することもあります。例えば、月曜日から金曜日であれば「平日です。」、土曜日・日曜日であれば「休日です。」と表示する処理を実装したい場合は、以下のサンプルコードのように実装することで、目的の結果を得ることができます。

let date = new Date();

switch (date.getDay()) {
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    console.log('平日です。');
    break;
  case 0:
  case 6:
    console.log('休日です。');
    break;
  default: 
}

breakキーワードをあえて書かないことによって、コンソール出力処理を平日と休日ごとにまとめることができ、ソースコードの見た目もスッキリ仕上がります。このように、breakを省略した記述は「フォールスルー」と呼ばれています。

お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌？

レバテックフリーランスの評判ってどう？【現役エンジニアが徹底解説します】

MidWorks（ミッドワークス）の評判ってどう？【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptのswitch/case構文の使い方について解説してきましたがいかがでしたか？

条件分岐を実装する場合には、多くの方がまず最初にif文を思い浮かべると思いますが、このswitch/case構文を使用した方がコードの可読性が上がる場合が多々あります。

今回の記事でご紹介した通り、使い方自体はとても簡単ですので、今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。