JavaScriptのswitch文の基本
プログラミング初心者に向けて、switch文を「何が嬉しいのか」「どう書くのか」「どこで使うのか」を例題付きでわかりやすく説明します。もし今は「if文はなんとなく分かる」くらいなら、switch文はすぐ使えるようになります。
何が嬉しいのか
- 複数の候補からぴったり一致を選ぶのに強い: 候補が3つ以上あると、if/elseより読みやすく整理できます。
- コードの見通しが良い: 値ごとの処理が「並んで」見えるので、後から直すのが簡単。
- 同じ処理をまとめやすい: 似たパターンを一箇所に集約できます。
基本の書き方
switch (式) {
case 値1:
// 式が値1と一致したら実行
break;
case 値2:
// 式が値2と一致したら実行
break;
default:
// どれにも一致しないときの処理
}
JavaScript- 式: 判定したい値(文字列や数値など)
- case 値: 「この値ならこれをする」という分岐
- break: そこで処理を止める合図。忘れると下のcaseへ流れてしまう
- default: どれにも当てはまらないときの保険
例題1:曜日でメッセージを変える
if文で書く場合
const day = 'Mon';
if (day === 'Mon') {
console.log('月曜は軽めのスタート');
} else if (day === 'Tue') {
console.log('火曜は集中デー');
} else if (day === 'Fri') {
console.log('金曜は振り返り');
} else {
console.log('それ以外は通常運転');
}
JavaScriptswitch文で書く場合
const day = 'Mon';
switch (day) {
case 'Mon':
console.log('月曜は軽めのスタート');
break;
case 'Tue':
console.log('火曜は集中デー');
break;
case 'Fri':
console.log('金曜は振り返り');
break;
default:
console.log('それ以外は通常運転');
}
JavaScript- ポイント: 候補が増えるほど、switchのほうが「どの値で何をするか」が見やすくなります。
例題2:テストの点数で評価(複数値をまとめる)
const score = 85;
let rank;
switch (true) {
case score >= 90:
rank = 'A';
break;
case score >= 80:
rank = 'B';
break;
case score >= 70:
rank = 'C';
break;
default:
rank = 'D';
}
console.log(`評価は ${rank} です`);
JavaScript- ポイント: 不等号のような「範囲判定」は本来if文が得意ですが、switchでやるなら「switch(true)」というテクニックがあります。
- 初心者向けの結論: 範囲判定は基本的にif文で書くのがおすすめ。switchは「ぴったり一致」に向いています。
例題3:同じ処理をまとめる(フォールスルー)
const input = '8月';
switch (input) {
case '8月':
case '八月':
case 'August':
console.log('正解です');
break;
default:
console.log('不正解です');
}
JavaScript- ポイント: 複数のcaseを並べて「同じ処理」に落とし込めます。これは意図的なフォールスルーのよい使い方です。
よくあるつまずき
- breakの書き忘れ:
breakがないと、次のcaseへ処理が流れてしまい、意図しない出力が続けて実行されます。
迷ったら「各caseの最後にbreak」を習慣化すると安全です。 - 比較ルールは厳密一致(===):
switchは内部的に「厳密な一致」で判断します。文字列と数値の違い、大小判定、部分一致はできません。 - defaultは最後に1つ:
例外的な入力が来ても動くように、defaultで必ず保険の処理を置きましょう。
いつswitchを使うべき?
- 向いている: 候補が固定の「選択肢」になっているとき(メニュー番号、コマンド、固定の文字列、ステータスコード)
- 向いていない: 範囲や複雑な条件(>、<、含む、部分一致)はif文が簡潔
練習問題
練習1:メニュー番号で料理を表示
- 仕様: 1なら「カレー」、2なら「ラーメン」、3なら「寿司」、それ以外は「未登録のメニュー」
- ヒント: switch(number)でcase 1, 2, 3を作り、最後にdefault
const menu = 2;
switch (menu) {
case 1:
console.log('カレー');
break;
case 2:
console.log('ラーメン');
break;
case 3:
console.log('寿司');
break;
default:
console.log('未登録のメニュー');
}
JavaScript練習2:HTTPステータスでメッセージ
- 仕様: 200→「成功」、404→「見つかりません」、500→「サーバーエラー」、その他→「その他のステータス」
- ポイント: 数値の一致で分岐
const status = 404;
switch (status) {
case 200:
console.log('成功');
break;
case 404:
console.log('見つかりません');
break;
case 500:
console.log('サーバーエラー');
break;
default:
console.log('その他のステータス');
}
JavaScript練習3:季節の別名をまとめる
- 仕様: 「春」「Spring」「スプリング」は同じ扱いで「花見の季節」と表示。その他は「通常の季節」
- ポイント: 複数のcaseを並べて同じ処理に落とす
const season = 'Spring';
switch (season) {
case '春':
case 'Spring':
case 'スプリング':
console.log('花見の季節');
break;
default:
console.log('通常の季節');
}
JavaScriptまとめ
- 役割: 固定の候補から「ぴったり一致」を選んで処理するのが得意
- 鉄則: 各caseの最後にbreak、例外に備えてdefault
- 使い分け: 範囲や複雑な条件はif文、選択肢が決まっているならswitch
- 練習法: まずif文で書いてから、候補が並ぶ部分をswitchに置き換えてみる

