JavaScriptのelse ifを使った多段階条件分岐の書き方をやさしく解説！初心者でもわかる

1. else ifを使った多段階条件分岐の基本構造

1. else ifを使った多段階条件分岐の基本構造

else ifは「もし最初の条件が違ったら、次の条件をチェックする」という意味で使います。複数の条件を順番に確認しながら、どれに当てはまるかを判断できるのが特徴です。たとえば、点数や年齢、入力された値によって処理を変えたいときによく使われます。

まずは、基本的な書き方を確認してみましょう。

if (条件1) {
  // 条件1がtrueのときの処理
} else if (条件2) {
  // 条件2がtrueのときの処理
} else if (条件3) {
  // 条件3がtrueのときの処理
} else {
  // どの条件にも当てはまらないときの処理
}

このように、上から順番に条件をチェックし、最初に当てはまった処理だけが実行されます。途中で条件に一致した場合、それ以降のelse ifは実行されません。

初心者の方は「上から順番に1つずつ確認していく」というイメージを持つと理解しやすいです。

簡単なサンプルとして、数値によってメッセージを変えるコードを見てみましょう。

let num = 50;

if (num >= 80) {
  console.log("80以上です");
} else if (num >= 50) {
  console.log("50以上です");
} else {
  console.log("50未満です");
}

この場合、numが50なので「50以上です」と表示されます。このように、条件を段階的に分けて処理できるのがelse ifの大きなメリットです。

50以上です

条件の数は必要に応じて自由に増やせるため、複雑な分岐でもシンプルに整理して書けるようになります。

2. 例：点数による成績判定プログラム

2. 例：点数による成績判定プログラム

具体的に、点数に応じて「優」「良」「可」「不可」と評価を変えるプログラムを書いてみましょう。else ifを使うと、1つの値に対して複数の条件を順番にチェックできるため、評価のような段階的な判定にぴったりです。

let score = 85;

if (score >= 90) {
  console.log("成績は優です");
} else if (score >= 75) {
  console.log("成績は良です");
} else if (score >= 60) {
  console.log("成績は可です");
} else {
  console.log("成績は不可です");
}

このコードでは、まず90点以上かどうかをチェックし、違えば75点以上かを確認し…というように、上から順番に条件を見ていきます。今回のscoreは85なので、最初の条件は当てはまらず、次の「75以上」の条件が成立して「成績は良です」と表示されます。

成績は良です

このようにelse ifを使うと、「どの条件に当てはまるか」を一つずつ判断して、最初に一致した結果だけを実行できます。初心者の方は「上から順番にチェックされる」という流れを意識すると理解しやすくなります。

3. else ifの仕組みと処理の流れ

3. else ifの仕組みと処理の流れ

プログラムは上から順番に条件をチェックしていきます。最初のifの条件がtrueなら、その時点で処理が確定し、それ以降のelse ifやelseは一切実行されません。

もしfalseなら、次のelse ifの条件をチェックします。このように「上から1つずつ確認していく」のが基本の流れで、最初に一致した条件だけが実行される仕組みです。どれにも当てはまらなかった場合のみ、最後のelseが実行されます。

初心者の方は「上から順番にふるいにかけていくようなイメージ」を持つと理解しやすくなります。

let score = 80;

if (score >= 90) {
  console.log("90点以上です");
} else if (score >= 75) {
  console.log("75点以上です");
} else {
  console.log("75点未満です");
}

この例では、まず90点以上かどうかを確認しますが、80は当てはまらないため次の条件へ進みます。その後、75点以上の条件に当てはまるため、ここで処理が確定し、それ以降はチェックされません。

75点以上です

このように、条件は「上から順に評価される」ことと「最初に一致したものだけが実行される」ことをしっかり理解しておくと、意図しない動作を防ぐことができます。

4. 多段階条件分岐の注意点

4. 多段階条件分岐の注意点

複数のelse ifを書くときは、条件の順番に気をつけましょう。上から順に判定されるため、条件が重なっていると意図しない結果になることがあります。特に初心者の方は「どの条件が先にチェックされるか」を意識することが大切です。

例えば、点数の判定で条件の順番を間違えると、正しい評価がされなくなります。次のコードを見てみましょう。

let score = 80;

if (score >= 60) {
  console.log("60点以上です");
} else if (score >= 75) {
  console.log("75点以上です");
} else {
  console.log("60点未満です");
}

この場合、本来は「75点以上です」と表示したいですが、先にscore >= 60がチェックされるため、そこで条件が成立してしまい、後ろの条件は実行されません。

60点以上です

このようなミスを防ぐためには、「より厳しい条件（大きい数値）」を上に書くのが基本です。条件は上から順に評価されるため、順番を正しく並べるだけでバグを防ぐことができます。迷ったときは「どの条件を一番先に判断すべきか」を考えるようにすると理解しやすくなります。

