JavaScript else ifの書き方 - 初心者向けif-else文の基本

みなさん、JavaScriptを学習していて「複数の条件を書くにはどうすればいいの？」って悩んだことはありませんか？

「if文だけでは足りない」 「複数の条件をどう書けばいいの？」

こんな疑問を感じたことはありませんか？

この記事では、JavaScript の else if 文について初心者の方にも分かりやすく解説します。 基本的な書き方から実践的な使い方まで、条件分岐の仕組みを一緒に理解していきましょう。

条件分岐って何のために使うの？

まず、なぜ条件分岐が必要なのかを理解しましょう。

プログラムは順番に実行される

プログラムは普通、上から下へと順番に実行されます。 でも、状況に応じて違う処理をしたい場合がありますよね。

let weather = "晴れ";

// 天気によって違うメッセージを表示したい
console.log("今日の天気は" + weather + "です");
// ここで天気に応じた処理を分ける必要がある

このような場合に、条件分岐を使って処理を制御します。

条件分岐の種類を知ろう

JavaScriptには以下の条件分岐があります。

• if文: 一つの条件をチェック
• if-else文: 条件が真の場合と偽の場合の処理
• if-else if文: 複数の条件を順番にチェック
• switch文: 一つの値に対して複数の候補をチェック

今回は、この中でも特に重要な**「else if文」**について詳しく学んでいきます。

if文の基本を復習しよう

else if文を理解する前に、基本的なif文を復習しましょう。

シンプルなif文から始めよう

最もシンプルな条件分岐です。

let age = 20;

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

console.log("プログラム終了");

条件が真（true）の場合のみ、if文の中の処理が実行されます。 簡単ですよね！

if-else文で二択を作る

条件が真の場合と偽の場合、それぞれ違う処理を行います。

let age = 15;

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

このように、二つの選択肢がある場合はif-else文を使います。

if-else文の限界

でも、三つ以上の選択肢がある場合はどうでしょうか？

let score = 85;

if (score >= 90) {
    console.log("優秀");
} else {
    if (score >= 70) {
        console.log("良好");
    } else {
        console.log("要努力");
    }
}

このようにネストすると、コードが読みにくくなってしまいます。 ここで**「else if文」**が役立ちます！

else if文の基本的な書き方

else if文を使って、複数の条件を順番にチェックする方法を学びましょう。

基本的な構造はこんな感じ

else if文の基本的な構造は以下の通りです。

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

上から順番に条件がチェックされます。 最初に真になった条件の処理が実行されます。

実際の例で理解しよう

成績を判定するプログラムを書いてみましょう。

let score = 85;

if (score >= 90) {
    console.log("優秀");
} else if (score >= 80) {
    console.log("良好");
} else if (score >= 70) {
    console.log("普通");
} else if (score >= 60) {
    console.log("合格");
} else {
    console.log("不合格");
}

この例では、スコアが85なので「良好」が表示されます。

先ほどのネストした書き方よりも、ずっと読みやすくなりましたね！

実行の流れを詳しく見てみよう

else if文がどのように実行されるか、詳しく見てみましょう。

let temperature = 25;

console.log("気温チェック開始");

if (temperature >= 30) {
    console.log("暑いです"); // 25 >= 30は偽なのでスキップ
} else if (temperature >= 20) {
    console.log("暖かいです"); // 25 >= 20は真なので実行
} else if (temperature >= 10) {
    console.log("涼しいです"); // この条件はチェックされない
} else {
    console.log("寒いです"); // この処理も実行されない
}

console.log("気温チェック終了");

重要なポイント: 最初に真になった条件で処理が確定します。 それ以降の条件はチェックされません。

条件の書き方をマスターしよう

効果的なelse if文を書くための条件の書き方を学びましょう。

比較演算子を活用しよう

様々な比較演算子を使って条件を作成できます。

let userAge = 25;
let hasLicense = true;
let experience = 3;

if (userAge < 18) {
    console.log("運転できません（年齢不足）");
} else if (!hasLicense) {
    console.log("運転できません（免許なし）");
} else if (experience < 1) {
    console.log("初心者マークが必要です");
} else if (experience >= 10) {
    console.log("ベテランドライバーです");
} else {
    console.log("通常の運転者です");
}

異なる変数や条件を組み合わせることで、複雑な判定ができます。

論理演算子で条件を組み合わせる

複数の条件を組み合わせることも可能です。

let day = "土曜日";
let weather = "晴れ";
let time = 14;

if (day === "日曜日" && weather === "晴れ") {
    console.log("ピクニックに最適です");
} else if (day === "土曜日" && time >= 12) {
    console.log("午後の外出がおすすめです");
} else if (weather === "雨" || weather === "雪") {
    console.log("室内で過ごしましょう");
} else {
    console.log("普通の日です");
}

&&（AND）や||（OR）を使って、より詳細な条件を作成できます。

文字列の比較もできます

文字列を使った条件分岐も頻繁に使われます。

let userInput = "開始";

