【STEP.12】
switch命令の使い方をマスターしよう!

switch命令の基本

if命令を利用すれば、シンプルな分岐から複雑な多岐分岐までを柔軟に表現できます。

しかし、以下のような例はどうでしょうか?

let rank = 'B';
if (rank === 'A') {
  console.log('Aランクです。');
} else if (rank === 'B') {
  console.log('Bランクです。');   
} else if (rank === 'C') {
  console.log('Cランクです。');
} else {
  console.log('ランク外です。');
}

「変数 === 値」の形式で同じ条件式が並んでいるため、見た目にも冗長に思えます。

このようなケースでは、switch命令で置き換えることを検討してください。

では、switch命令を使った具体的なコードを見ていきましょう。

以下は、上のif命令を使って記述したコードをswitch命令で書き換えたものです。

let rank = 'B';
switch(rank) {
 case 'A':
  console.log('Aランクです。');
  break;
 case 'B':
  console.log('Bランクです。');
  break; 
 case 'C':
  console.log('Cランクです。');
  break; 
 default:
  console.log('ランク外です。');
  break; 
}
//結果:Bランクです。

同じような条件式を繰り返し記述しなくても良い分、コードがすっきりと読みやすくなったことがお分かりいただけると思います。

switch命令の構文は次の通りです。

switch命令

switch (expression) {
  case value1:
    ...statements1...
  case value2:
    ...statements2...
  ...
  case valueN:
    ...statementsN...
  default:
    ...def_statements...
}
expression          式
value1,2...N        値
statements1,2...N   「式 = 値1,2...N」の時に実行する命令
def_statements      式が値1~Nのいずれでもない場合に実行する命令

switch命令では、以下の流れで処理が実行されます。

  1. 先頭の式をまず評価
  2. (1)の値に一致するcase句を実行する
  3. 一致するcase句が見つからなかった場合には、最終的にdefault句を呼び出す

switch命令を利用する際の注意点

switch命令を利用する際には、以下の点に注意が必要です。

default句は省略しない

構文上はdefault句は省略可能ですが、そうすべきではありません。

default句を明記することで、どのcase句にも合致しなかった場合の挙動を明確にできるからです。

case/default句の最後はbreak命令で終わる

if命令と異なり、switch命令では条件に合致したcase/default句に処理を移動するだけで、その句を抜けた後も、自動的にswitchブロックを終了しません。(=以降のcase句をそのまま継続して実行します。)

そのため、句の最後では必ず、ブロックを抜けるためのbreak命令を明示的に呼び出さなければいけません。

switch命令にはbreak命令が必要

式とcase値は「===」演算子で比較される

switch命令の先頭の式と、case句の値とは(「==」演算子ではなく)「===」演算子で比較される点に注意してください。

たとえば、以下のコードで「case 0」句は実行されません。

let x = '0';
switch (x) {
  case 0;
    //この部分は実行されない
    ...中略...
}

「===」演算子では文字列としての’0’と、数値としての0とは異なるものであるからです。

ブラウザーからの入力値をもとに処理を分岐するような状況では、文字列と数値の比較がよく発生します。

「見た目の値が等しいのに意図した句が呼び出されない」という場合には、データ型の不一致を疑ってみると良いでしょう。

意図したbreak命令の省略(フォールスルー)

break命令を省略して、複数のcase句を続けて実行することをフォールスルーといいます。

フォールスルーはコードを読みにくくし、バグの温床となることから、原則として避けるべきです。

ただし、空のcase句を連ねる、以下のようなケースは例外です。

let grade = '1級';
	
switch (grade) {
  case '特級':
  case '1級':
  case '2級':
    console.log('上級者です。');
    break;
			
  case '3級':
  case '4級':
  case '5級':		
    console.log('上級者ではありません。');
    break;
}
//結果:上級者です。

これで「a、b、cいずれかの値に合致するcase句」を表現しているわけです。

この例であれば、変数gradeが特急、1級、2級である場合は「上級者です。」を、3級、4級、5級である場合は、「上級者ではありません。」を、それぞれ表示します。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です