TypeScript実践力を身につける！コードスニペットで学ぶ型付けとインターフェース
2023.06.22
JavaScript
2022.09.02
【JavaScript】switch文で条件分岐！基本の書き方やif文との使い分け
2023.11.15
- 1．switch文の基本
- 2．break文がない場合（フォールスルー）に注意
- 3．defaultの処理を指定する方法
- 4．複数のcaseで同じ処理を実行する方法
- 5．switch文の式で比較演算子を使う方法
- 6．switch文をネストする方法
- 7．if〜else if文との使い分けは？
今回は、条件分岐でよく使用されるswitch文について学習していきましょう。
本記事では、
「複数のcaseで同じ処理を実行するには？」「フォールスルーとは？」
といった基本的な内容から、
「switch文とif文の使い分けは？」
といった内容まで、初級者エンジニア向けに詳しく解説していきます。
1．switch文の基本
switch文は条件分岐のひとつで、式の評価結果に基づいて処理を分け、異なる処理を実行する構文です。複数条件がある場合は、if文よりswitch文を使うほうが、コードがシンプルになりやすいといったメリットがあります。
①基本構文
switch文の基本構文は次の通りです。
switch (式){
case 条件1:
式が条件1と一致する場合に実行する処理;
break;
case 条件2:
式が条件2と一致する場合に実行する処理;
break;
case 条件3:
式が条件3と一致する場合に実行する処理;
break;
default:
式がいずれのcase文とも一致しない場合に実行する処理;
}②処理の流れ
switch文の処理フローは、if文に比べ複雑な作りになっているので、しっかり確認しておきましょう。
処理の流れは以下のようになります。
- 式の評価を行う
- 式の評価結果と最初のcase条件を比較
- case条件と一致しない場合、次のcase条件に続く
- case条件と一致した場合、caseの中の処理をbreak文またはswitch文の最後まで順に実行する
- 一致するcase条件がない場合、default文の中の処理を実行する
③数値の場合
処理の流れを押さえたところで、実際のコードを見ていきましょう。
以下は数値を判定するサンプルコードです。
let number = 2;
switch (number){
case 1:
console.log("1です");
break;
case 2:
console.log("2です");
break;
case 3:
console.log("3です");
break;
default:
console.log("その他の数値です");
}実行結果：
2ですサンプルコードは、変数numberの値によってコンソールに表示する内容を条件分岐しています。
④文字列の場合
次に、文字列を判定するswitch文を見ていきましょう。
let day = "木曜";
switch (day){
case "月曜":
console.log("今日は月曜日です");
break;
case "火曜":
console.log("今日は火曜日です");
break;
case "水曜":
console.log("今日は水曜日です");
break;
case "木曜":
console.log("今日は木曜日です");
break;
case "金曜":
console.log("今日は金曜日です");
break;
case "土曜":
console.log("今日は土曜日です");
break;
case "日曜":
console.log("今日は日曜日です");
break;
default:
console.log("不正な曜日が入力されました!!");
}実行結果：
今日は木曜日です変数dayの曜日によってコンソールに表示する内容を変更しています。
switch文の式が文字列の場合、case条件はシングルクォーテーションまたはダブルクォーテーションで囲んで記述する必要があります。
2．break文がない場合（フォールスルー）に注意
switch文のcaseブロック末尾にある”break”は省略可能です。省略すると、switch文の最後またはbreak文が記述されている箇所まで順に処理が実行されます。このような制御を「フォールスルー」と呼びます。
さきほどのサンプルコードからbreakを外してみましょう。
let day = "木曜";
switch (day){
case "月曜":
console.log("今日は月曜日です");
case "火曜":
console.log("今日は火曜日です");
case "水曜":
console.log("今日は水曜日です");
case "木曜":
console.log("今日は木曜日です");
case "金曜":
console.log("今日は金曜日です");
case "土曜":
console.log("今日は土曜日です");
case "日曜":
console.log("今日は日曜日です");
default:
console.log("不正な曜日が入力されました!!");
}実行結果：
今日は木曜日です
今日は金曜日です
今日は土曜日です
今日は日曜日です
不正な曜日が入力されました!!まず、変数dayの値が case ”木曜”の判定と一致するので、caseの中の処理を実行します。しかし、case内にbreak文がないので、そのままswitch文の最後まで処理が実行されるのが確認できます。
フォールスルーは、break文の記述忘れで意図せず起きてしまう可能性もあり、制御の流れが把握しづらくバグの原因となるため注意しましょう。
3．defaultの処理を指定する方法
switch文のどのcaseにも当てはまらない場合、default処理が動きます。
let city = "福岡";
switch (city){
case "東京":
console.log("関東地方です。");
break;
case "神奈川":
console.log("関東地方です。");
break;
case "大阪":
console.log("近畿地方です。");
break;
case "愛知":
console.log("中部地方です。");
break;
default:
console.log("その他の地方です。");
break;
}実行結果：
その他の地方です。サンプルコードでは、cityに”福岡”が格納されており、いずれのcaseにも一致しないのでdefault処理が実行されているのがわかりますね。
4．複数のcaseで同じ処理を実行する方法
switch文で、複数の異なる値に対して同じ処理を実行したいときはどうしたらいいでしょうか？
サンプルコードで確認してみましょう。
let number = 6;
switch (number){
case 1:
case 3:
case 5:
case 7:
case 9:
console.log("入力された値は奇数です。");
break;
case 2:
case 4:
case 6:
case 8:
console.log("入力された値は偶数です。");
break;
default:
console.log("1桁の数値を入力してください。");
break;
}実行結果：
入力された値は偶数です。変数numberの値が1、3、5、7、9のときは、“入力された値は奇数です。”と表示し、2、4、6、8のときは、”入力された値は偶数です。”と表示します。これは、switch文では値が一致するcaseが見つかった場合、break文またはswitch文の最後まで順に処理が実行されるためです。
このように、break文の有無や記述場所を調整することで、複数のcaseで同じ処理を実行できます。
5．switch文の式で比較演算子を使う方法
switch文のcaseに”以上”や”以下”などの比較演算子を使うには、switch文の条件式をtrueに設定しましょう。
let age = 19;
switch (true){
case age >= 18:
console.log(age + "歳は、成人です。");
break;
case age < 18:
console.log(age + "歳は、まだ成人ではありません。");
break;
default:
console.log("年齢は数値を入力してください。");
break;
}実行結果：
19歳は、成人です。サンプルコードでは、数値の18を基準に処理を分岐しています。このように、caseに式を記述し処理を分岐できるので、複雑な条件分岐が可能となるのがわかりますね。
6．switch文をネストする方法
複数の項目を組み合わせて条件を分岐させたい場合、switch文ではネスト（入れ子）することで実現できます。
サンプルコードを見てみましょう。
let weather = "曇り"; //天気
let precipitation = 0.6; //降水確率
switch (weather){
case "晴れ":
console.log("本日は晴れです。熱中症に注意しましょう。");
break;
case "曇り":
switch (true){
case precipitation >= 0.5:
console.log("本日は曇りですが、傘を持って出かけましょう。");
break;
case precipitation < 0.5:
console.log("本日は曇りです。傘は必要ないでしょう。");
break;
}
break;
case "雨":
console.log("本日は雨です。");
break;
}実行結果：
本日は曇りですが、傘を持って出かけましょう。このサンプルコードは変数weatherでひとつめのcase条件を作り、変数precipitationでふたつめのcase条件を作成しています。天気が”曇り”で降水確率が0.6なので、”本日は曇りですが、傘を持って出かけましょう。”とコンソールに表示します。
このようなswitch文のネストは文法上問題ないのですが、プログラムが読みにくくなるデメリットがあるので、使用する際は可読性が低くならないように注意しましょう。
7．if〜else if文との使い分けは？
ここまでswitch文について学んできましたが、同様のことはif文でも可能です。ここからはif〜else if文の基本構文とswitch文との使い分けについて学んでいきましょう。
①if〜else if文についておさらい
複数の条件分岐をif文で実現するには、if〜else if文を使用します。
基本構文は以下のとおりです。
if (条件式1){
条件式1が真のときの処理;
} else if(条件式2){
条件式2が真のときの処理;
} else if(条件式3){
条件式3が真のときの処理;
} else{
条件式1も2も3も偽のときの処理;
}実際のサンプルコードで確認してみましょう。
let result = "システムエラー";
if (result == "成功"){
console.log("処理は成功です。");
} else if(result == "アプリケーションエラー"){
console.log("アプリケーションでエラーが発生しました。");
} else if(result == "システムエラー"){
console.log("システムエラーが発生しました。");
} else {
console.log("不正な戻り値です。");
}実行結果：
システムエラーが発生しました。このように、else ifを追加し新しい条件を増やせるのが、if〜else if文の特徴です。
②if~else if文とswitch文の使い分け
ここで具体的にif〜else if文とswitch文の使い分けについて解説します。
さきほどのサンプルコードをswitch文で書き直してみます。
let result = "システムエラー";
switch (result){
case "成功":
console.log("処理は成功です。");
break;
case "アプリケーションエラー":
console.log("アプリケーションでエラーが発生しました。");
break;
case "システムエラー":
console.log("システムエラーが発生しました。");
break;
default:
console.log("不正な戻り値です。");
break;
}実行結果：
システムエラーが発生しました。いかがでしょうか？switch文のほうがif文よりコードが読みやすいですよね。このように特定の変数やデータ値に対して多くの比較値でチェックする場合は、if文よりswitch文の方が簡潔に書けます。
if文でも条件分岐を書くことはできますが、switch文で書くと可読性が上がる場合はswitch文を使う方がよいでしょう。
この記事をシェア
Spring (26)
Python (52)
エンジニア育成 (25)
Java (47)
JavaScript (21)
アジャイル開発 (9)