※こちらの記事は、プロスタ編集部が学習者の多いJavaScriptの文法記事を公開することで、皆様の学習にお役に立ちたい意図で投稿しております。
参考サイト：【JavaScript入門】Switch文で条件分岐する方法
【JavaScript入門】Switch文で条件分岐する方法
どの様なプログラミング言語であっても、条件分岐を行いたい時は主にif文を使用します。
しかし、同じ様な条件がたくさん用意されている場合、if文を使用すると少し面倒になります。書く手間が掛かる点も嫌ですが、コードの可読性が落ちる事が一番嫌なところです。プログラムコードはシンプルに分かりやすく書くよう心掛けたいですよね。
そんな場合は、多方向分岐の構文を使いましょう。JavaScriptの場合は、Switch文を使います。
例)同じ様な条件が多い場合（if文）
Var tmp = “アテネ”
if (tmp == "東京" || tmp == "大阪") { tmp2 = "日本"; }
else if (tmp == "ワシントン") { tmp2 = "アメリカ"; }
else if (tmp == "北京") { tmp2 = "中国"; }
else if (tmp == "カトマンズ") { tmp2 = "ネパール"; }
else if (tmp == "アテネ") { tmp2 = "ギリシア"; }
else { tmp2 = "不明"; }
Switch文の使い方
Switch文の基本的な構文は「Switch(値)」で判断基準の値を設定し、「Case 分岐1:」で条件を設定します。
Caseの条件に合う場合の処理を記述し、処理が終わった場合は必ず「Break;」を記述します。Switch文は、Caseで始まってBreakで終わるようになっています。
また、「それ以外」を記述したい場合は、defaultを使用します。Ifで言う所の、elseですね。defaultは「それ以外」なので、最後に記述します。
Switch(値){
Case 分岐1:
実行文;
Break;
default:
実行文;
Break;
}
例）同じ様な条件が多い場合（Switch文）
下の例では、tmpに都市の名前が入ります。Caseで指定された条件と合致すると、tmp2に国名が入ります。
switch (tmp)
{
case "東京":
tmp2 = "日本";
break;
case "大阪":
tmp2 = "日本";
break;
case "ワシントン":
tmp2 = "アメリカ";
break;
case "北京":
tmp2 = "中国";
break;
case "カトマンズ":
tmp2 = "ネパール";
break;
case "アテネ":
tmp2 = "ギリシア";
break;
default:
tmp2 = "不明";
break;
}
応用と注意点
さて、前回の例の部分には、値が「東京」の場合と「大阪」の場合で、同じ処理を記述している事に気付いたでしょうか？可読性やメンテナンスを考えると同じ処理を記述するのは避けたいですよね。
東京と大阪の部分はこの様に記述できます。
case "東京":
case "大阪":
tmp2 = "日本";
break;
Caseの条件は重ねることが出来るのです。Ifで言う所の、「 || 」(または)ですね。
ところで、switch文はcaseで始まりbreakで終わると書きましたが、breakを書き忘れるとどうなるか判りますか？Breakを書き忘れると、そのまま処理は流れていってしまいます。どういうことかというと、次の例で見てみましょう。
case "東京":
case "大阪":
tmp2 = "日本";
//break;
case "ワシントン":
tmp2 = "アメリカ";
break;
この様な場合、値に「東京」が入っていても、breakがないので処理が止まらず、「case “ワシントン”」まで処理は流れてしまいます。結果、tmp2にはアメリカが入ります。都市「東京」の所属する国は「アメリカ」になってしまいましたね。要注意です。
サンプル
サンプルを用意しました。色々といじって見て、処理の流れを試してみてください。
<html>
<head>
<meta charset="Shift-JIS" />
<title>JavaScriptでSwitch文</title>
<script type="text/javascript">
<!--
//コンボボックスが選択されると実行されるファンクション
function setCountry(){
var tmp = document.baseForm.selCity.value;
var tmp2 = "";
/* If文で書いた場合
if (tmp == "東京" || tmp == "大阪") { tmp2 = "日本"; }
else if (tmp == "ワシントン") { tmp2 = "アメリカ"; }
else if (tmp == "北京") { tmp2 = "中国"; }
else if (tmp == "カトマンズ") { tmp2 = "ネパール"; }
else if (tmp == "アテネ") { tmp2 = "ギリシア"; }
else { tmp2 = "不明"; }
*/
//Switch文で書いた場合
switch (tmp)
{
case "東京":
case "大阪":
tmp2 = "日本";
break;
case "ワシントン":
tmp2 = "アメリカ";
break;
case "北京":
tmp2 = "中国";
break;
case "カトマンズ":
tmp2 = "ネパール";
break;
case "アテネ":
tmp2 = "ギリシア";
break;
default:
tmp2 = "不明";
break;
}
document.getElementById('Country').innerHTML=tmp2;
}
// -->
</script>
</head>
<body>
<form name="baseForm">
<!-- コンボボックスを作ります -->
都市を選択します<br>
<select name="selCity" onchange="setCountry()">
<option value="東京">東京</option>
<option value="大阪">大阪</option>
<option value="ワシントン">ワシントン</option>
<option value="北京">北京</option>
<option value="カトマンズ">カトマンズ</option>
<option value="アテネ">アテネ</option>
<option value="○×">なんちゃらかんちゃら</option>
</select>
</form>
選択された都市のある国は、<br>
<div id="Country"></div>です。
</body>
</html>