【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; // 1ヶ月にお店を訪れる頻度
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文について基本をしっかり身につけておきたい方は以下の記事が参考になりますので、ぜひ確認してみてください。

JavaScriptでIF文の使い方からif…else ifの活用術までを徹底解説
更新日 : 2019年5月5日

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文は式と値が一致した処理を実行する!
  • 同じ変数や値を使って複数条件分岐する場合はswitch文を使おう!
  • 「case」「break」「default」の使い分けを覚えておこう!
  • 「==」と「===」の違いを理解しておこう!

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

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説