JavaScriptのswitch文で条件をネストする方法を現役エンジニアが解説【初心者向け】

JavaScriptのswitch文で条件をネストする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• switch文の基本的な使い方
• switch文で条件をネストする方法
• 実際に書いてみよう
• まとめ

 

switch文の基本的な使い方

switch分は式に対して、一致するcase節の処理を実行します。

一致するcase節がない場合は、default節が実行される点に注意が必要です。

また、式とはある値になるコードの単位のことであり、値と同様の意味と受け取って差し支えありません。

記述の形は下記のようになります。

switch (式）{
  case 値:
    値に一致した場合の処理
    break;
  case 値:
    値に一致した場合の処理
    break;
  case 値:
    値に一致した場合の処理
    break;
  default:
    caseに一致するものがない場合の処理
    break;
}

使用する場合は、switchの式やcaseの値に判定したいものを入れましょう。

case節は、if文などと同様にいくつでも増やすことができます。

 

default節は、省略可能です。また、文法上はcaseの後ではなく一番上でも途中でも好きな場所に書けます。

注意点としては、break文の有無による動作の違いです。

 

breakを省略するとそれ以降のcaseの判定を行わずに処理が実行されます。

breakを省略した具体的なコードをみていきましょう。

let value = 'あいうえお'

switch(value){
  default:
    console.log('caseに一致するものがありません');
  case 'かきくけこ':
    console.log('1つめのcaseを実行');
  case 'さしすせそ':
    console.log('2つめのcaseを実行');
    break;
  case 'たちつてと':
    console.log('3つめのcaseを実行');
}

switch文を実行すると、一致するものがないため最初のdefault節が実行され2つめのcase節でbreakして下記のような表示になります。

caseに一致するものがありません
1つめのcaseを実行
2つめのcaseを実行

if文やelse ifでも同様の処理ができるものの、switch文だと1つの値を複数の条件で判定する場合に記述が少なく、複数の分岐があることがわかりやすいというメリットがあります。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

switch文で条件をネストする方法

case節の中に処理を自由に書くことができるため、ここにswitch文を書くこともできます。

case節の中にswitch文を書くことで何重にもネスト（入れ子）にすることが可能です。

ただし、文法上は問題ないものの、プログラムが読みにくくなるデメリットがあります。

ネストする場合は、条件が適切かどうかや値の持ち方が変になっていないかなどを再確認しましょう。

 

実際に書いてみよう

switch文をネストして書く事例をみていきましょう。

名前とステータスの2つの値を判定して分岐するようにしています。

let name = '山田';
let status = 3;

switch(name){
  case '鈴木':
    console.log('鈴木です');
    break;
  case '山田':
    console.log('山田です');
    switch(status){
      case 1:
        console.log('疲れてます');
        break;
      case 2:
        console.log('ふつうです');
        break;
      case 3:
        console.log('絶好調です');
        break;
    }
    break;
}

 

まとめ

switch文の使い方を紹介しました。

if文でも同じ処理は可能なので、プログラムの読みやすさを考慮して使い分けましょう。

 

執筆してくれたメンター

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。 TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。