JavaScriptでswitch文を用いた条件分岐の記述方法を解説します。
条件分岐の制御フローを定義する命令には、if文を使う方法もありますが、条件が多分岐になる場合にはswitch文を用いるほうが可読性が上がります。
このページでは、switch文の使い方を解説しif文との使い分け方法をサンプルコード付きで解説します。
JavaScript初心者であれば、知らないと恥ずかしい基本的な知識です。是非最後までご覧ください。
条件分岐とは？
条件分岐とは、プログラム中である条件を満たしているかどうかを判定し、満たしている場合/満たしていない場合に応じて処理を変えることです。
基本的には、「もし○○ならば××せよ」というような書き方で処理の内容を分岐させていきます。
JavaScriptでは、if文と本ページで解説するswitch文を用いて条件分岐を指定します。
switch文：構文ルール
switch (変数) {
case 値1:
(変数が値１の場合の処理);
break;
case 値2:
(変数が値２の場合の処理) ;
break;
・・・・
default;
(変数がどの値にも合致しない場合)
}
この構文により、変数の値に応じて複数の条件分岐を定義することができます。
- 「変数が値１の場合に処理〇〇を行う」
- 「変数が値２の場合に処理△△を行う」
このように記述することで、多分岐の条件を分かりやすく記述することが可能です。
"default" はどの条件にも合致しない場合を表します。if文でいう「else」の役割と同じように考えてOK。
JavaScriptのswitch文では、上から順に変数の値を比較していき、合致した時点で該当する処理が行われます。そして、なんとそれ以降に記載された処理もすべて実行されてしまうのです。
switch文の「break」の必要性
"break" は強制的に処理を抜ける命令です。この命令は、for文やwhile文でも利用することができます。
"break" を意図的に書かずにコーディングする方法もありますが、基本的にはswitch文を利用して記述するのが一般的です。
仮に、"break" を用いずに以下のようなコードを記述したとしましょう。
See the Pen switch② by ビズドットオンライン (@BizOnline) on CodePen.
お気づきですね。「case 2;」以降のコードがすべて実行されてしまうのです。
基本的にcase文は条件分岐で用いる命令であるため、繰り返し処理（順次処理）的に利用するのはお勧めできません。そのため、基本的には "break" とセットで用いるのが正解と言えるのです。
switch文の使い方
実際に、switch文を利用したサンプルコードがこちらです。
「今日の天気」を選択して「ボタン」をクリックしてみましょう。（右下の「Rerun」ボタンを押せば何度も実行できます！）
See the Pen switch① by ビズドットオンライン (@BizOnline) on CodePen.
いかがでしょうか？
選択したラジオボタンに応じて、表示される文章が変わることが分かるかと思います。
上記のサンプルコードでは、以下のようにswitch文を用いて条件分岐を定義しています。
switch (result) {
case "晴れ":
document.write(`本日は晴天なり`);
break;
case "曇り":
document.write(`本日はどんより曇りです`);
break;
case "雨":
document.write(`本日は傘が必要です`);
break;
case "雪":
document.write(`雪だるまを作りましょう`);
break;
}
if文との比較
ちなみに、冒頭でも説明した通り、必ずしもswitch文を使う必要はありません。if文でも同じ条件分岐を定義することが可能です。
if (result = "晴れ") {
document.write(`本日は晴天なり`);
} else if(result = "曇り"){
document.write(`本日はどんより曇りです`);
} else if(result = "雨"){
document.write(`本日は傘が必要です`);
} else if(result = "雪"){
document.write(`雪だるまを作りましょう`);
}
if文の方がコードの行数自体は減りますが、なんとなく読みやすさはswitch文の方が勝っている気がします。
また、switch文の場合は、１つの変数の値をもとに条件分岐させていくのに対して、if文は条件式に記述すべき変数は１つでなくてもOK。
そのため、条件をMECEにしたいという人は、switch文を好むようです。
JavaScriptを体系的に学びたい方は
プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
