本記事では、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 (式) {
case 値①:
// 式と値①が同じである時に実行される処理を記述
break;
case 値②:
// 式と値②が同じである時に実行される処理を記述
break;
default:
// 全ての値に等しくない時に実行される処理を記述
break;
}
コードの説明
- 式:評価したい変数(値)をセット
- 値:式にセットした変数と比較したい値をセット
- break:switch文から抜け出す
あわせて読みたい




【JavaScript】==と===の違いについて
本記事では、JavaScriptの==と===の違いについて解説しています。 この違いを知らないで処理を実装すると、条件に一致しないはずなのに何故か条件に一致していまい関係…
switch文は、まず始めに式とcase①の値を比較します。一致していれば、case①ブロック内に記述されている処理を実行しbreak;でswitch文を抜けます。
もし一致していなければ、case②の値と比較します。一致していればcase①と同様にブロック内の処理を実行します。
式と全てのcaseの値が異なれば、defaultブロック内に記述されている処理を実行します。



switch文を使用したサンプルコードを用意したので、動作確認してみましょう!
function callLog(fruits) {
switch (fruits) {
case "banana":
console.log("変数fruitsの値はbananaだよ!");
break;
case "apple":
console.log("変数fruitsの値はappleだよ!");
break;
default:
console.log("変数fruitsの値はそれ以外だよ!");
break;
}
}
callLog("banana"); // => 変数fruitsの値はbananaだよ!
callLog("apple"); // => 変数fruitsの値はappleだよ!
callLog("strawberry"); // => 変数fruitsの値はそれ以外だよ!



正しく分岐されているのが確認できるね!
switch文の関連記事



switch文についての関連記事を載せておくね!