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

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

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

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

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

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

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

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

JavaScriptのswitch文の基本

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文などを設定でき、複雑な条件の組み合わせを作ることが可能です。

if文との使い分け

if文はどのような条件も設定できますが、条件の数が増えるとコードが煩雑になりやすく、可読性やメンテナンス性が低下するデメリットがあります。一方でswitch文は、条件分岐が複数のパターンになる場合、if文よりも簡潔に記述でき、可読性を維持しながら短いコードを書けるメリットがあります。

使い分けの目安として、条件分岐が3パターンであればif...elseif...elseで済むため、if文が良いでしょう。一方で条件分岐が4パターン以上になる場合や、複数の要素を組み合わせ、複雑な分岐を行なう場合はswitch文のほうが適しています。

if文とswitch文は条件分岐を行なう構文で挙動が似ていますが、細かな仕様は異なります。どちらかの構文に偏らず、if文とswitch文のどちらで記述するほうが読みやすい条件であるかを考えながら選択すると良いでしょう。

JavaScriptのswitch文を使いこなそう!

switch文を使いこなせるようになると、JavaScriptのプログラミングを行なう上で条件分岐の記述方法に大きな幅が生まれます。

switch文には多くの条件定義の方法があり、if文と組み合わせることでより細かな条件分岐と処理が行なえます。UIの設計などには欠かせないため、フロントエンドエンジニアとしては使いこなすテクニックは必須といえるでしょう。

if文が条件分岐の基本であるなら、switch文はよりプログラミングコードの可読性を上げるための1つのオプションとしてしっかりマスターしましょう。

登録拠点登録拠点

パソナ

パソナテックは全国10拠点にて、転職相談・お仕事紹介・各種イベント・セミナーを実施しています。

ページトップ