今回はJavaScriptでのswitch文の使い方について、書いています。
使い方と基本的な動作検証を確認した後に、3パターンのサンプルコードを書いています。
JavaScript入門シリーズの前回は、JavaScriptの配列について書きました。
switch文の使い方は？
switch文は条件を分岐させるための構文になります。
実際に使う場合は、下記のように使用します。
let value = 2;
switch(value) {
case 1:
alert("値は1です。");
break;
case 2:
alert("値は2です。");
break;
case 3:
alert("値は3です。");
break;
default:
alert("デフォルトです。");
break;
}
switchに値を渡すことで、判定させることができます。
switch(value)でvalue変数を判定させて、条件分岐しています。
caseに同じ(=)になる条件をいくつか書いています。
switchに指定した値が、caseに書いた値に該当するときに、処理されます。
今回はvalueに「2」が入っているので、alertで「値は2です」が出力されます。
breakはcaseから抜けて、処理をするために必要です。
caseにbreakがない場合は、下に抜けて処理が続きます。
例えば、今回の場合で下記のようにbreak文がない場合は、「値は2です」「値は3です」という形でalertが2回実行されます。
switch(value) {
case 1:
alert("値は1です。");
break;
case 2:
alert("値は2です。");
case 3:
alert("値は3です。");
break;
}
defaultはcaseの条件に該当しない場合に処理されます。
今回の場合だと、valueが1・2・3でない場合です。
4や5などの場合は、defaultで処理されることになります。
switch文を書いてみよう
実際にswitch文の処理を書いて実行してみましょう。
switchTest.htmlという名前で、下記のファイルを作成してください。
<html>
<head>
<meta charset="UTF-8" />
<title>switch文のテスト</title>
<script>
function switchTest() {
let value = 2;
switch(value){
case 1:
alert("値は1です。");
break;
case 2:
alert("値は2です。");
break;
case 3:
alert("値は3です。");
break;
default:
alert("デフォルトです。");
break;
}
}
</script>
</head>
<body>
<button onclick="switchTest()">switch文のテスト</button>
</body>
</html>
ボタンをひとつ用意して、ボタンをクリックすると自作したswitchTest関数が動くようにしました。
switchTest関数の処理ですが、value変数を作った後に2を入れています。
その後にswitch文を使用して、value変数の値を判定しています。
value変数の値は2なので、アラートで「値は2です。」が表示されて、処理が終了します。
動作確認をする
作ったHTMLファイルを開いて、動作を確認してみましょう。
ファイルを開くと、下記のようにHTMLで設置したボタンが表示されます。
クリックすると、このように「値は2です。」が表示されました。
switch文を使用した3パターンのコード
switch文を使用したサンプルコードをいくつか書いてみました。
先ほどのswitchTest関数の内容を書き換えると、動かすことが可能です。
breakを削除してみる
breakを書いていた箇所を下記のように削除します。
function switchTest() {
let value = 2;
switch(value){
case 1:
alert("値は1です。");
case 2:
alert("値は2です。");
case 3:
alert("値は3です。");
default:
alert("デフォルトです。");
}
}
こうするとvalueが2なので、まずcase 2の処理をします。
そして、break文がないため、次のcase 3のアラート表示もされます。
case 3にもbreakがないため、最後にdefaultの処理が行われて、3回アラートが出るようになります。
caseに無い値を設定する
下記のように、caseとして用意されていない値をvalue変数に入れます。
function switchTest() {
let value = 99;
switch(value){
case 1:
alert("値は1です。");
break;
case 2:
alert("値は2です。");
break;
case 3:
alert("値は3です。");
break;
default:
alert("デフォルトです。");
break;
}
}
そうするとcaseにないため、結果としてdefaultの箇所が処理されて「デフォルトです。」が表示されます。
文字列を設定する
文字列でも、もちろん判定可能です。
下記のように関数の内容を変更して、試してみます。
function switchTest() {
let value = '夏';
switch(value){
case '春':
alert("あたたかくなってきました");
break;
case '夏':
alert("暑いですね");
break;
case '秋':
alert("涼しくなってきました");
break;
case '冬':
alert("寒いですね");
break;
default:
alert("デフォルトです");
break;
}
}
valueに夏が入っています。
switchを使用して、valueの値を判定しています。
case '夏'に該当するので、「暑いですね」のアラートが表示されて、処理が終了します。
おわりに
今回はJavaScriptでのswitch文について見ていきました。
条件が単純にイコールになる場合は、if文ではなくて、こちらのswitch文を使用していくと良いです。
理由としては簡潔でコードが見やすくなるかと思います。
breakのつけ忘れや、defaultの条件にも気をつけて使っていきたいですね。
コメント