【入門】JavaScriptのswitch文の書き方をサンプルコードで解説！

特に、特定の物事に対して複数の選択肢がある場合は、条件の定義が煩雑になりやすい「if」よりも、「switch」を使うほうが簡単に、そして見やすいコードを記述することが可能です。今回はサンプルコードを元に、switch文の特徴や、読みやすいコードの書き方を解説していきます

スキルアップ

2022/08/08 UP

プログラムの条件分岐には「if」と「switch」があります。どちらも条件によって処理を分岐させる構文ですが、条件によってはifよりもswitchのほうが、コードがシンプルに読みやすく書けるケースがあります。

特に、特定の物事に対して複数の選択肢がある場合は、条件の定義が煩雑になりやすい「if」よりも、「switch」を使うほうが簡単に、そして見やすいコードを記述することが可能です。

今回はサンプルコードを元に、switch文の特徴や、読みやすいコードの書き方を解説していきます。

なお、JavaScriptのif文については、こちらの記事をご確認ください。

【JavaScriptの条件分岐】if文の書き方／使い方 - サンプルコードとあわせて解説

JavaScriptのswitch文の基本

switch文とは、複数の値の中のいずれかと一致するか調べ、一致する場合は処理を分岐させて、異なる処理を実行する構文です。そのため、複数の選択肢がある場合はif文よりも適しています。

switch文の基本書式は以下のとおりです。

switch (式){
  case 値A：
    式が値A の場合に実行する処理;
    break;
  case 値B:
    式が値B の場合に実行する処理;
    break;
  case 値C:
式が値C の場合に実行する処理;
    break;
  default:
    式の値がいずれのcaseとも一致しない場合に実行する処理;
}

switchの直後に記述する（）内の式を参照し、値がcaseと一致する場合、条件が分岐されて特定の処理が行なわれ、break文で終了します。式には値や変数を直接記述するほかに、計算式を記述できます。

また、値がいずれのcaseとも一致しなかった場合、defaultに記述した処理を実行します。defaultは処理が必要ない場合は省略することができます。

それでは早速、実際のコードを見てみましょう。

数値の場合

switch (a) {
    case 1:
        console.log('aは1です');
        break;
    default:
        console.log('aの値は1ではありません');
}

変数aが1であるとき、「aは1です」とコンソールに表示するコードです。1ではない場合、「aの値は1ではありません」と表示します。

文字列の場合

switch (birthplace) {
    case '東京':
        console.log('出身地は東京です');
        break;
    default:
        console.log('出身地は東京以外です');
}

変数「birthplace」が「東京」であるときに「出身地は東京です」とコンソールに表示するコードです。

文字列なので、case はシングルクオートまたはダブルクオートで挟んで記述します。

JavaScriptのswitch文にはいろいろな使い方が

switch文は、基本の型以外にも、幅広い記述方法があります。複数のcaseで条件を分岐する基本形から、条件を満たした時点からすべての処理を実行するコードや、複数の要素を組み合わせた複雑な分岐を作る際の入れ子（ネスト）構造まで、さまざまなケースに柔軟に対応できるのがswitch文の特徴です。

それではサンプルを一つずつ見ていきましょう。

複数ラベルで条件分岐

switch (a) {
    case 1:
        console.log('aは1です');
        break;
    case 2:
        console.log('aは2です');
        break;
    case 3:
        console.log('aは3です');
        break;
}

変数aが1なら「aは1です」、2なら「aは2です」、3なら「aは3です」とコンソールに表示します。前項で解説したswitch文のcaseが複数になった構造で、条件分岐に必要なだけcaseを追加できます。

breakを置かない

switch (a) {
    case 1:
        console.log('aは1です');
        break;
    case 2:
        console.log('aは2です');
    case 3:
        console.log('aは3です');
}

break文を置かない場合、if文とは異なり、caseと値が合致した以降の処理がすべて行なわれます。

このサンプルの場合、変数aが1の場合は「aは1です」とコンソールに表示されます。2の場合は「aは2です」「aは3です」の2つが表示され、3の場合は「aは3です」のみが表示されます。

breakの場所を変更することで、より複雑な挙動を設定することも可能です。

default

switch (a){
    case 1:
        console.log('aは1です');
        break;
    case 2:
        console.log('aは2です');
        break;
    case 3:
        console.log('aは3です');
        break;
    default:
        console.log('aはそれ以外です');
        break;
}

defaultは、すべてのcaseと条件が合致しなかった場合に実行する処理です。必ずしもdefaultを挿入する必要はなく、条件外に対する処理が必要ない場合は省略できます。

このコードでは、変数aがcaseで指定したもの以外の場合はすべて「aはそれ以外です」とコンソールに表示します。

〜以上という書き方

switch (true){
    case a>=10:
        console.log('aは10以上です');
        break;
}

以上や以下など、caseに式を記述したい場合、switch文の式にtrueを挿入し、switch(true)と記述することで、case部分に式を記述できます。caseに記述された式によって処理を分岐できるため、単純な変数の参照と異なり、複雑な条件分岐が可能です。

例えば変数aと変数bの値の合計や差分によって処理を変更するような場合も、この記述方法を用いて行ないます。

このサンプルの場合、変数aが10以上であればコンソールに「aは10以上です」と表示します。

switchをネスト（入れ子）する

switch (a){
    case 1:
        switch (birthplace){
            case '東京':
                console.log('aは1で、かつ出身地は東京です');
                break;
        }
    break;
}

複数の要素を組み合わせて条件を分岐させたい場合は、ネスト（入れ子）して記述することで、複数の条件を設定することができます。

サンプルでは変数aが1の場合でcaseを作り、続いて変数birthplaceを参照し、東京の場合は「aは1で、かつ出身地は東京です」とコンソールに表示します。

switch文をネストすることで、変数aが異なる場合、変数birthplaceが東京でも違うメッセージをコンソールに表示できます。

このネストは、switch文に対してif文やwhile文などを設定でき、複雑な条件の組み合わせを作ることが可能です。