JavaScriptのswitch文 - 駆け出しのエンジニア日記

switch文も条件分岐の一種で、一つの値を起点とした場合分けに特化しています。

switch文で記述したものはif文でも記述できますが、if文の場合だと分岐が多くなってしまうと読みづらくなってきます。そのためswitch文の方が意図を伝えやすいコードになり、可読性も上がることがあります。

基本構文は以下の通りです。

switch (式){
 case 値1：
 式 === 値1 の時に実行する処理;
 break;
 case 値2:
 式 === 値2 の時に実行する処理;
 break;
 case 値3:
 式 === 値3 の時に実行する処理;
 break;
 default:
 式がいずれの値とも一致しないときに実行する処理;
}

例えば、「変数に入っている数字に対して該当する曜日を持ってくる。」ということをやってみます。（イメージしづらいので下記コード確認して下さい）

if文の場合

const day = 2;
 if (day === 1) {
 console.log('月曜日');
 } else if (day === 2) {
 console.log('火曜日');
 } else if (day === 3) {
 console.log('水曜日');
 } else if (day === 4) {
 console.log('木曜日');
 } else if (day === 5) {
 console.log('金曜日');
 }

このように記述ができます。

「 day = 2」の時は「火曜日」が出力されます。

これをswitch文で記述してみると、、、

const day = 1;
switch (day) {
 case 1:
 console.log('月曜日');
 break;
 case 2:
 console.log('火曜日');
 break;
 case 3:
 console.log('水曜日');
 break;
 case 4:
 console.log('木曜日');
 break;
 case 5:
 console.log('金曜日');
 break;
 case 6:
 case 7:
 console.log('週末');
 break;
 default:
 console.log('無効な数字です');
}

上記のようになります。

switch 文では case 句ごとにブロックを記述しません。値が一致する case 句が見つかった場合、その次の文から switch 文の最後または break まで順に処理が実行されます。

もしcase 句ごとの出力が同じだった場合は、case 6・case 7のようにまとめることができます。

そして、break は条件を満たしたら処理をそこで中止する意味合いがあリます。もしbreak を書き忘れると、値が一致したところから順に処理が行われ、 switch 文の最後まで順に実行されてしまい、バグってしまうことがあるので注意してください。

また、いずれの値とも一致しなかった場合は default 句の後に記述されている処理を実行します。 default 句は不要であれば省略することができます。

JavaScript で条件分岐を行う方法のひとつである switch 文の使い方について紹介でした。