JavaScriptのswitch文(条件分岐)の書き方。

JavaScriptのswitch文(条件分岐)の書き方。
画像出典:MDN

JS(JavaScript)のswitch文の書き方について説明します。

目次

switch文(条件分岐)とは

switch文とは、if文と同じ条件分岐を行うことができる構文です。

例えば「A」という対象があって、「もしAだったら〇〇の処理を行う。」「Bだったら■■の処理を行う。」「Cだったら▲▲の処理を行う」「どれにも当てはまらなかったらXXの処理を行う。」といった、多くの条件を指定できます。

switch文の書き方とコード

switch文の書き方とコードは下記です。

switch(対象){
  case 値A:
    処理を書く
    break;
  case 値B:
    処理を書く
    break;
  case 値C:
    処理を書く
    break;
  default:
    処理を書く
}

switch()の括弧内に条件や対象を書き、括弧内{}にcaseと値(case 値:)を書いて処理を書きます。

caseの最後には「break」を記述します。breakは命令を終わらせる処理です。

例えば「値A」が一致していたら処理を終わらせることができますが、この時にbreakが記述されていないと、値が一致していても次の命令「値B」が走ってしまいます。

caseのどれにも当てはまらない場合は「default:」に書いた内容が実行されます。

例:信号の色が青、黄、赤があり、色に応じてメッセージを出力したい場合。

const trafficLight = '青';

switch(trafficLight){
  case '青':
    console.log('渡って大丈夫です');
    break;
  case '黄':
    console.log('注意して渡ってください');
    break;
  case '赤':
    console.log('止まってください');
    break;
  default:
    console.log('信号が故障しています');
}

上記のコードは定数「trafficLight」に青を定義し、青だったら「渡って大丈夫です」、黄だったら「注意して渡ってください」、赤だったら「止まってください」、どれにも該当しなかったら「信号が故障しています」というメッセージを出力する処理を書いています。

if文との違い

if文もswitch文も同じ条件分岐を行いたい時に使う構文ですが、if文は条件が多くなってくるとコードが複雑になり、可読性やメンテナンス性が悪くなってしまうのがデメリットです。

しかしswitch文は条件が増える場合、簡素的に記述できるので可読性を損なうことなく記述できるのがメリットです。

if文とswitch文の使い分けの目安

if文にはelseやelse ifを使えば3パターンの条件を書くことができるので、3パターンくらいの条件分岐を行いたい時はif文。

4パターン以上の条件分岐を行いたい時や、複雑な条件分岐を行いたい時はswitch文にするなど、条件の目安を決めておくと良いでしょう。

if文とswitch文にはそれぞれ仕様があるので、その場に応じた使い分けを心がけると良いと思います。

仕様:JavaScriptのswitchの仕様(MDN)

目次