switch文を使って条件を細かく設定する。

以前は複数のifelse文を用いて月の入力を促して、その結果を踏まえた季節を表示するサンプルプログラムを紹介しました。しかし、ifelseだけで表記をするとコードは読みにくくなります。

そこで、今回書いていくのがswitch文と呼ばれるものです。switch文は、変数や式の値に応じて、処理を個別に設定できます。括弧内「()」の値に対応するcase文にジャンプして、break文でブロックを抜けます。

実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>switch文の使い方</title>
   
</head>
<body>
    
<script>

    //月を入力する。
    var month = prompt("月を入力してください");
    
    //文字列を数値に変更する
    month = Number(month);
    
    switch( month ){
        case 12:
        case 1:
        case 2:
            //入力した月が12月~2月なら
            //ここの処理を行う
            document.write("<h1>冬</h1>");
            
            //ブロックを抜ける
            break;
        case 3:
        case 4:
        case 5:
            //入力した月が3月~5月なら
            //ここの処理を行う
            document.write("<h1>春</h1>");
            //ブロックを抜ける
            break;
        case 6:
        case 7:
        case 8:
            //入力した月が6月~8月なら
            //ここの処理を行う
            document.write("<h1>夏</h1>");
            //ブロックを抜ける
            break;
        case 9:
        case 10:
        case 11:
            //入力した月が9月~11月なら
            //ここの処理を行う
            document.write("<h1>秋</h1>");
            //ブロックを抜ける
            break;
        default:
            //上記のどのケースにも一致しない場合は
            //ここの処理を行う
            document.write("<h1>1~12の値を入力してください。</h1>");
    }
    /*
        switchの後ろの括弧「()」の中の値に応じて、対応するcase文に
        ジャンプします。case文はジャンプ先を示す目印見たいもので
        ラベルと呼ばれます。命令ではないのでなんら処理を行いません。
        ジャンプ後はcase文の下の処理を行い、break分まで来ると
        switch文を抜けます。
    */
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>switch文の使い方</title>

</head>

<body>

//月を入力する。

var month = prompt("月を入力してください");

//文字列を数値に変更する

month = Number(month);

switch( month ){

case 12:

case 1:

case 2:

//入力した月が12月~2月なら

//ここの処理を行う

document.write("<h1>冬</h1>");

//ブロックを抜ける

break;

case 3:

case 4:

case 5:

//入力した月が3月~5月なら

//ここの処理を行う

document.write("<h1>春</h1>");

//ブロックを抜ける

break;

case 6:

case 7:

case 8:

//入力した月が6月~8月なら

//ここの処理を行う

document.write("<h1>夏</h1>");

//ブロックを抜ける

break;

case 9:

case 10:

case 11:

//入力した月が9月~11月なら

//ここの処理を行う

document.write("<h1>秋</h1>");

//ブロックを抜ける

break;

default:

//上記のどのケースにも一致しない場合は

//ここの処理を行う

document.write("<h1>1~12の値を入力してください。</h1>");

}

switchの後ろの括弧「()」の中の値に応じて、対応するcase文に

ジャンプします。case文はジャンプ先を示す目印見たいもので

ラベルと呼ばれます。命令ではないのでなんら処理を行いません。

ジャンプ後はcase文の下の処理を行い、break分まで来ると

switch文を抜けます。

</script>

</body>

</html>

switch( num ){ //この値を見て対応するcase文にジャンプする
case 1:
	//値が１のとき
	break;
case 2:
	//値が２のとき
	break;
case 3:
	//値が３のとき
	break;
default:
	//上記のいずれのcase の値にも合致しない時
}

switch( num ){ //この値を見て対応するcase文にジャンプする

case 1:

//値が１のとき

break;

case 2:

//値が２のとき

break;

case 3:

//値が３のとき

break;

default:

//上記のいずれのcase の値にも合致しない時

}

文字列を数値に変換するNumber関数

サンプルコード上にて、入力ダイアログボックスを表示するpromptメソッドの戻り値は文字列です。文字列を数値として扱うためには、文字列を数値に変換する必要があります。今回登場したNumber関数を使って、文字列を数値に変換できます。

関数とは、、処理の塊を名前(関数名)で呼び出せるようにしたものです。メソッドと同じように引数を処理して戻り値を返します。ただし、メソッドのようにオブジェクトに依存はせず、単独で呼び出すことが可能です。

なお、変数monthの値が文字列でも、switch文で使うことはできますが、その場合caseの後の値は「"」で囲って、文字列として比較します。
case "1":
case "2":　といった感じにです。

比較演算子の数値と文字列の処理

前回まで、if文では、変数の値を数値に変換する処理はしておりません。これまでに出てきたコードは

 //変数scoreは文字列
 score = prompt("点数を入力してください",50);

if( score > pass ){ //文字列と数値を比較している
　＊＊処理＊＊
}

//変数scoreは文字列

score = prompt("点数を入力してください",50);

if( score > pass ){ //文字列と数値を比較している

　＊＊処理＊＊

}

javaScriptでは、実は比較演算子で数を表す文字列を比較しようとすると自動的に数値に変換された上で比較されます。

"100" >= 5
↓
100 >= 5
↓
true

といった具合になります。私のように他のプログラミング言語からjavaScriptを学ぶとこういうのが気になります。たしかに便利なのですが・・・