こんにちは、かつコーチです。
前回は算術・比較・論理演算子について解説しました。
今回は、その演算子を使って「条件によって処理を分ける」条件分岐を扱います。
「もし〜だったら、こう処理する」という考え方は、どんなプログラムにも登場する基本のテクニックです。
if文の基本
基本の書き方
条件によって処理を分けるには、if 文を使います。
const age = 20;
if (age >= 20) {
console.log("成人です");
} else {
console.log("未成年です");
}
// 出力: 成人です
「もし age が20以上なら『成人です』、そうでなければ『未成年です』を表示する」という処理です。
if (条件) の後の { } の中に、条件が成立したときの処理を書きます。
else ifで条件を追加する
条件が3つ以上ある場合は、else if を使います。
const score = 75;
if (score >= 90) {
console.log("評価：A");
} else if (score >= 70) {
console.log("評価：B");
} else if (score >= 50) {
console.log("評価：C");
} else {
console.log("評価：D");
}
// 出力: 評価：B
上から順に条件をチェックしていき、最初に条件が成立したブロックだけが実行されます。
score が75の場合、最初の score >= 90 は成立しませんが、次の score >= 70 で成立するので「評価：B」が表示されます。
三項演算子で1行にまとめる
処理がシンプルな場合は、if を使わずに三項演算子で1行にまとめることもできます。
const age = 20;
const result = age >= 20 ? "成人です" : "未成年です";
console.log(result);
// 出力: 成人です
条件 ? 条件が true のときの値 : 条件が false のときの値 という形で書きます。
ただし、条件や処理が複雑になる場合は無理に三項演算子を使わず、通常の if 文にした方が読みやすくなります。
switch文：条件のパターンが多いとき
基本の書き方
同じ変数の値によって処理を細かく分けたい場合は、switch 文を使うとすっきり書けます。
const day = "水";
switch (day) {
case "月":
console.log("週の始まりです");
break;
case "水":
console.log("週の折り返しです");
break;
case "金":
console.log("もうすぐ休みです");
break;
default:
console.log("普通の日です");
break;
}
// 出力: 週の折り返しです
case に該当する値がなければ default の処理が実行されます。
else if を何個も並べるより、こういった「同じ変数の値によって分岐する」ケースはswitch文の方が見た目がすっきりします。
つまずきやすいポイント：breakの書き忘れ
フォールスルーとは
switch文で私が実際にやらかした失敗が、break の書き忘れです。
❌ Before：break を書き忘れる
const day = "水";
switch (day) {
case "月":
console.log("週の始まりです");
// breakを書き忘れると…
case "水":
console.log("週の折り返しです");
break;
}
// 出力: 週の折り返しです（"月"のcaseにヒットしていなくても意図せず実行される構造になっている）
break を書かないと、該当した case の処理が終わった後も、次の case の処理までそのまま実行され続けてしまいます（これを「フォールスルー」と言います）。
私は最初、なぜか複数のメッセージがコンソールに表示されてしまい、原因を探すのに小一時間かかった記憶があります。
✅ After：各caseの最後に必ずbreakを書く
const day = "月";
switch (day) {
case "月":
console.log("週の始まりです");
break; // ここで確実に処理を終わらせる
case "水":
console.log("週の折り返しです");
break;
}
// 出力: 週の始まりです（意図した通りに1つだけ実行される）
switch文を書くときは、各 case の最後に break を書き忘れていないか、必ず確認する癖をつけましょう。
フォールスルーをあえて使う場面
余談ですが、このフォールスルーの性質は「複数のcaseで同じ処理をしたいとき」にあえて使われることもあります。
const day = "土";
switch (day) {
case "土":
case "日":
console.log("休日です");
break;
default:
console.log("平日です");
break;
}
// 出力: 休日です
「土」と「日」のどちらでも同じ処理をしたい場合、case "土": の直後に break を書かずに次の case "日": に処理を続けさせることで、コードをまとめられます。
意図せず起きると事故ですが、意図的に使えば便利なテクニックでもあります。
if文とswitch文の使い分け
どちらを選べばいいのか
判断に迷ったときの目安を整理しておきます。
| 状況 | おすすめ |
|---|---|
| 範囲による判定（〜以上、〜未満など） | if / else if |
| 1つの変数の「値」によって細かく分岐する | switch |
| 複数の条件を組み合わせて判定する | if（&& ` |
| 単純な二択で1行にまとめたい | 三項演算子 |
switch は「範囲」の判定には向かないので、年齢や点数のような数値の範囲を扱うときは if / else if を使いましょう。
逆に、曜日や種別のような「決まった値のどれかに一致するか」を判定するときは switch の方が見通しがよくなります。
まとめ
この記事のポイント
if/else if/elseで条件によって処理を分岐できる- 単純な二択には三項演算子で1行にまとめる方法もある
- 条件のパターンが多いときは
switch文がすっきり書ける - switch文の
breakの書き忘れ（フォールスルー）に注意する - 範囲の判定は
if、値の一致による分岐はswitchが向いている
次に読むべき記事
次回は、同じ処理を繰り返す「for・while・forEach」について解説します。
→ 次の記事：for・while・forEachで繰り返し処理