JavaScriptの「switch文」を使って条件分岐する方法について解説します。「switch文」は、ある式（変数）を評価した結果と複数の値と一致するかどうかを調べ、それぞれ異なる処理を実行します。
目次
1. 「switch文」の基本構文
「switch文」は、ある式（や変数）の結果とcaseの値が一致した場合に特定の処理を実行します。
switch文の基本構文です。
switch ( 式 ){
case 値1:
式の評価結果と値1が同じ場合に実行する処理;
break;
case 値2:
式の評価結果と値2が同じ場合に実行する処理;
break;
case 値3:
式の評価結果と値3が同じ場合に実行する処理;
break;
・・・
}
「switch文」における式の評価は一度のみです。switch文の式が評価され、その結果が例えば「値2」のcaseと一致した場合は、そのあとに続くコードを実行します。実行後に「break」がある場合は、それ以降の処理は行いません。「break」キーワードについては、次の章で詳しく解説します。
JavaScriptのサンプルコード「JS_Sample0.html」を保存して「switch文」の動きを確認してみましょう。
●JS_Sample0.html
<!DOCTYPE html>
<html>
<head>
<title>Introduction to JavaScript</title>
</head>
<body>
<h2>JavaScript Switch Statement</h2>
<script>
var num = 3;
var day;
switch ( num ){
case 0:
day = "日";
break;
case 1:
day = "月";
break;
case 2:
day = "火";
break;
case 3:
day = "水";
break;
case 4:
day = "木";
break;
case 5:
day = "金";
break;
case 6:
day = "土";
}
alert(day + "曜日です。");
</script>
</body>
</html>
変数「num」の値とcaseの値を比較して、一致したcaseの処理を実行します。「num」の数値（0～6）に応じて変数「day」に「日～土」のテキストを代入する処理を実行します。switch文が終了した時点で、numの数値に応じて、day変数にテキストが入っています。一番最後の「alertメソッド」でブラウザーに表示する文字列を作成しています。
2. 「break」キーワード
「break」キーワードをcase内で使うと、それ以降のコードの実行を飛ばして、Switch文をcaseの評価を終了します。必ず処理内にbreakをつけないといけないというわけではありません。用途に応じた使い方ができます。
試しに、サンプルコードのbreakを外すとどのような結果が表示されるか見てみましょう。
●JS_Sample1.html
<script>
var num = 3;
var day;
switch ( num ){
case 0:
day = "日";
case 1:
day = "月";
case 2:
day = "火";
case 3:
day = "水";
case 4:
day = "木";
case 5:
day = "金";
case 6:
day = "土";
}
alert(day + "曜日です。");
</script>
「JS_Sample1.html」では、numの評価結果は「3」になり、最初は「case 3:」のブロック内の処理が実行され、「day」には「水」が代入されます。その後には「break」キーワードがない為、「case 4:」、「case 5:」、「case 6:」と実行されます。そのたびに変数「day」には「"木"」、 「"金"」、「"土"」と代入されていきますので、一番最後に代入された「"土"」がalertメソッドで表示される値になります。
3. 「default」キーワード
「default」キーワードに続く処理は、どのcaseの値とも一致しない場合に実行されます。
●JS_Sample2.html
<!DOCTYPE html>
<html>
<head>
<title>Introduction to JavaScript</title>
</head>
<body>
<h2>JavaScript Switch Statement</h2>
<script>
var num = 8;
var txt1 = "曜日です。";
var msg1;
switch ( num ){
case 0:
msg1 = "日" + txt1;
break;
case 1:
msg1 = "月" + txt1;
break;
case 2:
msg1 = "火" + txt1;
break;
case 3:
msg1 = "水" + txt1;
break;
case 4:
msg1 = "木" + txt1;
break;
case 5:
msg1 = "金" + txt1;
break;
case 6:
msg1 = "土" + txt1;
break;
default:
msg1 = "０～６の数字を入力して下さい。";
}
alert(msg1);
</script>
</body>
</html>
サンプルコードでは、「num」に代入された値が「8」なので、caseの「0～6」にマッチしません。その場合に実行されるのが「default」キーワードです。「msg1」変数に代入された「０～６の数字を入力して下さい。」がalertメッセージとして表示されます。
4. 練習問題 -Exercise!-
4.1. 練習問題１
numが「2」の場合に、「夜中です。」を表示するcaseを追加してswitch文を完成させて下さい。
ヒント！：「case 2」のブロックを追加します。
<p id="aaa"></p>
<script>
var text;
var num = 1;
switch ( num ) {
case 0:
text = "午前中です。";
break;
case 1:
text = "午後です。";
break;
}
document.getElementById("aaa").innerHTML = text;
</script>
4.2. 練習問題２
以下のサンプルコードには間違いがあります。コードを修正して「JavaScript」を適切に実行できるようにして下さい。
ヒント！：プログラム初心者にありがちな構文ミスです。
<p id="bbb"></p>
<script>
var product_id;
var fruits = "バナナ";
switch ( fruits ) {
case "リンゴ"
product_id = "0001";
break;
case "オレンジ"
product_id = "0002";
break;
case "バナナ"
product_id = "0003";
}
document.getElementById("bbb").innerHTML =
fruits + "の商品番号は" + product_id + "です。";
</script>
関連記事：JavaScriptの配列オブジェクトの使い方
関連記事：JavaScriptの配列要素の値を追加/削除する方法
関連記事：JavaScriptの連想配列を使ってみよう！
