3.2 switch〜case文

1. サンプル・プログラムのダウンロード
2. 月の大小を求める
3. switch～case文
4. breakの使い方
5. ラジオボタンで処理を分岐
6. コラム：ExcelのSWITCH関数

ダウンロード

グレゴリオ暦では、31日ある月を大の月、それ以外を小の月と呼ぶ。具体的には、1月、3月、5月、7月、8月、10月、12月が大の月で、2月、4月、6月、9月、11月が小の月である。
入力した月が大の月が小の月かを判定するプログラムが "ifElse4.html" である。

ifElse4.html を実行

  20: <script>
  21: /**
  22:  * 判定と画面表示
  23: */
  24: function ifElse4() {
  25:     //変数宣言
  26:     let month = document.getElementById('month').value;     //月
  27:     month = parseInt(month, 10);                            //10進整数化
  28:     let ret;
  29: 
  30:     //月の大小判定
  31:     if (month === 1) {
  32:         ret = '大の月';
  33:     } else if (month === 2) {
  34:         ret = '小の月';
  35:     } else if (month === 3) {
  36:         ret = '大の月';
  37:     } else if (month === 4) {
  38:         ret = '小の月';
  39:     } else if (month === 5) {
  40:         ret = '大の月';
  41:     } else if (month === 6) {
  42:         ret = '小の月';
  43:     } else if (month === 7) {
  44:         ret = '大の月';
  45:     } else if (month === 8) {
  46:         ret = '大の月';
  47:     } else if (month === 9) {
  48:         ret = '小の月';
  49:     } else if (month === 10) {
  50:         ret = '大の月';
  51:     } else if (month === 11) {
  52:         ret = '小の月';
  53:     } else if (month === 12) {
  54:         ret = '大の月';
  55:     } else {
  56:         ret = 'エラー：1以上12以下の整数を入力してください';
  57:     }
  58: 
  59:     //結果を表示する
  60:     document.getElementById('ret').innerHTML = ret;
  61: }
  62: </script>

if～else文を使って、月の数だけブロック文を書く。1以上12以下の整数で無ければ、最後のelse文でエラーメッセージを代入する。

当然のことだが、エラーメッセージを除くと、ブロック文の中身はretに '大の月' を代入するか '小の月' を代入するかの2通りしかない。これを重複して書くのは、いかにも非効率的である。
偶数か奇数かによって月の大小が判定できるわけではない。
条件演算子（OR演算子）を使えばブロック文は減らすことができるが、

(month == 1) || (month == 3) || (month == 5) || (month == 7) || (month == 8) || (month == 10) || (month == 12)

のように条件式が長くなってしまう。

JavaScriptの switch～case文を使うと、プログラムをシンプルにできる。

switchCase1.html を実行

  20: <script>
  21: /**
  22:  * 判定と画面表示
  23: */
  24: function switchCase1() {
  25:     //変数宣言
  26:     let month = document.getElementById('month').value;     //月
  27:     month = parseInt(month, 10);                            //10進整数化
  28:     let ret;
  29: 
  30:     //月の大小判定
  31:     switch (month) {
  32:         case 1:
  33:         case 3:
  34:         case 5:
  35:         case 7:
  36:         case 8:
  37:         case 10:
  38:         case 12:
  39:             ret = '大の月';
  40:             break;
  41:         case 2:
  42:         case 4:
  43:         case 6:
  44:         case 9:
  45:         case 11:
  46:             ret = '小の月';
  47:             break;
  48:         default:
  49:             ret = 'エラー：1以上12以下の整数を入力してください';
  50:             break;
  51:         
  52:     }
  53: 
  54:     //結果を表示する
  55:     document.getElementById('ret').innerHTML = ret;
  56: }
  57: </script>

switch～case文は次のようにして使う。

switch (式) {
    case 値1:
        ブロック1
        break;
    case 値2:
        ブロック2
        break;
    default:
        ブロック3
        break;
}

式を評価し、その結果が値1ならブロック1を、値2ならブロック2を‥‥その他の値の時はブロック3を実行する。caseは、何個でも指定できる。
switch～case文は、今回の例題のように、条件式は1つだが、その値によってプログラムの流れを変える時に使う制御文である。

今回の例題では、複数のcaseで同じブロック文を実行すればいいので、次のような書き方になっている。式の結果が値1、値2、値3のいずれかならブロック1を、値4、値5、値6のいずれかならブロック2を、その他の値の時はブロック3を実行する。この場合も、caseは何個でも指定できる。

switch (式) {
    case 値1:
    case 値2:
    case 値3:
        ブロック1
        break;
    case 値4:
    case 値5:
    case 値6:
        ブロック2
        break;
    default:
        ブロック3
        break;
}

ここで注意してほしいのが、case文のあとに来るブロックは、ブレース {...} で囲まれていない――つまり、ブロック文ではないというところである。その代わりに break を使って、そこで処理を中断して switch文 を終了するように指定している。

もし break を忘れて次のように書いてしまうと、

switch (式) {
    case 値1:
        ブロック1
    case 値2:
        ブロック2
    default:
        ブロック3
}

式の結果が値1ならブロック1、ブロック2、ブロック3を順番に実行し、値2ならブロック2、ブロック3を、その他の値の時はブロック3を実行することになり、期待とは違う結果になってしまう。

Webアプリケーションでは、ラジオボタンを使って処理を分岐することがよくある。このとき、よく switch～case文を使う。

"switchCase2.html" に、ラジオボタンを選んで選択ボタンを押すと、ラジオボタン対応する文字を表示するという簡単なプログラム例を示す。ラジオボタンの value の値を読んで、switch～case文 で場合分けしている。
HTML文の書き方と合わせて覚えておこう

switchCase2.html を実行

  20: <script>
  21: /**
  22:  * 判定と画面表示
  23: */
  24: function execute() {
  25:     //form要素を取得
  26:     let element = document.getElementById('myform');
  27: 
  28:     //ラジオボタングループ name='selector' の値を取得
  29:     let selector = element.selector.value;
  30: 
  31:     //選択結果
  32:     switch (selector) {
  33:         case 'apple':
  34:             ret = 'リンゴ';
  35:             break;
  36:         case 'peach':
  37:             ret = 'モモ';
  38:             break;
  39:         case 'orange':
  40:             ret = 'オレンジ';
  41:             break;
  42:         default:
  43:             ret = 'エラー：選択肢が間違っています';
  44:             break;
  45:         
  46:     }
  47: 
  48:     //結果を表示する
  49:     document.getElementById('ret').innerHTML = ret;
  50: }
  51: </script>

  64: <form id="myform">
  65: <input type="radio" name="selector" value="apple" />リンゴ&nbsp;
  66: <input type="radio" name="selector" value="peach" />モモ&nbsp;
  67: <input type="radio" name="selector" value="orange" />オレンジ&nbsp;
  68: <input type="button" id="exec" value="選択" onClick="execute()" /><br />
  69: </form>

if～else文と同様、大多数のプログラミング言語には switch～case文が備わっている。