JavaScript入門 switch文を使った条件分岐の方法

スポンサーリンク

JavaScript

前回の記事(JavaScript入門 if文を使った条件分岐の方法)では、JavaScriptにおいてif文を使って条件分岐をする方法について見てきました。
条件分岐とは何か、if文でどのように条件分岐をするのかについて理解できましたか?

今回も条件分岐なのですが、if文ではなくswitch文を使ったバージョンです。
switch文は、複数の条件分岐をする場合に有効な方法です。
if文で書くときよりも効率良くスッキリ書ける場合があります。

ここでは、switch文の基本的な使い方について確認していきますので…。
if文との違いを意識しながら読み進めていってください。

スポンサーリンク

switch文の基本構文

それでは、早速switch文による基本構文を見ていきましょう。
switch文は以下のように書きます。

switch(式) {
  case 値1:
    処理1;
    break;
  case 値2:
    処理2;
    break;
  case 値3:
    処理3;
    break;
  default:
    処理4;
    break;
}

まず、switchの式を評価します。
そして、式の評価結果に該当するcaseの値の部分に書かれている処理を実行します。
処理が終了したらswitch文を抜けます。

caseの隣に書くのは、式の値です。
caseは、いくつでも書くことができます。

breakは、switch文から抜け出す時に使います。
これを忘れてしまうと、次のcaseの内容まで実行してしまいます。
くれぐれも注意してください。

defaultは、他のcaseの値に該当しなかった場合の処理を定義します。
まさにデフォルト処理を定義するわけです。
ちなみに、このdefaultはあっても無くても大丈夫です。
基本的には書いておくと良いのですけどね。

switch文のサンプル

それでは、switch文のサンプルを見ていきましょう。
ここでは、天気予報をするべく、天気によって条件分岐をすることを想定しています。
「晴れ」「くもり」「雨」「雪」のいずれかで条件分岐させます。

var weather = '雪';
switch(weather) {
  case '晴れ':
    document.write('今日は晴れるでしょう!');
    break;
  case 'くもり':
    document.write('今日はくもるでしょう!');
    break;
  case '雨':
    document.write('今日は雨が降るでしょう!');
    break;
  case '雪':
    document.write('今日は雪が降るでしょう!');
    break;
  default:
    document.write('今日は不明の天気でしょう!');
    break;
}

if文との比較

実は上記の処理。
if文で書くこともできるということが分かるかと思います。
具体的には、以下のようになりますね。

var weather = '雪';
if(weather == '晴れ') {
  document.write('今日は晴れるでしょう!');
} else if(weather == 'くもり') {
  document.write('今日はくもるでしょう!');
} else if(weather == '雨') {
  document.write('今日は雨が降るでしょう!');
} else if(weather == '雪') {
  document.write('今日は雪が降るでしょう!');
} else {
  document.write('今日は不明の天気でしょう!');
}

1つの式を使って複数に条件分岐する場合には、基本的にはswitch文を使ったほうが分かりやすいです。
ソースコードもスッキリしていて、可読性も高いです。

複数のcaseで同じ処理を行う方法

caseによっては、他のcaseと同じ処理を行いたい時があるかもしれませんね。
その場合には、同じ処理を行いたいcaseを並べて、breakを意図的に抜いて記述します。
具体例は以下のようになります。
この例では、nは0以上の数値が入っているとします。

var n = 3;
switch(n) {
  case 0:
  case 1:
  case 2:
    document.write('nは0〜2の範囲にあります。');
    break;
  case 3:
  case 4:
    document.write('nは3〜4の範囲にあります。');
    break;
  case 5:
    document.write('nは5です。');
  default:
    document.write('nは6以上です。');
    break;
}

このプログラムでは、nが0〜2の場合には、case 2の時の処理が実行されます。
nが3,4の時には、case 4の時の処理が実行されます。
それ以外の時には、defaultの処理が実行されます。

この場合、nが3ですので「nは3〜4の範囲にあります。」が表示されます。

練習問題

それでは、以上を踏まえて練習問題を解いてみましょう。

入力された数字に該当する季節を表示するプログラムを作りたいとします。
1〜12の数字nは入力してもらいます。
入力された数字nが3〜5の場合は「春」、6〜8の場合は「夏」、9〜11の場合は「秋」、12・1・2の場合は「冬」と表示させます。
このうち、季節を表示させる部分のプログラムをswitch文を使って作成してください。

練習問題の解答

それでは、解答です。

caseは全部で1〜12の12通りですね。
そして、それぞれのnの値に該当する季節を表示してやればよいです。
プログラムの解答例は以下のようになります。

switch(n) {
  case 12:
  case 1:
  case 2:
    document.write("冬");
    break;
  case 3:
  case 4:
  case 5:
    document.write("春");
    break;
  case 6:
  case 7:
  case 8:
    document.write("夏");
    break;
  case 9:
  case 10:
  case 11:
    document.write("秋");
    break;
}

まとめ

今回の記事では、JavaScriptにおいてswitch文を使って条件分岐する方法について確認してみました。
条件分岐には、if文とswitch文があるんだなというのを覚えてください。
そして、条件に応じて効率良く使い分けて、条件分岐を書けるようになると良いでしょう。

次回は、文字列を扱う方法について見ていきます。
これまでにさりげなく文字列を使ってきましたが…。
ここで改めてその使い方について確認しましょう。
ぜひお楽しみに!

前回 ≫ JavaScript入門 if文を使った条件分岐の方法
次回 ≫ JavaScript入門 文字列の基本操作(比較/検索/置換/削除/分割/連結)

コメント