switch文

このレッスンでは、JavaScriptのswitch文の書き方を学び、1つの値による複数の分岐をif文より見やすく表現できるようになることを目標にします。「JavaScript switch文 使い方」「JavaScript switch break」で検索している方向けの内容です。

switch文は、1つの値によって処理を分岐させたいときに、if / else ifを並べるより見やすく書ける方法です。switch (値) { case 値1: 処理; break; ... default: 処理; }という形で書き、値が一致したcaseの処理が実行されます。曜日やメニューの選択など、決まった選択肢の中から1つを判定する場面でよく使われます。

サンプルコードでは、dayという変数の値に応じて曜日名を表示しています。case 3:に一致するので「水曜日」が表示され、その後のbreakによってswitch文を抜けます。どのcaseにも一致しない場合はdefaultの処理が実行され、これはif文のelseにあたる役割を果たします。

初心者が最もよくつまずくのが、breakを書き忘れることです。breakがないと、一致したcaseから次のcaseの処理までそのまま実行されてしまう「フォールスルー」という現象が起きます。これはバグの原因になりやすい一方、複数のcaseで同じ処理をしたいときにあえて利用されることもある、少し特殊な仕様です。

実際の開発現場では、ステータス(注文状態や権限レベルなど)によって表示や処理を切り替える場面でswitch文がよく使われます。分岐する選択肢が3つ以上あり、1つの値だけで判定できる場合は、if/else if の連続よりもswitch文の方が意図が伝わりやすいコードになります。

複数のcaseで同じ処理を行いたい場合、case 1:とcase 2:を続けて書き、間に処理を書かなければ、どちらの値でも同じ処理(フォールスルーを利用した書き方)を実行させることができます。

switch文で使う値には文字列も使えます。case "月曜日":のように書けば、数値だけでなく文字列による分岐も同じ考え方で実現でき、コマンドの種類による処理分けなど、実務でもよく使われるパターンです。