JavaScript | 基礎構文:条件分岐 – else if

JavaScript JavaScript
スポンサーリンク

else if を一言でいうと

else if は、
「if がダメだったときに、別の条件を順番に試していくためのもの」 です。

日本語にすると、

もし 条件A なら A の処理
そうでなくて、もし 条件B なら B の処理
それでもなければ 条件C の処理…

という、“上から順にチェックする複数条件” を書くための仕組みです。

ここが重要です。
else if を使うときは、
「どの順番で条件を試すか」「どこで打ち止めにするか」が動作に直結します。
ただ増やすのではなく、「順番」を常に意識してください。


else if の基本構造と流れ

if / else と何が違う?

まず、if / else だけのパターンを思い出します。

if (条件A) {
  // 条件Aがtrueのときだけ
} else {
  // 条件Aがfalseのときだけ(A以外全部)
}
JavaScript

これは「2 択」です。
「A か、それ以外か」です。

ここに「B という別パターン」も追加したいときに、
else if が登場します。

if (条件A) {
  // 条件Aがtrueのとき
} else if (条件B) {
  // 条件Aはfalse、かつ 条件Bがtrueのとき
} else {
  // 条件AもBもfalseのとき(どれにも当てはまらないとき)
}
JavaScript

else if の評価順

次のコードを例に、流れを追ってみます。

const score = 82;

if (score >= 90) {
  console.log("評価 A");
} else if (score >= 70) {
  console.log("評価 B");
} else {
  console.log("評価 C");
}
JavaScript

実際にはこういう順番で動きます。

  1. score >= 90 を評価(82 >= 90 → false)
  2. false なので、その if ブロックはスキップ
  3. 次に else if (score >= 70) を評価(82 >= 70 → true)
  4. true なので、そのブロックを実行し、「評価 B」を表示
  5. どこかで true になった時点で、「以降の else if / else は全部スキップ」

つまり、上から順に「一番最初にマッチした条件だけ」が実行されます。

ここが重要です。
else if は「全部の条件を評価してマッチしたところを全部実行する」のではなく、
「上から順に見て最初に当たったところで止める」 ものです。
ここを勘違いすると、「全部チェックしているつもりで、実は上だけしか効いていない」状態になります。


else if で「ランク分け」してみる

典型例:点数による評価

成績を複数段階に分けてみます。

ルールはこうします。

  • 90 以上 → A
  • 70 以上 → B
  • 50 以上 → C
  • それ未満 → D

これをコードにすると:

const score = 76;

if (score >= 90) {
  console.log("評価 A");
} else if (score >= 70) {
  console.log("評価 B");
} else if (score >= 50) {
  console.log("評価 C");
} else {
  console.log("評価 D");
}
JavaScript

流れを丁寧に追うと:

score = 76 の場合

  1. score >= 90 → false
  2. 次の score >= 70 → true → 「評価 B」で終了
  3. 「評価 C」や「評価 D」には進まない

score = 52 の場合

  1. score >= 90 → false
  2. score >= 70 → false
  3. score >= 50 → true → 「評価 C」で終了

score = 40 の場合

  1. score >= 90 → false
  2. score >= 70 → false
  3. score >= 50 → false
  4. どれも当てはまらないので、最後の else → 「評価 D」

ここが重要です。
else if を使うときは、「どんな点数が、どの条件に引っかかって、どの時点で分岐が終わるか」を、自分の頭でトレースできることが大事です。
1 つ 1 つの条件だけでなく、「この順番で評価される」という視点を持ってください。


条件の「順番」が結果を変える

間違えやすい悪い例

さきほどの評価を、もし次のように書いてしまったらどうなるでしょう。

const score = 95;

if (score >= 50) {
  console.log("評価 C");
} else if (score >= 70) {
  console.log("評価 B");
} else if (score >= 90) {
  console.log("評価 A");
}
JavaScript

95 点なので、本当は「評価 A」にしたいはずです。
しかし、このコードは「評価 C」を表示します。

理由は簡単で、

  1. 最初の score >= 50 が true になってしまう
  2. 一番上で true になったので、そこで処理が終了
  3. 以降の else if は評価さえされない

からです。

どう並べるのが正解か

「A → B → C → D」のようなランク分けをしたいときは、
必ず「厳しい条件から順」に書くのが鉄則です。

つまり、

if (score >= 90) {
  // A
} else if (score >= 70) {
  // B
} else if (score >= 50) {
  // C
} else {
  // D
}
JavaScript

という順番です。

ここが重要です。
else if は「条件の集合」ではなく「条件の“列”」です。
どの条件からチェックするか(順番)を間違えると、
条件式自体は合っていても、全体としては期待と違う動きになります。
「上から読んで気持ちいい順番になっているか?」を常に自分に問いかけてください。