if (userInput === "開始" || userInput === "start") {
    console.log("プログラムを開始します");
} else if (userInput === "終了" || userInput === "stop") {
    console.log("プログラムを終了します");
} else if (userInput === "ヘルプ" || userInput === "help") {
    console.log("ヘルプを表示します");
} else {
    console.log("無効なコマンドです");
}

注意点: 大文字小文字を区別するので気をつけてください。

実際のプログラムで使ってみよう

実際のプログラムでよく使われるelse if文の例を見てみましょう。

ユーザー権限の判定システム

function checkUserPermission(userRole) {
    if (userRole === "admin") {
        console.log("すべての機能にアクセス可能です");
        return "full";
    } else if (userRole === "moderator") {
        console.log("編集とユーザー管理が可能です");
        return "limited";
    } else if (userRole === "user") {
        console.log("閲覧と基本機能が利用可能です");
        return "basic";
    } else if (userRole === "guest") {
        console.log("閲覧のみ可能です");
        return "readonly";
    } else {
        console.log("無効な権限です");
        return "none";
    }
}

// 使用例
console.log(checkUserPermission("admin")); // "full"
console.log(checkUserPermission("user"));  // "basic"

関数の中でelse if文を使うことで、戻り値も条件に応じて変更できます。

料金計算システムを作ってみよう

function calculateShippingFee(weight, distance) {
    let baseFee = 500; // 基本料金
    let fee = baseFee;
    
    // 重量による追加料金
    if (weight <= 1) {
        fee += 0; // 追加料金なし
    } else if (weight <= 5) {
        fee += 200;
    } else if (weight <= 10) {
        fee += 500;
    } else {
        fee += 1000;
    }
    
    // 距離による追加料金
    if (distance <= 50) {
        fee += 0; // 追加料金なし
    } else if (distance <= 100) {
        fee += 300;
    } else if (distance <= 200) {
        fee += 600;
    } else {
        fee += 1000;
    }
    
    return fee;
}

// 使用例
console.log(calculateShippingFee(3, 80));  // 基本500 + 重量200 + 距離300 = 1000円
console.log(calculateShippingFee(12, 150)); // 基本500 + 重量1000 + 距離600 = 2100円

複数の要素を組み合わせた複雑な計算にもelse if文が活用できます。

時間帯による挨拶プログラム

function getGreeting() {
    let now = new Date();
    let hour = now.getHours();
    
    if (hour >= 5 && hour < 10) {
        return "おはようございます";
    } else if (hour >= 10 && hour < 14) {
        return "こんにちは";
    } else if (hour >= 14 && hour < 18) {
        return "こんにちは";
    } else if (hour >= 18 && hour < 22) {
        return "こんばんは";
    } else {
        return "お疲れさまです";
    }
}

// 使用例
console.log(getGreeting()); // 現在の時間に応じた挨拶が表示される

現在の時刻を取得して、時間帯に応じた処理を行うことができます。

よくある間違いと対処法

初心者の方がよくする間違いとその対処法を説明します。

間違い1: 条件の順序を間違える

let score = 95;

// 間違った例
if (score >= 60) {
    console.log("合格");
} else if (score >= 80) {
    console.log("良好"); // この条件は絶対に実行されない
} else if (score >= 90) {
    console.log("優秀"); // この条件も実行されない
}

// 正しい例
if (score >= 90) {
    console.log("優秀");
} else if (score >= 80) {
    console.log("良好");
} else if (score >= 60) {
    console.log("合格");
} else {
    console.log("不合格");
}

重要: 条件は厳しいものから緩いものの順番で書くことが大切です。

間違い2: 等価演算子の使い方

let userInput = "5";

// 間違った例
if (userInput == 5) {
    console.log("数字の5です");
} else if (userInput === "5") {
    console.log("文字列の5です"); // この条件は実行されない
}

// 正しい例
if (userInput === "5") {
    console.log("文字列の5です");
} else if (userInput === 5) {
    console.log("数字の5です");
}

// または型変換を明示的に行う
let numValue = Number(userInput);
if (numValue === 5) {
    console.log("数字として5です");
}

重要: 厳密等価演算子（===）と等価演算子（==）の違いを理解しましょう。

間違い3: 論理演算子の書き方

let age = 25;

// 間違った例
if (age >= 18 && <= 65) { // 構文エラー
    console.log("働ける年齢です");
}

// 正しい例
if (age >= 18 && age <= 65) {
    console.log("働ける年齢です");
}

// または
if (18 <= age && age <= 65) {
    console.log("働ける年齢です");
}

重要: 論理演算子を使う場合は、両側に完全な条件を書く必要があります。

switch文との使い分け

else if文と似た機能を持つswitch文との違いを理解しましょう。

else if文が良い場合

範囲や複雑な条件をチェックする場合です。

let temperature = 25;

// else if文が適している
if (temperature <= 0) {
    console.log("氷点下");
} else if (temperature <= 10) {
    console.log("寒い");
} else if (temperature <= 20) {
    console.log("涼しい");
} else if (temperature <= 30) {
    console.log("暖かい");
} else {
    console.log("暑い");
}

switch文が良い場合

