カテゴリ: JavaScript 更新日: 2026/03/29

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

JavaScriptのelse ifを使った多段階条件分岐の書き方
JavaScriptのelse ifを使った多段階条件分岐の書き方

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで条件をいくつも分けて処理をしたいんですが、どう書けばいいですか?」

先生

「それならelse ifを使った多段階条件分岐が便利です。状況に応じて、いくつもの条件を順番にチェックできますよ。」

生徒

「else ifって何ですか?普通のif文とどう違うんですか?」

先生

「簡単に言うと、ifは最初の条件を調べて、合わなければ次の条件を調べるのがelse ifです。複数の条件を順番に判断したいときに使います。」

生徒

「じゃあ、具体的な書き方を教えてください!」

先生

「では、基本の使い方から見ていきましょう。」

1. 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 {
  // どの条件にも当てはまらないときの処理
}

このように、条件をどんどん追加していけるのがポイントです。

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

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

具体的に、点数に応じて「優」「良」「可」「不可」と評価を変えるプログラムを書いてみましょう。


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以上なら「良」、60以上なら「可」、それ以外は「不可」となります。else ifで段階的に判定しています。

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

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

プログラムは上から順番に条件をチェックしていきます。最初のifの条件がtrueなら、その処理を実行して後は飛ばします。

もしfalseなら、次のelse ifの条件をチェックします。これを繰り返し、どれにも当てはまらなければelseの処理を実行します。

例えば、上の例でscoreが80なら、最初のif(90以上)はfalseなので、次のelse if(75以上)がtrueになり「成績は良です」と表示されます。

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

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

複数のelse ifを書くときは、条件の順番に気をつけましょう。上から順に判定されるため、条件が重なっていると正しく動かないことがあります。

例えば、score >= 60より先にscore >= 75を書くと、75以上は60以上の条件も満たすため、上から順に正しくチェックできるように大きい条件から書くのが基本です。

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

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

条件が単純に値の一致を判定するだけなら、switch文を使うこともできます。switchは同じように条件分岐しますが、else ifよりも読みやすい場合があります。

ただし、switchは範囲判定(例えば「60以上」など)には向いていないので、範囲判定ではelse ifが使われます。

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

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

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

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


let score = 65;
let attendance = 85;

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

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

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

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はこのようなケースで非常に役立つ構文です。

実行結果の確認


成人料金です

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

先生と生徒の振り返り会話

生徒

先生、else ifを使うと複数の条件を順番にチェックできるってことがよくわかりました。今まではifを何個も書いてしまっていたんですが、それだと効率が悪かったんですね。

先生

その通りです。ifを複数並べるとすべての条件が評価されてしまいますが、else ifを使えば最初に一致した条件だけが実行されるので、無駄な処理を減らせます。

生徒

条件の順番も重要でしたよね。大きい条件から書かないと、正しく判定されないことがあるのが印象的でした。

先生

よく理解できていますね。条件分岐は順番が非常に大切です。特に数値の比較では順序を間違えるとバグの原因になります。

生徒

あと、論理演算子と組み合わせるともっと複雑な条件も作れるのが便利だと思いました。実際の開発でも使えそうです。

先生

そうですね。else ifと論理演算子を組み合わせることで、現実のさまざまな条件に対応できます。今回学んだ内容は、Webアプリ開発やシステム開発の基本になるので、しっかり身につけておきましょう。

生徒

はい、実際にコードを書いて練習しながら理解を深めていきます。ありがとうございました。

カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptの条件式で論理演算子(&&, ||, !)を活用する方法!初心者でもわかる使い方ガイド
New2
TypeScript
TypeScriptでエラー処理を共通関数化して効率的に開発しよう!初心者向け例外処理ガイド
New3
JavaScript
JavaScriptの条件式における比較演算子の使い方まとめ!初心者でもわかる基本ルールと活用法
New4
JavaScript
JavaScriptのswitch文の基本構文と使いどころを学ぼう!初心者でもわかる条件分岐の書き方
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.3
Java&Spring記事人気No3
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptで統一感のあるコードを書くための基本ルール完全ガイド初心者向けコーディング規約入門
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptのonclick・onchangeなどの基本イベントを理解しよう
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.7
Java&Spring記事人気No7
TypeScript
TypeScriptのnever型を使ったエラーハンドリング!例外処理を極める安全なコードの書き方
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptでクエリパラメータを取得する方法を完全解説 URLSearchParamsの使い方を初心者向けに丁寧に説明