みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
今回はswitch文について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- switch文の書き方が理解できる
- if文との使い分け方が理解できる
switch文とは
switch文とは、JavaScriptにおける条件分岐のひとつです。
指定した変数等に、何の値が入っているかによって条件を分岐させます。
■ 構文
switch (変数){
case 値1 :
// 変数 === 値1 の場合の処理
break;
case 値2 :
// 変数 === 値2 の場合の処理
break;
case 値3 :
// 変数 === 値3 の場合の処理
break;
default :
// どの条件も満たさない場合の処理
break;
}このようにcase-breakまでを1つのcase句として
処理が分岐されます。
最後のdefault-breakはdefault句と呼ばれるもので
どのcase句にも該当しなかった際の処理が書かれます。
※ちなみに、default句はオプションなので省略可能です。
実際にコードを書いて動かしてみましょう！
※実行環境がない方は、こちらの記事を参考にオンラインで実行してみてください！
★myHobbyという定数を宣言して、
・値が何かによって、出力する処理を分ける。
・いずれにも該当しない場合は「趣味はナイショです」と出力
// 定数の宣言
const myHobby = "プログラミング" ;
// 条件分岐
switch (myHobby) {
case "ギター" :
console.log("趣味はギターです");
break;
case "プログラミング" :
console.log("趣味はプログラミングです");
break;
case "料理" :
console.log("趣味は料理です");
break;
default :
console.log("趣味はナイショです");
break;
}
// 【出力結果】趣味はプログラミングです2つ目case句にヒットし「趣味はプログラミングです。」と、出力されたはずです。
// 定数の宣言
const myHobby = "ゴルフ" ;
// 条件分岐
switch (myHobby) {
case "ギター" :
console.log("趣味はギターです");
break;
case "プログラミング" :
console.log("趣味はプログラミングです");
break;
case "料理" :
console.log("趣味は料理です");
break;
default :
console.log("趣味はナイショです");
break;
}
// 【出力結果】趣味はナイショです余裕がある方は、myHobbyに別の文字列を代入して、処理が変わることを見てみてください♪
指定した変数に、なんの値が入っているかという観点で処理を分岐させるよ！
breakについて
switch文において、break;という記述が非常に重要となってきます。
breakとは、壊すという意味ですよね。
つまり、今回はswitch文の処理を壊して、強制終了させる！
というようなニュアンスで使われています。
先程の例で、breakがないパターンを試してみましょう
// 定数の宣言
const myHobby = "プログラミング" ;
// 条件分岐
switch (myHobby) {
case "ギター" :
console.log("趣味はギターです");
case "プログラミング" :
console.log("趣味はプログラミングです");
case "料理" :
console.log("趣味は料理です");
default :
console.log("趣味はナイショです");
}
// 【出力結果】趣味はプログラミングです
// 趣味は料理です
// 趣味はナイショですこのように、条件を満たしたcase句以降のすべての句の処理が
実行されてしまいました。
どうしてこのようなことが起こってしまうかというと、
switch文は一度case句がtrueと判定されてしまうと、
break;してswitch文自体の処理を強制終了しないと
後続の処理もすべてtrueと判定されて処理が実行されてしまいます。(たぶん)
なので、予期せぬバグを防ぐため、breakは忘れないようにしましょう。
switchとifの使い分け
ここまで読むと一つの疑問が湧いてきたと思います。それは
「ぶっちゃけif文とswitch文って何が違うの？？」
という疑問だと思います。
ここでは、実際のコードを動かしつつその疑問を
解決しようと思いますが、結論から言います。
switch文は変数と値を厳密等価演算子で比較します。
なので、〇〇以上以下や、〇〇かつXXのような
複雑な条件が指定されている場合には使えません。
ちょっと分かりづらいと思うので、
同じ処理をif文とswitch文で書き換えてみましょう
// 定数の宣言
const myHobby = "プログラミング" ;
/* ------------switch文-------------------*/
switch (myHobby) {
case "ギター" :
console.log("趣味はギターです");
break;
case "プログラミング" :
console.log("趣味はプログラミングです");
break;
case "料理" :
console.log("趣味は料理です");
break;
default :
console.log("趣味はナイショです");
break;
}
// 【出力結果】趣味はプログラミングです
/* --------------if文-------------------*/
if (myHobby === "ギター") {
console.log("趣味はギターです");
} else if (myHobby === "プログラミング") {
console.log("趣味はプログラミングです");
} else if (myHobby === "料理") {
console.log("趣味は料理です");
} else {
console.log("趣味はナイショです");
}
// 【出力結果】趣味はプログラミングですご覧の通りですが、すべての条件式が厳密等価演算子(===)を用いて比較されていることがわかります。
厳密等価演算子について復習したい方はこちら
ちなみに、参考までですが、caseは複数指定することも一応可能です。
実用的ではありませんが、あえて微妙な条件分岐を行ってみましょう。
☆変数scoreが95以上の際に「合格です」と出力
95未満の場合「不合格です」と出力
// 定数の宣言
const score = 98;
/* ------------switch文-------------------*/
switch (score) {
case 95 :
case 96 :
case 97 :
case 98 :
case 99 :
case 100 :
console.log("合格です");
break;
default :
console.log("不合格です");
break;
}
// 【出力結果】合格です
/* --------------if文-------------------*/
if (score >= 95 ){
console.log("合格です");
} else {
console.log("不合格です");
}
// 【出力結果】合格ですこのように、できるっちゃできますが、
現実的ではないし、可読性も低いので
trueとなる条件が複数ある場合はif文を使いましょう
※if文について復習したい方はこちらを
ややこしい条件分岐をする際はif文を使うのが一般的だよ！
おまけ：問題
信号の色を表す変数signalを宣言し、信号の色が
青 → 「進め」
黄色 → 「注意」
赤 → 「止まれ」
と出力する処理をswitchを用いて作ってください。
まとめ
- switch文とは、JavaScriptにおける条件分岐のひとつ
- 指定した変数等に、何の値が入っているかによって条件を分岐させる
- 一つの変数にフォーカスして処理を分けるので、想定外のバグが起こりづらい
- 変数と値は厳密等価演算子(===)を用いて行いて比較される
- break;がないと処理を抜けられないので注意
- 複数の条件を指定したい場合は、if文を使用する
if文とうまく使い分けて、可読性の高いコードを記述しよう！
おまけの答え
その1：case句のみを使うパターン
// 変数の宣言
let signal = "黄色";
switch (signal) {
case "青" :
console.log("進め");
break;
case "黄色" :
console.log("注意");
break;
case "赤" :
console.log("止まれ");
break;
}
// 【出力結果】注意その2：default句を使うパターン
// 変数の宣言
let signal = "赤";
switch (signal) {
case "青" :
console.log("進め");
break;
case "黄色" :
console.log("注意");
break;
default :
console.log("止まれ");
break;
}
// 【出力結果】止まれ
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
