値ごとに振り分ける

01 / 05

=== が並ぶときの書き方

else if で値ごとに振り分けようとすると、size === "S"、size === "M" …… と同じ変数名が何度も出てくる。

こういうときのために switch という書き方があるよ。

02 / 05

switch の形

switch のかっこに調べたい値、波かっこの中に case 値: を並べる。値が一致した case の行から処理が始まるよ。

各 case の最後には break; を書く。これが「ここまで」という区切りだよ。

const signal = "きいろ";switch (signal) {  case "あお":    console.log("すすむ");    break;  case "きいろ":    console.log("ちゅうい");    break;  case "あか":    console.log("とまる");    break;}

実行結果

ちゅうい

03 / 05

比べ方は === と同じ

case が選ばれるのは、かっこの中の値と case の値がぴったり同じとき。=== で比べているのと同じだよ。

だから数値でも文字列でも使える。

const rank = 2;switch (rank) {  case 1:    console.log("きんメダル");    break;  case 2:    console.log("ぎんメダル");    break;  case 3:    console.log("どうメダル");    break;}

実行結果

ぎんメダル

04 / 05

break を書かないと下へ流れる

break を書き忘れると、次の case の中身まで続けて動いてしまう。一致していない case の処理まで走るので、たいていはバグになるよ。

下の例は あお に一致したあと break がないので、ちゅうい まで出てしまっている。

const signal = "あお";switch (signal) {  case "あお":    console.log("すすむ");  case "きいろ":    console.log("ちゅうい");    break;}

実行結果

すすむ
ちゅうい

05 / 05

if との使い分け

ひとつの値がどれと一致するかで分けるなら switch
大小や範囲、複数の条件の組み合わせで分けるなら if

switch は「以上・以下」の判定には向いていない。目的で選ぼう。ここから書いてみよう。