【初心者向け】JavaScript if文の使い方 - 条件分岐を10分でマスター

JavaScriptで「もし〜なら」という条件分岐を使いたいと思ったことありませんか？

「天気が雨なら傘を持つ」 「年齢が18歳以上なら成人として扱う」

そんな条件に応じて違う処理をしたい場面は、プログラミングでとても多いです。 でも大丈夫です！

この記事では、JavaScript初心者向けにif文の使い方を10分でマスターできるよう詳しく解説します。 基本的な書き方から実践的な応用まで、サンプルコードと一緒に理解していきましょう。

きっと「こんなに簡単だったんだ！」と感じられるはずですよ。

if文って何？基本を理解しよう

条件分岐の役割

if文は、「もし〜なら○○する」という条件に基づいて処理を分岐させる仕組みです。

簡単に言うと、状況に応じて違う行動をとる機能です。 日常生活でも、私たちは常に条件判断をしていますよね。

イメージとしては、信号機のような感じです。

// 日常生活の条件分岐をJavaScriptで表現
let weather = "雨";

if (weather === "雨") {
    console.log("傘を持って出かけます");
}

この例では、天気が「雨」という条件が満たされた場合に、傘を持つという処理が実行されます。 weather === "雨" が条件で、波括弧 {} の中が実行される処理です。

条件分岐を使うことで、プログラムが状況に応じて賢く動作するようになります。

if文の基本構文を覚えよう

JavaScriptのif文は以下の構文で書きます。

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

重要なポイントを確認しましょう。

• 条件は括弧 () で囲む
• 実行する処理は波括弧 {} で囲む
• 条件が真（true）の場合のみ処理が実行される

実際の例を見てみましょう。

let age = 20;

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

この例では、age >= 18（20は18以上）という条件が真なので、「成人です」が出力されます。 数値の比較も、文字列の比較も同じように書けますね。

else文で「そうでなければ」を表現しよう

else文の基本

if文だけでは「条件が真の場合」しか処理できません。 else文を使うことで「条件が偽の場合」の処理も書けるようになります。

if (条件) {
    // 条件が真の場合の処理
} else {
    // 条件が偽の場合の処理
}

これにより、すべての場合に対応できるようになります。

実践的な例を見てみよう

年齢による分類を例に確認しましょう。

let age = 16;

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

// 実行結果: 「未成年です」が出力される

この例では、16歳は18歳未満なので、else文の処理が実行されます。 「成人です」と「未成年です」のどちらか必ず一方が実行されますね。

天気による服装選択の例も見てみましょう。

let weather = "雨";

if (weather === "晴れ") {
    console.log("薄着で出かけます");
} else {
    console.log("雨具を持って出かけます");
}

// 実行結果: 「雨具を持って出かけます」が出力される

else文を使うことで、想定されるすべての状況に対応できるプログラムが作れます。

else if文で複数条件を処理しよう

複数の条件分岐が必要な場面

現実的な問題では、2つ以上の条件を判断する必要があります。 そんな時に使うのがelse if文です。

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

複数の選択肢から適切なものを選ぶ際に便利ですね。

成績による評価システム

点数による成績評価を例に見てみましょう。

let score = 85;

if (score >= 90) {
    console.log("優秀です！");
} else if (score >= 80) {
    console.log("良好です");
} else if (score >= 70) {
    console.log("普通です");
} else {
    console.log("もう少し頑張りましょう");
}

// 実行結果: 「良好です」が出力される

この例では、85点は80点以上90点未満なので、「良好です」が出力されます。 条件は上から順番にチェックされるため、最初に満たされた条件の処理が実行されます。

時間帯による挨拶の例も確認してみましょう。

let hour = 14;

if (hour < 12) {
    console.log("おはようございます");
} else if (hour < 18) {
    console.log("こんにちは");
} else {
    console.log("こんばんは");
}

// 実行結果: 「こんにちは」が出力される

14時は12時以降18時未満なので、「こんにちは」が表示されます。 else if文を使うことで、時間帯に応じた適切な挨拶ができますね。

比較演算子をマスターしよう

基本的な比較演算子

if文では様々な比較演算子を使用できます。

代表的な比較演算子を確認しましょう。

これらを使い分けることで、正確な条件判断ができます。

実際の使用例を見てみよう

温度による判断の例です。

let temperature = 25;

if (temperature > 30) {
    console.log("暑いです");
} else if (temperature < 10) {
    console.log("寒いです");
} else {
    console.log("ちょうど良い気温です");
}

// 実行結果: 「ちょうど良い気温です」が出力される

25度は30度より小さく、10度より大きいので、else文が実行されます。 数値の範囲を判定する際によく使われるパターンですね。

文字列の比較例も確認しましょう。

let status = "完了";

if (status === "完了") {
    console.log("処理が完了しました");
} else if (status === "進行中") {
    console.log("処理を実行中です");
} else {
    console.log("処理が開始されていません");
}

// 実行結果: 「処理が完了しました」が出力される

文字列の比較には ===（厳密等価）を使うことで、予期しない結果を防げます。

論理演算子で複雑な条件を表現しよう

論理演算子の基本

より複雑な条件を表現するために、論理演算子を使用します。

主要な論理演算子を確認しましょう。

これらを組み合わせることで、より柔軟な条件設定が可能になります。

AND演算子（&&）の使用例

両方の条件が真の場合に処理を実行します。

let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
    console.log("車を運転できます");
} else {
    console.log("車を運転できません");
}

// 実行結果: 「車を運転できます」が出力される

この例では、年齢が18歳以上かつ免許を持っている場合に運転可能と判定されます。 両方の条件を満たす必要があるのがAND演算子の特徴です。