特定の値との完全一致をチェックする場合です。

let dayOfWeek = "月曜日";

// switch文が適している
switch (dayOfWeek) {
    case "月曜日":
        console.log("週の始まりです");
        break;
    case "火曜日":
    case "水曜日":
    case "木曜日":
        console.log("平日です");
        break;
    case "金曜日":
        console.log("週末前です");
        break;
    case "土曜日":
    case "日曜日":
        console.log("週末です");
        break;
    default:
        console.log("無効な曜日です");
}

使い分けのコツ

判断基準をまとめました。

• 数値の範囲チェック → else if文
• 複雑な条件 → else if文
• 特定の値との一致 → switch文
• 文字列の完全一致 → switch文

適切な選択により、読みやすいコードが書けます。

パフォーマンスを意識しよう

効率的なelse if文を書くためのポイントを説明します。

頻度の高い条件を先に配置

よく該当する条件を上位に配置することで、処理速度を向上できます。

function categorizeUser(userType) {
    // 頻度の高い順に並べる
    if (userType === "general") {     // 80%のユーザー
        return "一般ユーザー";
    } else if (userType === "premium") { // 15%のユーザー
        return "プレミアムユーザー";
    } else if (userType === "admin") {   // 4%のユーザー
        return "管理者";
    } else if (userType === "system") {  // 1%のユーザー
        return "システム";
    } else {
        return "不明";
    }
}

統計データがある場合は、それに基づいて条件の順序を決めましょう。

早期リターンを活用する

関数内では、早期リターンを使って効率化できます。

function processOrder(order) {
    if (!order) {
        return "注文が存在しません";
    }
    
    if (order.status === "cancelled") {
        return "キャンセル済みの注文です";
    }
    
    if (order.status === "completed") {
        return "完了済みの注文です";
    }
    
    if (order.status === "processing") {
        return "処理中の注文です";
    }
    
    // メインの処理
    return "注文を処理します";
}

else if文の代わりに早期リターンを使うことで、ネストを減らせます。

実践練習にチャレンジしよう

学習した内容を定着させるための練習問題です。

練習問題1: BMI判定プログラム

function calculateBMI(weight, height) {
    let bmi = weight / (height * height);
    
    // ここにelse if文を使ったBMI判定を書いてください
    // 18.5未満: 低体重
    // 18.5以上25未満: 普通体重
    // 25以上30未満: 肥満（1度）
    // 30以上: 肥満（2度以上）
}

// テストケース
console.log(calculateBMI(60, 1.7)); // 普通体重
console.log(calculateBMI(80, 1.7)); // 肥満（1度）

解答例：

function calculateBMI(weight, height) {
    let bmi = weight / (height * height);
    
    if (bmi < 18.5) {
        return `BMI: ${bmi.toFixed(1)} - 低体重`;
    } else if (bmi < 25) {
        return `BMI: ${bmi.toFixed(1)} - 普通体重`;
    } else if (bmi < 30) {
        return `BMI: ${bmi.toFixed(1)} - 肥満（1度）`;
    } else {
        return `BMI: ${bmi.toFixed(1)} - 肥満（2度以上）`;
    }
}

練習問題2: 学割料金システム

function calculateTicketPrice(age, isStudent, isWeekend) {
    let basePrice = 1000;
    
    // ここにelse if文を使った料金計算を書いてください
    // 6歳未満: 無料
    // 6-11歳: 子供料金（半額）
    // 12-17歳（学生）: 学生料金（30%割引）
    // 18-64歳: 通常料金（週末は20%増し）
    // 65歳以上: シニア料金（40%割引）
}

解答例：

function calculateTicketPrice(age, isStudent, isWeekend) {
    let basePrice = 1000;
    
    if (age < 6) {
        return 0; // 無料
    } else if (age <= 11) {
        return basePrice * 0.5; // 子供料金
    } else if (age <= 17 && isStudent) {
        return basePrice * 0.7; // 学生料金
    } else if (age <= 64) {
        return isWeekend ? basePrice * 1.2 : basePrice; // 通常料金
    } else {
        return basePrice * 0.6; // シニア料金
    }
}

まとめ

JavaScript の else if 文について詳しく解説しました。

重要なポイント：

• 複数条件の順次判定: 上から順番に条件をチェック
• 条件の順序: 厳しい条件から緩い条件へ
• 実行の流れ: 最初に真になった条件で処理が確定
• 適切な使い分け: 範囲チェックならelse if、値の一致ならswitch

書き方のコツ：

• 条件の順序を正しく設定
• 厳密等価演算子（===）の使用
• 論理演算子の正しい記述
• 頻度の高い条件を上位に配置

実践での活用場面：

• ユーザー権限の判定
• 料金計算システム
• 時間帯による処理分岐
• データの分類処理

else if文は、複雑な条件分岐を簡潔に書くための重要な構文です。 適切に使いこなすことで、読みやすく保守しやすいコードが書けるようになります。

ぜひ今日から、else if文を使った条件分岐プログラムに挑戦してみてください！

練習を重ねることで、きっと自然に使えるようになりますよ。