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

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

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

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


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

switch文とは?

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

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

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

おすすめ記事

JavaScriptでプログラミングするうえで欠かせない条件分岐。条件に応じて処理する方向を変えることはプログラミングでは頻繁に起こりえます。その際は、if文を使うのが最もオーソドックスな方法です。 今回は、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を省略した記述は「フォールスルー」と呼ばれています。

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

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

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

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

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

最後に

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

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

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

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

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