switch 文で値を一覧から選ぶ

解説

このレッスンで分かること

• switch (式) { case 値: ... } で、1 つの値を候補と突き合わせられます
• switch の比較は === です。1 と "1" は一致しません
• break も return も書かないと、下の case へ流れ落ちます

同じ変数名を何度も書いている

作品に付けた種別から、画面に出す日本語のラベルを決めたいとします。else if で書くと、こうなります。

見比べている左側は毎回同じ ext で、違うのは右側の値だけです。この「1 つの式を、決まった候補のどれかと突き合わせる」形に特化した構文が switch 文です。

ext が 1 回しか出てこなくなり、候補が縦に並んで対応表のように読めるようになりました。case "jpg": の直後には何も書いていません。一致した case から実行が始まり、下へ流れて return "画像"; に届きます。この流れ落ちる動きをフォールスルーと呼び、複数の値を同じ扱いにまとめたいときに役立ちます。

break を忘れると、下まで流れ落ちる

便利なフォールスルーは、そのまま最大の落とし穴でもあります。値を代入して組み立てる書き方だと、break が無い枝は下の代入で上書きされます。

case "jpg" から始まった実行が、止まらずに最後まで落ちてしまいました。各枝の末尾に break; を足せば直ります。

なお、枝の中で return を書いていれば、その場で関数ごと抜けるので break は要りません。関数の中で値を返すだけの分岐なら、return で書くほうが書き忘れの事故を防げます。

よくある間違い

• 型の違いに気付かない — switch の比較は常に === で、ゆるい比較モードはありません。フォームから来た値は文字列になりがちなので、候補の書き方をそろえてください

• case に範囲を書こうとする — case n >= 5: は true か false と n を比較してしまい、期待どおりに動きません。範囲の判定は if と else if の出番です
• default を書かない — どの候補にも当てはまらない値が来たときに、何も返らず undefined になります。読み手が迷わないよう、素直に最後へ置いてください

1. 関数名は categoryLabel、引数はカテゴリ名を表す文字列 category の 1 つ
2. "web" と "frontend" は "Web 制作"、"design" は "デザイン"、"study" は "学習メモ" を返す
3. どれにも当てはまらない値と空文字は default で受け止め、"その他" を返す
4. if ではなく switch を使い、戻り値はすべて文字列にする