5. else ifの代わりにswitch文を使う場合もある

5. else ifの代わりにswitch文を使う場合もある

else ifは条件を順番にチェックするのに便利ですが、「ある値と一致するかどうか」だけを判定したい場合は、switch文を使うとコードがスッキリして読みやすくなることがあります。特に、条件の数が多いときに効果的です。

例えば、曜日ごとに表示するメッセージを変えるような場合を見てみましょう。

let day = "月";

switch (day) {
  case "月":
    console.log("月曜日です");
    break;
  case "火":
    console.log("火曜日です");
    break;
  case "水":
    console.log("水曜日です");
    break;
  default:
    console.log("その他の曜日です");
}

このコードでは、dayの値がどれに一致するかを順番に確認し、当てはまった処理だけが実行されます。breakを書くことで、そこで処理が終了する点もポイントです。

月曜日です

ただし、switch文は「60以上」のような範囲での条件分岐には向いていません。そのため、点数や年齢のように数値の範囲で判断したい場合は、これまで学んだelse ifを使うのが基本になります。用途によって使い分けることが大切です。

6. 例外的な使い方と簡単な条件式

6. 例外的な使い方と簡単な条件式

条件式は単純な比較だけでなく、論理演算子（&&や||）を使って複数の条件を組み合わせることもできます。

例えば、「点数が60以上かつ出席率が80%以上なら合格」という条件はこう書けます。

let score = 65;
let attendance = 85;

if (score >= 60 && attendance >= 80) {
  console.log("合格です");
} else {
  console.log("不合格です");
}

このようにelse ifと論理演算子を組み合わせて、より細かい条件分岐ができます。

7. まとめないけど、理解を深めるために

7. まとめないけど、理解を深めるために

ここまで、多段階条件分岐のelse ifの書き方と注意点を解説しました。複数の条件を順に判定し、どの条件にも当てはまらなければ最後のelseで処理をすることが基本です。

ぜひ実際にプログラムを書いて動かしながら、条件分岐の仕組みを体感してみてくださいね。

まとめ

まとめ

今回はJavaScriptのelse ifを使った多段階条件分岐について、基本構造から具体例、そして実務でも重要になる注意点まで丁寧に確認してきました。条件分岐はプログラミングの中でも非常に重要な基礎であり、特にif文とelse ifを正しく理解することで、複雑な処理もシンプルに整理できるようになります。JavaScript初心者にとっては最初につまずきやすいポイントでもありますが、考え方自体はとてもシンプルで、上から順番に条件を評価していくという流れを理解すれば問題ありません。

else ifの最大の特徴は、複数の条件を段階的に評価できる点にあります。例えば点数による評価、ユーザーの入力内容による分岐、ステータス管理など、実際のWeb開発でも頻繁に登場します。if文だけでは一つの条件しか判断できませんが、else ifを使うことで複数の条件を順番にチェックし、最適な処理を選択できます。この仕組みを理解することで、コードの可読性が向上し、保守性の高いプログラムを書くことができるようになります。

また、条件の順番が非常に重要である点も見逃せません。プログラムは上から順番に評価されるため、条件の並び方を間違えると、意図しない結果になることがあります。特に数値の範囲判定では、大きい条件から順に書くことが基本となります。このルールを守ることで、バグを未然に防ぎ、安定した動作を実現できます。

さらに、論理演算子と組み合わせることで、より高度な条件分岐も実現できます。例えば複数の条件を同時に満たす必要がある場合や、どちらか一方を満たせばよい場合など、柔軟な条件設計が可能になります。これにより、実務レベルのプログラムにも対応できるスキルが身につきます。

実際の開発では、条件分岐の書き方一つでコードの読みやすさやバグの発生率が大きく変わります。else ifを適切に使いこなすことで、処理の流れが明確になり、他の人が読んでも理解しやすいコードを書くことができます。これはチーム開発においても非常に重要なポイントです。

サンプルプログラムで復習

ここで、学習内容を整理するために、else ifを使った実用的なサンプルコードを確認してみましょう。ユーザーの年齢によってメッセージを変えるシンプルな例です。

let age = 20;

if (age >= 65) {
  console.log("高齢者料金が適用されます");
} else if (age >= 20) {
  console.log("成人料金です");
} else if (age >= 13) {
  console.log("学生料金です");
} else {
  console.log("子供料金です");
}

このように、条件を段階的に分けることで、年齢に応じた適切な処理を実現できます。else ifはこのようなケースで非常に役立つ構文です。

実行結果の確認

成人料金です

条件に一致した処理のみが実行される点をしっかり確認しておきましょう。最初に一致した条件で処理が止まるという仕組みが重要です。