else if を使うときの書き分けイメージ

2 択のときは else だけで十分

条件が「A か A 以外か」の 2 パターンしかないなら、
else if は不要で、if / else で十分です。

const age = 20;

if (age >= 18) {
  console.log("大人です");
} else {
  console.log("未成年です");
}
JavaScript

これは、

  • 18 歳以上 → 大人
  • それ以外 → 未成年

と 2 つしかないので、else if を使う意味がありません。

3 パターン以上になったら else if を検討

条件が 3 つ以上に増えたら、else if の出番です。

例えば年齢区分を

  • 0〜12 → 子ども
  • 13〜19 → ティーン
  • 20〜64 → 大人
  • 65 以上 → シニア

に分けたいなら、こうです。

const age = 25;

if (age <= 12) {
  console.log("子ども");
} else if (age <= 19) {
  console.log("ティーン");
} else if (age <= 64) {
  console.log("大人");
} else {
  console.log("シニア");
}
JavaScript

ここでも「範囲が狭い順」または「具体的な条件から順」に並べると、
自然な読み方になります。

ここが重要です。
「場合分けが 3 パターン以上になってきたら、else if を使うタイミング」と覚えておくと良いです。
逆に言うと、2 パターンしかないのに else if を使い始めたら、
いったん落ち着いて「これは本当に 3 パターン必要か?」と見直してみてください。


else if が増えすぎたときのサイン

ネストが深くて読みにくくなっていないか

実務をしていると、そのうちこんなコードを見かけます。

if (type === "guest") {
  // ...
} else if (type === "user") {
  // ...
} else if (type === "admin") {
  // ...
} else if (type === "super-admin") {
  // ...
} else {
  // ...
}
JavaScript

これくらいならまだ読めますが、
もっと条件や中身が長くなってくると、一気に読みにくくなります。

そうなってきたら、

  • switch 文に切り替えを検討する
  • 条件ごとの処理を関数に切り出す
  • 「この区分け自体が妥当か?」を見直す

など、「else if を増やし続けない工夫」 が必要になってきます。

とはいえ、最初は else if で十分

ただ、学び始めの段階では、
いきなり switch や高度なパターンに手を出す必要はありません。

まずは

  • if / else if / else で頭の中の「場合分け」を表現できる
  • 条件の順番を意識して書ける
  • 「この値ならどのブロックに入るか」を説明できる

ここまでできれば十分です。

ここが重要です。
else if を「最終形」とは思わないこと。
「まず else if で考えてみて、複雑になってきたら別の表現を検討する」くらいの距離感がちょうどいいです。


初心者として else if で本当に押さえてほしいこと

else if は、「if がダメだったときに、別の条件を順番に試す」ためのもの。
処理は上から順に評価され、最初に true になったブロックだけ が実行され、そこで打ち止め。

「厳しい条件(上位ランク)」から順に書き、
「ゆるい条件(下位ランク)」を後ろに回す。
順番を間違えると、意図しないブロックで止まってしまう。

2 パターンしかないときは if / else で十分。
3 パターン以上になったときに、else if の出番がやってくる。

else if が増えすぎて読みにくくなってきたら、
「条件の整理」や「別の構文(switch)」への分離を考え始めるサイン。

ここが重要です。
else if は、“プログラムに「段階的な判断」をさせる道具” です。
「この条件なら A、それがダメなら B、それもダメなら C…」という自分の頭の中のロジックを、
一度日本語にしてから、上から順に if / else if / else に落とし込んでみてください。
そのプロセス自体が、「条件分岐を設計する力」を確実に鍛えてくれます。

最後に、練習問題をいくつか挙げておきます。
自分で条件を言葉で書き出してから、コードにしてみてください。

// 練習1:
// 年齢 age によって、
// 0〜5歳   → "幼児"
// 6〜12歳  → "子ども"
// 13〜18歳 → "ティーン"
// それ以上 → "大人"
// を表示する if / else if / else を書いてみる。

// 練習2:
// 温度 temp によって、
// 30度以上              → "暑い"
// 20度以上30度未満      → "ちょうどいい"
// 10度以上20度未満      → "肌寒い"
// それ未満              → "寒い"
// を表示するコードを書いてみる。
// どの順番で条件を書くのが自然か、自分で考えて決める。

// 練習3:
// 文字列 role が "admin" / "editor" / "viewer" のどれかによって、
// それぞれ違うメッセージを表示し、
// どれにも当てはまらないときは「不明な権限」と表示するコードを書いてみる。
JavaScript

「この値のとき、どのブロックが実行される?」を自分で説明できるようになったとき、
あなたは else if をもう “感覚で” 使いこなせているはずです。

タイトルとURLをコピーしました