本記事では、JavaScriptでswitch文が正しく分岐されない時の原因と対処法について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座

メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる


Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!



初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード


メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)


目次
switch文が正しく分岐されない時の原因
switch文で正しく分岐されない時は、比較している式と値の型が異なっていることが多くの原因だと思われます(記述ミスを除いて)。switch文は式と値を等価演算子(==)で比較しているのではなく、厳密等価演算子(===)で比較をしています。
下記のコードを見てみましょう。
let num = 10;
switch (num) {
case "10":
console.log("一致");
break;
default:
console.log("不一致");
break;
}
パッと見ると「case “10”」に一致して見えますが、これを実行するとコンソールに「不一致」と表示されます。これで、switch文が厳密等価演算子(===)で式と値を評価していることが分かります。
console.log(typeof 10); // => number
console.log(typeof "10"); // => string
あわせて読みたい




【JavaScript】==と===の違いについて
本記事では、JavaScriptの==と===の違いについて解説しています。 この違いを知らないで処理を実装すると、条件に一致しないはずなのに何故か条件に一致していまい関係…
あわせて読みたい




【JavaScript】型の種類と調べ方について
本記事では、JavaScriptの型の種類や調べ方について解説しています。 【型の種類】 JavaScriptには全部で9種類の方が存在します。それぞれの型についての詳細は以下の通…
switch文が正しく分岐されない時の対処法
つまり、値だけなく型も同じにすればswitch文は正しく分岐されます。先ほど紹介したコードの「case “10”」を「case 10」にして動作確認してみましょう。
let num = 10;
switch (num) {
case 10:
console.log("一致");
break;
default:
console.log("不一致");
break;
}
「同じ値の10」「同じ型のnumber」でswitch文は式と値が一致していると評価し、コンソールに「一致」が表示されました。