OR演算子（||）の使用例

どちらか一方の条件が真の場合に処理を実行します。

let weather = "雨";
let haveUmbrella = false;

if (weather === "晴れ" || haveUmbrella) {
    console.log("外出できます");
} else {
    console.log("外出を控えましょう");
}

// 実行結果: 「外出を控えましょう」が出力される

この例では、天気が晴れまたは傘を持っている場合に外出可能と判定されます。 どちらか一方でも条件を満たせば良いのがOR演算子の特徴です。

NOT演算子（!）の使用例

条件を反転させる場合に使用します。

let isLoggedIn = false;

if (!isLoggedIn) {
    console.log("ログインしてください");
} else {
    console.log("ようこそ！");
}

// 実行結果: 「ログインしてください」が出力される

!isLoggedIn は「ログインしていない場合」を意味します。 NOT演算子を使うことで、条件の否定を簡潔に表現できますね。

実践的な活用例で理解を深めよう

ユーザー認証システム

実際のWebアプリケーションでよく使われる認証システムの例です。

let username = "admin";
let password = "password123";
let isActive = true;

if (username === "admin" && password === "password123" && isActive) {
    console.log("ログイン成功");
    console.log("管理画面に移動します");
} else if (username === "admin" && password === "password123" && !isActive) {
    console.log("アカウントが無効です");
} else {
    console.log("ユーザー名またはパスワードが間違っています");
}

この例では、複数の条件を組み合わせて認証を行っています。 ユーザー名とパスワードの確認に加えて、アカウントの有効性もチェックしています。

実際のシステムでは、このような複合的な条件判断が頻繁に使われます。

ショッピングカートの計算

商品価格と割引の適用を判断するシステムです。

let totalPrice = 15000;
let isMember = true;
let couponCode = "SAVE10";

if (isMember && totalPrice >= 10000) {
    console.log("会員割引10%適用");
    totalPrice *= 0.9;
} else if (couponCode === "SAVE10") {
    console.log("クーポン割引5%適用");
    totalPrice *= 0.95;
}

console.log(`最終価格: ${totalPrice}円`);
// 実行結果: 会員割引10%適用、最終価格: 13500円

会員かつ10,000円以上の場合は会員割引が適用されます。 そうでなければクーポン割引が適用される仕組みです。

このように、優先順位を考慮した条件分岐も実装できますね。

フォームバリデーション

入力フォームの検証処理の例です。

let email = "user@example.com";
let age = 25;
let agreedToTerms = true;

if (email.includes("@") && age >= 18 && agreedToTerms) {
    console.log("登録完了");
} else {
    if (!email.includes("@")) {
        console.log("正しいメールアドレスを入力してください");
    }
    if (age < 18) {
        console.log("18歳以上の方のみ登録可能です");
    }
    if (!agreedToTerms) {
        console.log("利用規約に同意してください");
    }
}

このシステムでは、すべての条件を満たす場合のみ登録が完了します。 条件を満たさない場合は、具体的なエラーメッセージを表示しています。

ユーザーにとって分かりやすいエラー表示ができるのがポイントです。

よくある間違いと対策を覚えよう

等価演算子の使い分け

初心者がよく間違えるのが、等価演算子の使い方です。

// 注意が必要な例
let number = "10";

if (number == 10) {
    console.log("同じ値です"); // 実行される（型変換が発生）
}

if (number === 10) {
    console.log("同じ値です"); // 実行されない
}

== は型変換を行って比較しますが、=== は型も含めて厳密に比較します。 予期しない結果を防ぐため、===（厳密等価）を使うことをおすすめします。

条件の順序に注意しよう

条件の順序を間違えると、期待した結果にならない場合があります。

// 間違った順序
let score = 95;

if (score >= 70) {
    console.log("普通です"); // この条件が先に満たされる
} else if (score >= 90) {
    console.log("優秀です"); // この条件は実行されない
}

// 正しい順序
if (score >= 90) {
    console.log("優秀です"); // 正しく実行される
} else if (score >= 70) {
    console.log("普通です");
}

上の間違った例では、95点でも「普通です」と表示されてしまいます。 条件は厳しいものから順に書くことが重要です。

波括弧の使用を推奨

処理が一行の場合でも、波括弧を使用することを推奨します。

// 省略した書き方（推奨されない）
if (age >= 18) console.log("成人です");

// 推奨される書き方
if (age >= 18) {
    console.log("成人です");
}

波括弧を常に使用することで、コードの可読性が向上します。 後から処理を追加する際にも、間違いが起きにくくなりますね。

まとめ：if文をマスターして条件分岐を自在に操ろう

JavaScriptのif文について、基本から実践的な応用まで詳しく解説しました。

重要なポイントをおさらいしましょう。

• if文は「もし〜なら」という条件分岐を実現する
• else文で「そうでなければ」の処理を追加できる
• else if文で複数の条件を効率的に処理できる
• 比較演算子と論理演算子で柔軟な条件設定が可能

実践のコツも忘れずに。

• ===（厳密等価）を使って正確な比較を行う
• 条件は厳しいものから順に書く
• 波括弧を省略せずに可読性を保つ
• 複数の条件を組み合わせて実用的なシステムを構築

if文はプログラミングの基礎でありながら、とても重要な機能です。 条件分岐を適切に使えるようになれば、より実用的で賢いプログラムが作れるようになります。

今回学んだ内容を実際にコードで試してみて、理解を深めてください。 様々な条件パターンを練習することで、きっと「こんなに便利だったんだ！」と実感できるはずです。

ぜひ今日から、if文を活用してより良いJavaScriptプログラムを作ってみませんか？