[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 文についてメモしておきます。値と条件の判定方法が「厳密等価演算(===)」ということはつい忘れてしまいそうなので、しっかり覚えておきたいですね。