「JavaScriptでSwitch文が思ったように動かない」
「Switchって習うけどイマイチ使い方が分かっていない」
「Reduxになって初めてSwitch文を知る事になって焦った」
なんてことは多くあると思います。
僕もReduxを触るまでSwitchについて理解していませんでしたし、正直いってコーディングくらいの作業では使うシーンすらありませんでした。
とはいえ使うとなったときには結構ややこしいものなので、今のうちに理解しておこうと思い復習してみましたので共有です。
すでに使用していてエラーに困っている方にもヒントがあるかもしれません。
また動画の方が見やすいという方はYoutubeからどうぞ
JavaScriptにおけるSwitch文の書き方
書き方は以下の通りです。
const myFruit = "りんご";
switch (myFruit){
case "りんご":
console.log("りんご");
break;
case "みかん":
console.log("みかん");
break;
default:
console.log("その他");
break;
}; // 「りんご」と出力される簡単にいうと条件分岐のようなことを実行してくれるのがSwitch文です。
上記では「myFruit」に入る文字によって出力内容が変わるようになっています。
最終的に「りんご」とコンソールで出力されます。
書き方の注意としてはcaseの場所は「:」で終わる事です。
JavaScriptは「;」で終わるのがお作法になっていますが、caseの末尾は「:」になります。
こちら間違えると正しく動作しませんので注意してください。
ちなみに上記のコードはif文でも書くことができて、if文で書いた以下のコードと同じ意味になっています。
const myFruit = "りんご";
if(myFruit == "りんご"){
console.log("りんご");
} else if(myFruit == "みかん"){
console.log("みかん");
} else {
console.log("その他");
}
// 「りんご」と出力される文法こそ違いますがswitch文はif文を書き換えたものだと理解してもらえれば良いでしょう。
breakは何をしているのか
Switchには「breake」という役割が存在します。
こちらは対象のcaseでコードを終了させるか、を見ています。
const myFruit = "りんご";
switch (myFruit){
case "りんご":
console.log("りんご");
case "みかん":
console.log("みかん");
break;
default:
console.log("その他");
break;
}; //「りんご」「みかん」と出力される上記では「りんご」の部分にあった「break」を削除してみました。
そうすると「りんご」は変わらず出力されるのですが、「みかん」まで続けて出力されます。
このようにコードをどこで止めるかを握っているのが「break」です。
条件に該当していなくても「break」が無かった場合には、後に書かれたものも実行されます。
「breakをすべてに書くか」というのは状況によります。
純粋な条件分岐のような扱いにしたいときには全てのcaseに「break」を付けることが多いです。
一方であえて「break」を外した方が良いケースもあるので、お手元のコードで実行しながら適した書き方をしてみてください。
defaultの役割
「default」は例外処理とも呼ばれ、「どのcaseにも当てはまらなかったとき」に実行されるための部分です。
if文で言うと「else」に当たる部分と思ってもらえれば大丈夫です。
「default」は必須ではないのですが、プログラムは基本的に例外処理を想定することが多いので結果的に書くことになるでしょう。
const myFruit = "ぶどう";
switch (myFruit){
case "りんご":
console.log("りんご");
break;
case "みかん":
console.log("みかん");
break;
default:
console.log("その他");
break;
}; // 「その他」と出力される上記では「ぶどう」という存在しないcaseになってしまうので、「その他」が出力されることになっています。
ちなみにdefaultのbreakはなくても問題ないことが多いです。
基本的にdefaultは最後に書くためbreakがなかったとしても後続の処理がないため、結局はそこで処理が自動的に止まるからです。
同じ処理の条件の場合の書き方
if文では2つ以上の異なる条件が同じ処理になることがあるかと思います。
条件に「| |」を使っているコードのことです。
switch文でも同じようなコードを書くことができて、以下のように書くことで複数の条件を同じ処理に持っていくことができます。
const myFruit = "apple";
switch (myFruit){
// ここを追加
case "apple":
case "りんご":
console.log("りんご");
break;
case "みかん":
console.log("みかん");
break;
default:
console.log("その他");
break;
}; // 「りんご」と出力される複数条件が同じ処理になるときはcase文を重ねて書くことでif文で言うところの「| |」と同じ意味になります。
上記のコードは以下のように書いているのと同じになるからです。
const myFruit = "apple";
switch (myFruit){
case "apple":
console.log("りんご");
break;
case "りんご":
console.log("りんご");
break;
case "みかん":
console.log("みかん");
break;
default:
console.log("その他");
break;
}; // 「りんご」と出力されるどちらの書き方でも動作しますが処理が同じになる場合には、同じコードを何回も書かなくて良いような仕組みになっています。
JavaScriptのSwitchにおける不等号は注意
とても大事なお話を最後にします。
Switch文では不等号が厳密に判定されます。
まずは例を書きます。
const myValue = "100";
switch (myValue){
case 100:
console.log("true");
break;
default:
console.log("false");
break;
};上記の場合、「default」の部分が実行されます。
「case 100」については「数字の100」となっており、1行目は「文字の100」なので該当しないためです。
上記のコードは一般的なif文を使って以下のように書くこともできます。
const myValue = "100";
if(myValue == 100){
console.log("true");
}else{
console.log("false");
};よく見慣れた書き方ですね。
ただ上記だと条件に該当することになります。
この違いはJavaScriptにおける不等号の性質を理解する必要があります。
JavaScriptの不等号には「==」「===」の2種類があります。
学習教材やYoutubeでも見かけるはずです。
僕も最初は同じものだと思っていましたが、ぜんぜん違うものであることはエラーにハマるまで気づきませんでした。
2つの不等号の違いは以下の通りです。
// == の場合
let val = "100";
console.log(val == 100); // trueとなる
// === の場合
let val = "100";
console.log(val === 100); // falseとなるいかがでしょうか。
文字列と数字を見分けられるか、が違いになっています。
「==」は文字列で書かれた数字を「自動的に数字に変換」することを行っています。
「===」は文字列で書かれた数字はそのまま文字列として見ます。
そのため似たようなコードでも結果が変わってくるのです。
少し脱線しましたがJavaScriptにおけるSwitchでは裏側で「===」を取り入れた動作になっています。
そのため文字列と数字はキッチリ分けて考える必要があります。
普通のif文だと「==」で書いておけば文字列も数字に変換してくれるので、今の話を知っておかないと後でハマることになります。
ちなみに「==と===のどちらが良いのか？」については、僕は「===」の方が良いと考えています。
予期せぬエラーを1個防げるからです。
「==」はたしかに便利かもしれませんが、例外処理とは別にユーザーの挙動を2パターン想定する必要があるので例外処理にも該当しないエラーになる可能性があります。
「===」にしておいて、該当しないものは全て例外処理で事前に組んでおけばエラーの発生は少しばかり減らせることになります。
Switch文の使いどころ
「ちなみにSwitchって使うの？」となった方がいるかもしれません。
Switchを使うことでメリットが出るのは条件が増えたケースです。
２つのパターンを比較してみましょう。
const myFruit = "ぶどう";
switch (myFruit){
case "りんご":
console.log("りんご");
break;
case "みかん":
console.log("みかん");
break;
case "ぶどう":
console.log("ぶどう");
break;
case "いちご":
console.log("いちご");
break;
case "びわ":
console.log("びわ");
break;
default:
console.log("その他");
break;
};const myFruit = "ぶどう";
if(myFruit === "りんご"){
console.log("りんご");
}else if(myFruit === "みかん"){
console.log("みかん");
}else if(myFruit === "ぶどう"){
console.log("ぶどう");
}else if(myFruit === "いちご"){
console.log("いちご");
}else if(myFruit === "びわ"){
console.log("びわ");
}else{
console.log("その他");
}コードの量はそこまで変わりませんが、見やすさはSwitchの方ですね。
条件が増える場合にはSwitchを積極的に使っていきましょう。