[TypeScript]switch文を使って条件分岐する方法

TypeScriptではJavaScriptのswitch文をそのまま使用することができます。

switch文は対象となる値がcaseの条件と一致するかどうか判定し、処理を分岐させることができます。

基本的な書き方

switch (値) {
  case 条件1:
    console.log("条件1の処理");
    break;
  case 条件2:
    console.log("条件2の処理");
    break;
  default:
    console.log("条件1と条件2以外の処理");
    break;
}

基本的には上記のように実装します。どのcaseの条件にも一致しない場合にも処理を行う場合にはdefaultのところに処理を実装します。

caseは連続して書くこともできます。

switch (値) {
  case 条件1:
  case 条件2:
  case 条件3:
    console.log("条件1~3の処理");
    break;
  case 条件4:
  case 条件5:
    console.log("条件4~5の処理");
    break;
  default:
    console.log("条件1と条件2以外の処理");
    break;
}

breakの使い方

ちなみにbreakをそれぞれのcaseのところに記載しておかないと、caseの条件に一致した以降のcaseの中の処理も実行されてしまいます。

例えば、

switch (値) {
  case 条件1:
    console.log("条件1の処理");
  case 条件2:
    console.log("条件2の処理");
  default:
    console.log("条件1と条件2以外の処理");
}

こんな風に実装した場合、値が条件2と一致した場合、条件2の処理とdefaultの処理の両方が実行されます。

switch文の判定について

switch文の値と条件が一致しているかを判定するのは「等価演算(==)」ではなく「厳密等価演算(===)」で行われます。なので、値の型が違ったり、nullとundefinedを同値とは扱ってくれないので、switch文の値のところに設定される値の条件をしっかり確認しておく必要があります。

if文で実装する場合

switch文で実装できるものはif文でも実装可能です。

switch (値) {
  case 条件1:
    console.log("条件1の処理");
    break;
  case 条件2:
    console.log("条件2の処理");
    break;
  default:
    console.log("条件1と条件2以外の処理");
    break;
}

このswitch文はif文ではこのように実装することができます。

if (値 === 条件1) {
  console.log("条件1の処理");
} else if (値 == 条件2) {
  console.log("条件2の処理");
} else {
  console.log("条件1と条件2以外の処理");
}

最後に

TypeScript(JavaScript)で基本的な構文であるswitch文についてメモしておきます。値と条件の判定方法が「厳密等価演算(===)」ということはつい忘れてしまいそうなので、しっかり覚えておきたいですね。