• Home
  • Web制作
  • JavaScriptのswitch文を使いこなそう！条件分岐を簡潔に記述するテクニック

JavaScriptのswitch文を使いこなそう！条件分岐を簡潔に記述するテクニック

schedule

はじめに：switch文とは？ if文との違いを理解しよう

JavaScriptでプログラムを書く際、条件によって処理を分岐させる場面は多く存在します。そのような場合に役立つのが条件分岐です。

JavaScriptには、条件分岐を行うための構文として、if文とswitch文が用意されています。

if文は、条件式が真(true)の場合に特定の処理を実行する構文です。一方、switch文は、特定の値（式）と複数のケースを比較し、一致するケースに該当する処理を実行する構文です。

つまり、if文は「条件式が真かどうか」で処理を分岐させるのに対し、switch文は「特定の値と一致するかどうか」で処理を分岐させるという違いがあります。

switch文の基本構文：具体的なコード例を使って解説

それでは、switch文の基本的な構文を、具体的なコード例を交えながら見ていきましょう。

switch (式) {
  case 値1:
    // 式が値1と一致する場合に実行される処理
    break;
  case 値2:
    // 式が値2と一致する場合に実行される処理
    break;
  // 必要に応じてcaseを追加
  default:
    // いずれのcaseにも一致しない場合に実行される処理
}

switch文は、まず括弧(())内の式を評価します。そして、その式の値と、各caseの後に記述された値を比較します。

もし、式の値と一致する値を持つcaseが見つかった場合、そのcaseに続く処理が実行されます。

各caseの処理の最後には、break;文を記述するのが一般的です。 break;文を記述することで、switch文の実行が終了し、後続の処理が実行されます。

もし、break;文を記述しなかった場合、一致したcaseの次のcaseの処理も続けて実行されてしまいます。

switch文を更に活用！ より柔軟な条件分岐を実現するテクニック

switch文は、基本的な構文に加えて、より柔軟な条件分岐を実現するためのテクニックも用意されています。ここでは、その中でも特に重要な2つのテクニックをご紹介します。

  1. フォールスルー：意図的にbreakを省略する

    先ほど、break;文を記述することでswitch文の実行が終了し、後続の処理が実行されることを説明しました。

    しかし、意図的にbreak;文を省略することで、複数のcaseを連続して実行することができます。これをフォールスルーと呼びます。

    フォールスルーは、複数の条件をまとめて処理したい場合などに役立ちます。

    const day = new Date().getDay(); // 0:日曜日, 1:月曜日, ...

switch (day) {
  case 0:
  case 6:
    console.log('本日は週末です。');
    break;
  default:
    console.log('本日は平日です。');
    break;
}

    上記の例では、変数dayの値が0（日曜日）または6（土曜日）の場合に、「本日は週末です。」というメッセージが出力されます。

  2. default句：どのcaseにも該当しない場合の処理

    switch文には、どのcaseにも該当しない場合に実行される**default句**を設けることができます。

    default句は必須ではありませんが、予期せぬ値が渡された場合の処理などを記述しておくことで、プログラムの堅牢性を高めることができます。

    const signal = '青';

switch (signal) {
  case '赤':
    console.log('止まれ！');
    break;
  case '黄':
    console.log('注意して進め！');
    break;
  case '青':
    console.log('進め！');
    break;
  default:
    console.log('信号が故障している可能性があります。');
    break;
}

    上記の例では、変数signalの値が「赤」「黄」「青」以外の値だった場合に、「信号が故障している可能性があります。」というメッセージが出力されます。

まとめ：switch文をマスターして、可読性・保守性の高いJavaScriptコードを書こう

今回は、JavaScriptのswitch文について解説しました。

switch文は、複数の条件分岐を簡潔に記述できるため、可読性・保守性の高いコードを書く上で非常に役立ちます。

本記事で紹介した内容を踏まえ、switch文をマスターして、より効率的で高品質なJavaScriptコード作成に役立ててください。

関連記事