JavaScriptのelse if文を完全解説｜基本構文・応用例・エラーハンドリングまで徹底ガイド

1. はじめに：JavaScriptの条件分岐と「else if」の役割

JavaScriptは、Web開発において動的な機能を実装するために広く使われているプログラミング言語です。その中でも「条件分岐」は、特定の条件に基づいて異なる処理を行う重要な機能です。

この記事では、条件分岐の一つである「else if」文に焦点を当て、その基本構文や使い方を詳しく解説します。特に初心者にとって理解しやすいように具体例を交えながら説明します。

JavaScriptにおける条件分岐の重要性

プログラムでは、特定の条件に応じて異なる処理を行う必要があります。たとえば、オンラインショッピングサイトでは、購入金額に応じて送料を無料にする場合や、クーポンコードの適用条件を判定する場面があります。

このようなシチュエーションでは、JavaScriptの「if…else」文や「else if」文を使うことで、柔軟に条件分岐を設定できます。

「else if」文とは？

「else if」文は、複数の条件を順番に評価するための構文です。以下のように使用されます。

if (条件1) {
  // 条件1が真の場合の処理
} else if (条件2) {
  // 条件2が真の場合の処理
} else {
  // 上記の条件がすべて偽の場合の処理
}

この構文は、複数の条件をチェックしたい場合に特に便利です。たとえば、ユーザーの年齢に応じてアクセス権限を切り替える場合や、スコアに基づいてランクを決定する場合に役立ちます。

この記事の流れ

この記事では、以下の内容を順に解説します。

1. 「if」および「else」文の基本構文と使い方
2. 「else if」文の構文と具体例
3. 実践的なコードを用いた応用テクニック
4. 「else if」と「switch」文の比較と使い分け
5. よくあるエラーとトラブルシューティング

これらを学ぶことで、JavaScriptにおける条件分岐のスキルを強化し、より高度なプログラムを作成できるようになります。

次のセクションでは、「if」および「else」文の基本構文から詳しく見ていきましょう。

2. 基礎編：「if」「else」文の基本構文と使い方

JavaScriptの条件分岐は、「if」および「else」文を使ってシンプルに実現できます。このセクションでは、これらの基本構文と具体的な使い方について解説します。

「if」文とは？

「if」文は、指定した条件が真（true）の場合にのみ処理を実行する構文です。基本構文は以下のとおりです。

if (条件) {
  // 条件が真の場合に実行される処理
}

「if」文の具体例

以下は、ユーザーの年齢に基づいて処理を分岐する例です。

let age = 20;

if (age >= 18) {
  console.log("成人です。");
}

このコードでは、変数ageが18以上の場合に「成人です。」と出力されます。それ以外の場合は何も実行されません。

「else」文とは？

「else」文は、「if」の条件が偽（false）の場合に実行される処理を定義する構文です。「if」と組み合わせて使用します。

if (条件) {
  // 条件が真の場合に実行される処理
} else {
  // 条件が偽の場合に実行される処理
}

「else」文の具体例

次は、年齢が18歳未満の場合に異なるメッセージを表示する例です。

let age = 16;

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

このコードでは、ageが18未満の場合に「未成年です。」と出力されます。

まとめ

このセクションでは、JavaScriptの基本的な条件分岐である「if」および「else」文の構文と使い方を学びました。これらの構文は、シンプルな条件分岐だけでなく、複雑なロジックを組み立てる際の基礎となります。

次のセクションでは、複数の条件を扱う「else if」文について、さらに詳しく解説します。実践的な例も交えながら、応用テクニックを習得していきましょう。

3. 発展編：「else if」文の構文と具体例【初心者向け】

このセクションでは、「else if」文を使った複雑な条件分岐について詳しく解説します。「else if」文を利用することで、複数の条件を順番に評価し、適切な処理を実行できます。

「else if」文の構文

「else if」文は、複数の条件を評価するための拡張構文です。基本構文は次のとおりです。

if (条件1) {
  // 条件1が真の場合の処理
} else if (条件2) {
  // 条件2が真の場合の処理
} else {
  // すべての条件が偽の場合の処理
}

具体例：テストの評価判定

以下のコード例では、テストの得点に応じて評価を表示します。

let score = 75;

if (score >= 90) {
  console.log("評価：A");
} else if (score >= 80) {
  console.log("評価：B");
} else if (score >= 70) {
  console.log("評価：C");
} else if (score >= 60) {
  console.log("評価：D");
} else {
  console.log("評価：F");
}

まとめ

