TypeScriptのswitch文におけるcaseで複数条件を扱う方法

はじめに

TypeScriptやJavaScriptのswitch文で複数の条件を一つのcaseで扱いたい場合があります。
この記事では、その正しい方法と、よくある間違いについて解説します。

背景

APIのあるレスポンスがstringでありつつ、想定する中身はほぼ定まっている(=ほぼenumやん)が、あくまでもstringではあるので例外対応も考慮しないといけないような実装をする必要があったとき。
テストを先に書いてから実装進めてたら、想定する結果にならず。
なんでだーと思ったら、間違った方法の後者の方で記載して、実装問題ないよなーと思いつつ、vscodeでもテスト実行時のコンパイルエラー(=記法間違ってるぜ)も特になく、テスト結果だけ全く通らずで、地味にハマってしまい。。。同じよーな人いないと思いますが残しておきます🙏

間違った方法

まず、間違えやすい書き方がこちら

// これは動作しません
switch (varName) {
    case "afshin", "saeed", "larry":
        alert('Hey');
        break;
    default:
        alert('Default case');
        break;
}

// これも動作しません
switch (varName) {
    case "afshin"　|| "saeed" || "larry":
        alert('Hey');
        break;
    default:
        alert('Default case');
        break;
}

それぽいですし、vscodeとかでエラー表示してくれません🤔(pluginとかであるんかな)

正しい方法

複数の条件を扱うための正しい方法は、各条件に対して個別のcaseを記述し、処理を共通化することです。

switch (varName) {
    case "afshin":
    case "saeed":
    case "larry":
        alert('Hey');
        break;
    default:
        alert('Default case');
}

この方法では、varNameが"afshin"、"saeed"、または"larry"のいずれかに一致した場合、'Hey'というアラートが表示されます。それ以外の場合は、デフォルトのアラートが表示されます。

解説

この方法が動作する理由は、switch文の動作原理にあります。

1. switch文は、最初に一致するcaseを見つけると、そこから実行を開始します。
2. break文がない限り、それ以降のcaseも順次実行されます。

したがって、上記の例では:

• varNameが"afshin"の場合、最初のcaseに一致し、'Hey'のアラートが表示されます。
• varNameが"saeed"の場合、2番目のcaseに一致し、同じく'Hey'のアラートが表示されます。
• varNameが"larry"の場合も同様です。
• これら以外の値の場合、defaultケースが実行されます。

まとめ

TypeScriptやJavaScriptでswitch文を使用する際に複数の条件を扱いたい場合は、各条件に対して別々のcaseを書き、処理を共通化する方法が正しいアプローチです。

ちなみに、元記事はこちらです。
https://stackoverflow.com/questions/13207927/switch-statement-for-multiple-cases-in-javascript