挨拶・背景

こんにちは。SHIFT アジャイル推進グループの hirata です。
JavaScript で複数の条件を評価する際、連続するif文を使うことがよくあります。しかし、これらのif文が増えると、コードが冗長で読みにくくなることがあります。そんなときに役立つのがswitch文です。
この記事では、連続する if 文を switch 文に変換することでコードをシンプルにまとめる方法について説明します。

連続する if 文の例

まず、連続する if 文の例を見てみましょう。

if (fruit === "apple") {
  console.log("This is an apple.");
} else if (fruit === "banana") {
  console.log("This is a banana.");
} else if (fruit === "orange") {
  console.log("This is an orange.");
} else {
  console.log("Unknown fruit.");
}

このコードは、fruit の値に応じて異なるメッセージを表示します。しかし、条件分岐が増えるほど、コードが冗長になり可読性が悪くなります。

switch 文に変換する

switch 文は式を評価して、一連の case 節に対してその式の値を照合し、最初に値が一致した case 節の後の文を、break文に出会うまで実行します。switch 文の default 節には case が式の値と一致しない場合に実行されます。

const fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("This is an apple.");
    break;

  case "banana":
    console.log("This is a banana.");
    break;

  case "orange":
    console.log("This is an orange.");
    break;

  default:
    console.log("Unknown fruit.");
}

switch 文を使うことで各条件が明確に分けることができ、コードの可読性が向上します。

switch 文の fall-through

switch 文を使う際の注意点として、case 節に break 文が存在しないとき、その条件を実行しても完了せず、次の case 節を実行してしまいます。以下のコードをみてみましょう。

const foo = 0;

switch (foo) {

  case 0: // foo の値が一致するため実行開始
    console.log(0);
  // breakがないため次のcaseへ進む
  
  case 1: 
    console.log(1);
    break; // break文に出会ったため終了
 
  case 2:
    console.log(2);
    break;
  
  default:
    console.log("default");
}
// 0 と 1 が出力される

case 0 に break 文がないために、条件が適さないにも関わらず case 1 を実行してしまい、意図しない出力がされてしまいます。

break 節の記述忘れには注意が必要ですが、うまく活用すればこの仕様もシンプルな記述に役立てることができます。会員が Gold の場合、オプションA、オプションB、オプションCを出力し、Silver の場合、オプションB、オプションC、Bronze の場合、オプションCのみを出力する例を以下に示します。この例では会員が Gold でオプションA、オプションB、オプションCが出力されます。

if 文を使った方法

const membership = "Gold";

if (membership === "Gold") {
    console.log("オプションA");
}
if (membership === "Gold" || membership === "Silver") {
    console.log('オプションB');
}
if (membership === "Gold" || membership === "Silver" || membership === "Bronze") {
    console.log('オプションC');
} else {
    console.log('無効な会員ランクです');

switch 文を使った方法

const membership = "Gold";

switch (membership) {
    case "Gold":
        console.log('オプションA');
        
    case "Silver":
        console.log('オプションB');
        
    case "Bronze":
        console.log('オプションC');
        break;

    default:
        console.log('無効な会員ランクです');
}

if 文では、各ランクに応じて条件を設定して必要なオプションを出力します。if 文を重ねることで、上位ランクの会員が下位ランクのオプションも取得できるようにしています。一方、switch 文の方法では、case "Gold"から始まり、フォールスルーを利用して下位のオプションも出力します。break 文を使わないことで、次のケースにそのまま進むことができます。

まとめ

連続する if 文を switch 文に変換することで、コードをシンプルにまとめることができ、可読性が向上し、容易なメンテナンスを図ることができます。複数の条件を評価する際には、ぜひ switch 文の使用を検討してみてください。

この記事が皆様の理解を深める一助となれば幸いです。この記事を最後まで読んだ方は、ぜひハートボタンを押していいねをお願いいたします。

ご覧いただきありがとうございました。

参考文献

• https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/switch

• https://qiita.com/shisshi_engineer/items/d1e1c29b419646ca0368

お問合せはお気軽に

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら

PHOTO：UnsplashのJuanjo Jaramillo