このセクションでは、「else if」文の構文と具体例について解説しました。「else if」文は、複数の条件を順番に評価できる便利な機能です。
次のセクションでは、さらに応用的な例やケーススタディを紹介し、実践的なスキルを身につけていきます。

4. 応用編：「else if」を使った実践コードとケーススタディ

このセクションでは、「else if」文を使用した実践的なコード例を紹介します。実際のアプリケーションでよく使われるシナリオを通して、応用力を高めましょう。

ケース1：フォーム入力のバリデーション

let username = "user123";
let password = "pass123";

if (username === "") {
  console.log("ユーザー名を入力してください。");
} else if (password === "") {
  console.log("パスワードを入力してください。");
} else if (password.length < 6) {
  console.log("パスワードは6文字以上にしてください。");
} else {
  console.log("入力が有効です。");
}

ケース2：スコア判定とランク分け

let score = 72;

if (score >= 90) {
  console.log("ランク：S");
} else if (score >= 80) {
  console.log("ランク：A");
} else if (score >= 70) {
  console.log("ランク：B");
} else if (score >= 60) {
  console.log("ランク：C");
} else {
  console.log("ランク：D");
}

まとめ

このセクションでは、「else if」文を使った応用例と実践コードを紹介しました。
これらを応用することで、より複雑な条件分岐を扱えるようになります。
次のセクションでは、「else if」と「switch」文の違いについて詳しく比較し、それぞれの使い分けを解説します。

5. 「else if」と「switch文」の比較—どっちを使うべき？

JavaScriptでは、条件分岐を実現するために「else if」文と「switch」文の2つがよく使われます。このセクションでは、それぞれの構文と特徴を比較し、用途に応じた使い分け方を解説します。

「else if」文の特徴

構文と例

let grade = "B";

if (grade === "A") {
  console.log("優秀です！");
} else if (grade === "B") {
  console.log("良い成績です。");
} else if (grade === "C") {
  console.log("合格ラインです。");
} else {
  console.log("再試験が必要です。");
}

「switch」文の特徴

構文と例

let grade = "B";

switch (grade) {
  case "A":
    console.log("優秀です！");
    break;
  case "B":
    console.log("良い成績です。");
    break;
  case "C":
    console.log("合格ラインです。");
    break;
  default:
    console.log("再試験が必要です。");
}

まとめ

• 「else if」文: 複雑な条件式や論理演算子を扱う場合に適している。
• 「switch」文: 特定の値に基づく条件分岐をシンプルに整理する場合に適している。

6. よくある間違いとエラーハンドリングの注意点

このセクションでは、「else if」文を使用する際によく発生する間違いや、それらを防ぐためのエラーハンドリング方法について解説します。

よくある間違いと対処法

条件の評価ミス

let age = 20;

if (age > 18) {
  console.log("成人です。");
} else if (age > 20) {
  console.log("20歳以上です。");
} else {
  console.log("未成年です。");
}

エラーハンドリングの追加

try {
  let input = prompt("スコアを入力してください:");
  let score = parseInt(input);

  if (isNaN(score)) {
    throw new Error("数値を入力してください。");
  }

  if (score >= 90) {
    console.log("評価：A");
  } else if (score >= 80) {
    console.log("評価：B");
  } else {
    console.log("評価：C");
  }
} catch (error) {
  console.error(error.message);
}

まとめ

条件式のミスを防ぎ、デバッグやエラーハンドリングを活用することで、より安全で堅牢なコードを実現できます。

7. FAQ：読者の疑問に答える

このセクションでは、JavaScriptの「else if」文に関して、読者がよく抱く疑問や誤解について解説します。

Q1. 「else if」と「if」の違いは？

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

Q2. 「else if」は何回まで使えますか？

制限はありませんが、条件が多い場合は「switch文」の利用を検討しましょう。

Q3. 「else if」と三項演算子はどう違いますか？

let score = 75;
console.log(score >= 60 ? "合格です！" : "不合格です。");

8. まとめ：JavaScriptの「else if」をマスターしよう！

この記事では、JavaScriptの条件分岐における「else if」文の基本から応用例までを詳しく解説しました。

学習ポイントの振り返り

• 基本構文: 条件式を使った処理の流れを学んだ。
• 応用例: 実践コードを通じて応用力を強化。
• 比較: 「else if」と「switch」文の使い分けを理解。
• エラーハンドリング: ミスを防ぐためのデバッグ手法を習得。

次のステップ

• 論理演算子の活用: より複雑な条件式を学習。
• 三項演算子と短絡評価: 条件式の簡略化を試す。
• 関数と組み合わせた条件分岐: コードの再利用性を高める。

「else if」文をマスターし、実践で活用できるプログラムを作成しましょう！