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 を実行

ifElse4.html

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

switchCase1.html

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

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

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

式を1回評価し、その結果と各caseの値を厳密等価演算子（===）と同じ規則で比較する。値1と一致すれば処理1を、値2と一致すれば処理2を実行する。どのcaseにも一致しなければ、任意で指定したdefaultの処理3を実行する。
switch文は、今回の例題のように、1つの値を複数の候補と比較して処理を分ける場合に適している。範囲や複雑な条件を判定する場合は、if～else文の方が分かりやすいこともある。

今回の例題では、複数のcaseで同じ処理を実行すればよいので、次のようにcaseを続けて書く。式の結果が値1、値2、値3のいずれかなら処理1を、値4、値5、値6のいずれかなら処理2を、その他の値なら処理3を実行する。

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

caseとdefaultは、処理の開始位置を示すラベルであり、それだけでは処理を囲むブロックや終了位置にはならない。breakを実行するとswitch文を抜け、その次の文へ進む。

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

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

式の結果が値1なら処理1、処理2、処理3を順番に実行し、値2なら処理2、処理3を、その他の値なら処理3を実行する。この動きをフォールスルーという。意図せずbreakを書き忘れると不具合になるが、複数のcaseで同じ処理を共用するため、意図的に利用することもできる。

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

"switchCase2.html" は、ラジオボタンを選び「選択」ボタンを押すと、その選択に対応する文字を表示するプログラムである。選択されたラジオボタンのvalue属性の値を読み、switch文で場合分けしている。
HTMLの書き方と合わせて覚えておこう。

switchCase2.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.elements.selector.value;
  30:     let ret;
  31: 
  32:     //選択結果
  33:     switch (selector) {
  34:         case 'apple':
  35:             ret = 'リンゴ';
  36:             break;
  37:         case 'peach':
  38:             ret = 'モモ';
  39:             break;
  40:         case 'orange':
  41:             ret = 'オレンジ';
  42:             break;
  43:         default:
  44:             ret = 'エラー：選択肢が間違っています';
  45:             break;
  46:         
  47:     }
  48: 
  49:     //結果を表示する
  50:     document.getElementById('ret').textContent = ret;
  51: }
  52: </script>

switchCase2.html

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

if～else文と同様、多くのプログラミング言語にswitchに相当する条件分岐がある。ただし、書き方やフォールスルーの有無は言語によって異なる。

• switch - JavaScript：MDN Web Docs
• SWITCH 関数：Microsoft サポート