【JavaScript入門】Switch文で条件分岐する方法(default/break)

こんにちは、ライターのマサトです！

JavaScriptで複数の条件分岐を行う場合、IF文よりもswitch文の方がスッキリと効率よくプログラミングできる場合があります。また、switch文のよくあるエラーとして、条件式で使われる「==」と「===」の違いが理解できてなくて解決が困難になるケースもよくあります。

そこで、この記事ではこれらの疑問を解決しつつ、基本から応用までswitch文をマスターするためのコツを整理して解説していきますので、ぜひ参考にしてみてください！

switch文の基本について！

まずは、switch文を学習するために、基本的な内容をおさらいしておきましょう。一般的な構文としては、次のとおりです！

switch( 式 ) {


    case 値:
        // 処理を書く
        break;


    case 値:
        // 処理を書く
        break;
    
    case 値: //必要なだけcaseを追加していく…
}

まず最初に式をチェックし、次に値を見ていくのですが、その際に「式」と「値」が一致する「case」を発見したら、その処理を実行した後に「switch文」を抜けます。

ちなみに、breakを書き忘れると、次のcase処理を続けて実行してしまうので注意が必要です。

条件分岐を実行してみよう！

それでは、簡単なサンプルを試しながら、実際にswitch文を実行してみましょう！例えば、天気予報で「晴れ・雨・曇り」のいずれかで処理を分岐させるプログラムは次のようになります。

var weather = '晴れ';


switch( weather ) {
    case '晴れ':
        console.log('今日は晴れです！');
        break;


    case '曇り':
        console.log('今日は曇りです！');
        break;


    case '雨':
        console.log('今日は雨です！');
        break;
}

出力結果は…

今日は晴れです！

となります。このサンプルでは、変数weatherに「晴れ」を代入しているため、caseが「晴れ」と書かれた箇所の処理を実行することになります。

つまり、weatherの値が変わることで、実行する処理を変えられるプログラムをシンプルに実装できるわけです。

「if 〜 else if文」との使い分け

ここまで、基本的な「switch文」の使い方を学習してきましたが、勘の良い人であればIF文でも同じ処理ができることに気づいたかもしれません。それでもswitch文を使う理由として、最も重要なポイントはソースコードの可読性になります！

そこで、IF文（特にelse ifを伴う構文）の基本構文とswitch文との比較について確認していきましょう。

if 〜 else if文の基本構文

switch文で実現される処理のように、複数の条件分岐をIF文で実現するためにはif 〜 else if 構文を活用します。

以下のサンプルコードにてその書き方を確認してみてください。

var num = 10; // １ヶ月にお店を訪れる頻度
var rank;

if(num < 3) { // 5回より少ない
  rank = 'ビジター';
}
else if(num < 10){  // 10回よりも少なかったら
  rank = 'お得意様';
}
else {  // それ以外の場合
  rank = 'VIP';
}

console.log("あなたは" + num + "回訪れているので、" + rank + "クラスです。")

実行結果

あなたは10回訪れているので、VIPクラスです。

このように「else if」を追加すればするほど、新しい条件を増やしていけるのがif 〜 else if構文の特徴です。IF文について基本をしっかり身につけておきたい方は以下の記事が参考になりますので、ぜひ確認してみてください。

switchとif 〜 else if文の使い分け

では具体的にswitch文とif 〜 else if文の使い分けについて解説します。例えば、社員の名前で処理を変えるようなプログラムを作ろうとした場合、IF文だと次のようになります。

var name = '伊藤';


if(name === '田中') {
    // 実行させたい処理を書く
} else if(name === '伊藤') {
    // 実行させたい処理を書く
} else if(name === '川口') {
    // 実行させたい処理を書く
} else if(name === '木村') {
    // 実行させたい処理を書く
}

上の例は、変数nameに格納された「社員の名前」に応じて違った処理を行っていますが、さらに人数が増えていくとソースコードは確実に見づらくなってしまいます。

次に、まったく同じ処理をswitch文で書いてみましょう！

var name = '伊藤';


switch( name ) {
  case '田中':
    // 実行させたい処理を書く
    break;


  case '伊藤':
    // 実行させたい処理を書く
    break;


  case '川口':
    // 実行させたい処理を書く
    break;


  case '木村':
    // 実行させたい処理を書く
    break;
}

これだと、人数が増えてもコードが見やすいですね。このように、1つの変数や値などを使って複数の条件に分岐させる場合は、switch文を使った方がプログラムがスッキリして読みやすくなります。

「default」の使い方

これまでswitch文にcaseを使って条件分岐を行ってきました。

しかし、いずれのcaseにも一致しなかった場合に何か処理をさせたい時はどうすれば良いでしょうか？このような時に使えるのがdefaultです！冒頭でご紹介した天気予報のサンプルに、defaultを追記すると次のようになります。

var weather = '台風';


switch( weather ) {
    case '晴れ':
        console.log('今日は晴れです！');
        break;


    case '曇り':
        console.log('今日は曇りです！');
        break;


    case '雨':
        console.log('今日は雨です！');
        break;


    default:
        console.log('今日は天候に注意してください！');
        break;
}

出力結果は…

今日は天候に注意してください！

となります。このサンプルは、weatherに「台風」が代入されているので、いずれのcaseにも一致しません。なので、最終的にはdefaultの記述がある処理が実行されるようになるわけです。

また、それぞれのcaseの処理は、最後に必ず「break」を記述しています。これがあることで、caseの処理を実行した後に「switch文」を抜けられるようになっているのですが、もしbreakの記載がなければ次のcaseに飛んでしまいます。

複数のcaseで同じ処理をする方法

ここでは、複数のcaseで同じ処理をする方法を解説します。「break」の記載がなければ次の「case」に飛ぶため、次のようなswitch文を書くこともできます。

var item = 3;


switch( item ) {
    case 0:
    case 1:
    case 2:
    case 3:
        console.log('0〜3が入力されました！');
        break;
    case 4:
        console.log('4が入力されました！');
        break;
    case 5:
        console.log('5が入力されました！');
        break;
}

出力結果は…

0〜3が入力されました！

となります。このように書くと、「case 0」〜「case 3」までは同じ処理を実行することになります。つまり、各caseによって違った処理を実行することもできるし、特定のcaseだけ同じ処理にすることも出来るわけです。

厳密等価演算子について

JavaScriptでは、比較演算子として「==（等価演算子）」や「===（厳密等価演算子）」がよく使われますが、この違いをご存知でしょうか？例えば、次のサンプルコードを見てみましょう！

  console.log(5 == '5');

「==」を使って比較すると、どちらの値も同じ「5」なので出力結果はtrueになります。それでは、こちらのコードはどうなるでしょう？

  console.log(5 === '5');

「===」を使うと、出力結果はfalseになります。どちらの値も同じ「5」ですが、型が数値と文字なので同じではないと判断されたわけです。

このように、「===」を使うと値も型も完全に一致しないとtrueにはなりません。そして、switch文も式と値が一致するかどうかの判定に「===」が使われているのです！

例えば、ユーザーの入力を受けてswitch文で処理を分岐する例を見てみましょう！HTMLに数値入力用のinputタグとボタンを配置します。

<input id="num" type="number"/>
<button id="btn">実行</button>

そして、JavaScriptから入力された「数値」を取得し、「switch文」で処理を分岐させます。

var btn = document.getElementById( 'btn' );


btn.addEventListener( 'click', function() {
    var num = document.getElementById( 'num' ).value;
  
    switch( num ) {
        case 1:
            console.log( '1が入力されました' );
            break;
      
        case 2:
            console.log( '2が入力されました' );
            break;
      
        default:
            console.log( '不明な値が入力されました' );
            break;
    }
});

ここまでは、なんの問題もないコードに見えます。ところが、例えばユーザーが「1」を入力して実行すると「case 1」が処理されるのではなく、defaultの処理が実行されます。

つまり、「switch文」はいずれのcaseにも一致しなかったと判断したわけです。この理由がまさに「==」と「===」の違いによるところでして、実はinputタグから取得した数値は文字列になるのです！

そして、先ほども解説しましたがswitch文の判定は「===」なので、caseに設定されている数値「1」と取得した文字の「’1’」だと一致しないというわけです。

そこで、このサンプルコードを正しく動作させるには、取得した「’1’」を数値に変換しなければいけません。一般的にはparseInt()を使って変換するのが良いでしょう。

// 取得した「num」を数値に変換する
switch( parseInt(num, 10) ) {


}

このように書くと、文字が数値に変換されるので、期待通りの動作が実現できるようになります。ちなみに、parseIntの第2引数に記述している「10」は10進数を表しており、日常的に利用する数値の意味なので覚えておきましょう。

まとめ

今回は、「switch文」についての基本から応用までを学習しました。もう一度、ポイントだけを簡単にまとめると次のようになります！

これらの内容を復習しつつ、今後も積極的に「switch文」を有効に活用していきましょう！