【JavaScript】if 文の条件分岐・比較演算子の解説

2025年3月27日 最終更新日時 : 2025年3月27日 ar

JavaScriptは、動的なウェブサイトやアプリケーションを作る上で欠かせないプログラミング言語です。中でも「if」文は、条件に応じた処理を行うための基本構文として、多くの開発者に利用されています。この記事では、「if」文の基本から応用まで、豊富なサンプルコードと実際のブラウザ上での動作例を通して、初心者から上級者まで役立つ知識を提供します。

演算子説明使用例結果例
==等価（値の比較。型変換あり）5 == "5"true
===厳密な等価（値と型の比較）5 === "5"false（型が一致しない）
!=非等価（値の比較。型変換あり）5 != "5"false
!==厳密な非等価（値と型の比較）5 !== "5"true
>大なり（左辺が右辺より大きいかどうか）10 > 5true
<小なり（左辺が右辺より小さいかどうか）5 < 10true
>=大なりイコール（左辺が右辺以上かどうか）10 >= 10true
<=小なりイコール（左辺が右辺以下かどうか）5 <= 10true
&&AND：全ての条件が真の場合にのみ、全体が真となります。式1 && 式2式１と式２ の両方がtureなら true
||OR：いずれかの条件が真であれば、全体が真となります。式1 || 式2式１か 式２ がtureなら true
!NOT：条件の真偽を反転させます。!isActiveisActive が false の場合に true
typeof変数の型を確認する。typeof a === "string"a が文字列なら true

もくじ

1. JavaScriptにおける条件分岐

1.1. if文の基本構文

JavaScriptにおけるif文の基本形は以下のようになります。

if (条件) {
  // 条件が真(true)の場合に実行されるコード
}

上記のコードは、条件がtrueであるときに中括弧内のコードを実行します。例えば、数値が10より大きいかどうかを判定するコードは次のようになります。

let num = 15;
if (num > 10) {
  console.log("numは10より大きいです。");
}

上記の例では、変数numが10より大きいので、コンソールに「numは10より大きいです。」と出力されます。

1.2 基本的なif-elseの書き方

「if」文に続いて「else」を使用することで、条件がfalseの場合に実行する処理を記述できます。これにより、2通りの分岐が可能となります。

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

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

サンプルコード：数値の大小を判定する

let score = 75;

if (score >= 60) {
  console.log("合格です！");
} else {
  console.log("残念ながら不合格です。");
}

上記のコードでは、scoreが60以上の場合に「合格です！」と表示し、そうでなければ「残念ながら不合格です。」と表示します。これにより、条件に応じた処理の分岐がシンプルに記述できます。

1.3 if-else if-elseの基本形

場合によっては、単一の条件ではなく、複数の条件に応じた分岐が必要になることがあります。そんなときは、「if-else if-else」構文を利用します。

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

サンプルコード：テストの評価を判定する

let testScore = 85;

if (testScore >= 90) {
  console.log("評価: 優");
} else if (testScore >= 75) {
  console.log("評価: 良");
} else if (testScore >= 60) {
  console.log("評価: 可");
} else {
  console.log("評価: 不可");
}

この例では、スコアに応じて「優」「良」「可」「不可」と評価を変えています。条件が上から順に評価されるため、順序を正しく設定することが重要です。

2. 演算子

2.1. 算術演算子

算術演算子は、数値の計算を行うために使用され、計算結果を条件として利用できます。

let a = 5;
let b = 3;

// aとbの和が10より大きい場合に処理を実行
if (a + b > 10) {
  console.log("aとbの和は10を超えています。");
} else {
  console.log("aとbの和は10以下です。");
}

2.2. 型演算子（typeof）

typeof 演算子は、変数の型を確認するために使用され、条件式で型チェックを行う際に役立ちます。

let value = "Hello";

// valueが文字列型かどうかをチェック
if (typeof value === "string") {
  console.log("valueは文字列型です。");
} else {
  console.log("valueは文字列型ではありません。");
}

2.3. オブジェクト関連演算子（instanceof, in）

  • instanceof：オブジェクトが特定のコンストラクタ関数のインスタンスかどうかを判定します。
let date = new Date();

if (date instanceof Date) {
  console.log("dateはDateオブジェクトです。");
} else {
  console.log("dateはDateオブジェクトではありません。");
}
  • in：指定したプロパティがオブジェクトに存在するかを確認します。
let obj = { name: "Alice", age: 25 };

if ("name" in obj) {
  console.log("objには'name'プロパティが存在します。");
} else {
  console.log("objには'name'プロパティが存在しません。");
}

2.4. ビット演算子

ビット演算子は、ビット単位での演算を行います。if文内で条件を作成する際に、特定のフラグや状態をチェックするために利用することがあります。

const FLAG_A = 0b0010; // 2
const FLAG_B = 0b0100; // 4
let flags = 0b0110;     // 6

// FLAG_A または FLAG_B が立っているかを確認
if (flags & (FLAG_A | FLAG_B)) {
  console.log("FLAG_A または FLAG_B のいずれかが設定されています。");
} else {
  console.log("FLAG_A と FLAG_B は設定されていません。");
}

3. ネストしたif文の利用法

時には、条件分岐の中にさらに条件分岐を含める必要がある場合があります。これを「ネストしたif文」と呼びます。ネストを上手く使うことで、より複雑なロジックをシンプルに整理できますが、ネストが深くなりすぎるとコードの可読性が低下するため注意が必要です。

3.1 ネストしたif文の基本例

let age = 25;
let hasLicense = true;

if (age >= 18) {
  if (hasLicense) {
    console.log("運転できます。");
  } else {
    console.log("運転免許が必要です。");
  }
} else {
  console.log("未成年のため運転できません。");
}

この例では、年齢が18歳以上かどうかを最初に確認し、その後運転免許の有無に応じて更に分岐しています。こうすることで、ユーザーの状態に応じた細かい処理を実現しています。

4. 条件式の評価と真偽値

JavaScriptのif文は、条件式の評価結果が真（true）か偽（false）かによって処理を分岐します。ここでは、真偽値の取り扱いと、暗黙の型変換についても説明します。

4.1 真偽値とは？

JavaScriptでは、条件式が真（true）または偽（false）である必要があります。しかし、実際のコードでは数値や文字列なども条件として利用され、JavaScriptはそれらを暗黙的に真偽値に変換します。
たとえば、0は偽、1は真、空文字列（""）は偽、非空の文字列は真とみなされます。

サンプルコード：暗黙の型変換の例

if ("Hello") {
  console.log("非空の文字列は真と評価されます。");
}

if (0) {
  console.log("0は偽と評価されるので、この行は実行されません。");
}

この例からわかるように、JavaScriptは条件式において「truthy」「falsy」と呼ばれる評価基準を用いて、暗黙の型変換を行います。
主なfalsyな値としては、false、0、""、null、undefined、NaNなどが挙げられます。

5. 三項演算子による条件分岐の簡潔な記述

if文を使わずに、三項演算子（条件演算子）を使うことで、簡潔な条件分岐が可能です。これは短い条件判断や値の代入に非常に有用です。

5.1 三項演算子の基本形

サンプルコード：数値の判定を三項演算子で実装

let numValue = 7;
let result = numValue % 2 === 0 ? "偶数です。" : "奇数です。";
console.log(result);

上記のコードは、numValueが偶数か奇数かを一行で判定し、その結果をresultに代入しています。短く記述できるため、簡単な条件判断には非常に便利です。

6. 複雑な条件を扱う論理演算子

if文では、複数の条件を組み合わせるために論理演算子を利用することができます。
ここでは主に、論理積（&&）、論理和（||）、否定（!）について解説します。

6.1 論理積（AND：&&）の使い方

論理積は、すべての条件が真である場合に全体が真となります。

let a = 5;
let b = 10;

if (a > 0 && b > 0) {
  console.log("aもbも正の数です。");
}

この例では、aもbも正の数であるため、条件が成立します。

6.2 論理和（OR: ||）の使い方

論理和は、いずれか一方の条件が真であれば全体が真となります。

let username = "";
let defaultName = "ゲスト";

let displayName = username || defaultName;
console.log("こんにちは、" + displayName + "さん！");

この例では、usernameが空文字列（falsyな値）であれば、defaultNameが代わりに利用されます。
また、以下のようにif文で使用することも可能です。

if (a > 0 || b > 0) {
  console.log("aまたはbのどちらかは正の数です。");
}

6.3 否定演算子（NOT: !）の使い方

否定演算子は、条件の真偽を反転させます。

let isAvailable = false;

if (!isAvailable) {
  console.log("現在、利用できません。");
}

この例では、isAvailableがfalseであるため、否定演算子により条件がtrueとなり、メッセージが表示されます。

7. 実践的なif文の使用例：フォームバリデーション

ウェブアプリケーションでは、ユーザー入力の検証が必須です。ここでは、if文を活用した簡単なフォームバリデーションの例を紹介します。

7.1 HTMLとJavaScriptによるバリデーション

まず、シンプルなHTMLフォームを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォームバリデーションの例</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <h1>ユーザー登録フォーム</h1>
  <form id="registrationForm">
    <label for="username">ユーザー名:</label>
    <input type="text" id="username" name="username" required>
    <br><br>
    <label for="age">年齢:</label>
    <input type="number" id="age" name="age" required>
    <br><br>
    <button type="submit">登録</button>
  </form>
  <div id="message"></div>

  <script>
    document.getElementById("registrationForm").addEventListener("submit", function(event) {
      event.preventDefault();

      let username = document.getElementById("username").value.trim();
      let age = parseInt(document.getElementById("age").value, 10);
      let message = "";

      if (username === "") {
        message = "<p class='error'>ユーザー名を入力してください。</p>";
      } else if (isNaN(age)) {
        message = "<p class='error'>正しい年齢を入力してください。</p>";
      } else if (age < 18) {
        message = "<p class='error'>18歳未満は登録できません。</p>";
      } else {
        message = "<p>登録が完了しました！</p>";
      }

      document.getElementById("message").innerHTML = message;
    });
  </script>
</body>
</html>

このコードは、ユーザー登録フォームに対して入力されたユーザー名と年齢をチェックします。

  1. ユーザー名が空の場合はエラーメッセージを表示。
  2. 年齢が数値でない場合はエラー。
  3. 18歳未満の場合は登録を拒否。
  4. すべての条件が満たされれば登録完了のメッセージを表示。

このように、if文を用いることでユーザーの入力に柔軟に対応できる仕組みが実現できます。

8. if文とswitch文の比較

条件分岐にはif文以外にも、状況によってはswitch文を利用する方法もあります。ここでは、if文とswitch文の使い分けについて解説します。

8.1 switch文の基本構文

switch (式) {
  case 値1:
    // 式が値1と一致する場合の処理
    break;
  case 値2:
    // 式が値2と一致する場合の処理
    break;
  default:
    // どのcaseにも一致しない場合の処理
    break;
}

サンプルコード：曜日に応じたメッセージの表示

let day = new Date().getDay();
let dayName = "";

switch (day) {
  case 0:
    dayName = "日曜日";
    break;
  case 1:
    dayName = "月曜日";
    break;
  case 2:
    dayName = "火曜日";
    break;
  case 3:
    dayName = "水曜日";
    break;
  case 4:
    dayName = "木曜日";
    break;
  case 5:
    dayName = "金曜日";
    break;
  case 6:
    dayName = "土曜日";
    break;
  default:
    dayName = "不明な曜日";
    break;
}

console.log("今日は" + dayName + "です。");

この例は、現在の曜日に応じて曜日名を表示するものです。
if文との違いとして、switch文は定数との比較がメインの場合に、コードがスッキリする利点があります。ただし、複雑な条件式にはif文のほうが柔軟に対応できる点を覚えておきましょう。

9. 複雑なロジックに対応するための工夫

実際のアプリケーション開発では、単純な条件分岐だけでなく、複雑なロジックをif文で処理する必要が出てきます。ここでは、可読性と保守性を意識したコーディングの工夫について解説します。

9.1 早期リターン（ガード節）の利用

複雑な条件分岐において、条件が成立しない場合に早期に処理を終了する「ガード節」を使うと、コードのネストを浅く保つことができます。

function processData(data) {
  if (!data) {
    console.log("データが存在しません。");
    return;
  }
  
  // 複雑な処理
  if (data.error) {
    console.log("エラーが発生しました。");
    return;
  }

  // 正常な処理の続き
  console.log("データを処理中...");
  // …さらに処理
}

このように、条件が成立しない場合に早めに処理を打ち切ることで、以降の処理がシンプルに見えるようになります。

9.2 関数分割によるロジックの整理

if文が複雑になる場合、処理を関数に分割することで、各関数が単一の責任を持つようにし、コード全体の可読性と保守性を向上させることができます。

function validateInput(username, age) {
  if (username === "") {
    return "ユーザー名を入力してください。";
  }
  if (isNaN(age)) {
    return "正しい年齢を入力してください。";
  }
  if (age < 18) {
    return "18歳未満は登録できません。";
  }
  return "";
}

function registerUser(username, age) {
  let errorMessage = validateInput(username, age);
  if (errorMessage) {
    console.log(errorMessage);
    return;
  }
  console.log("登録が完了しました！");
}

上記の例では、入力の検証を専用の関数に分けることで、registerUser関数自体がシンプルになり、ロジックの再利用もしやすくなっています。

10. if文におけるよくある落とし穴と対策

JavaScriptのif文はシンプルですが、いくつかの注意点や落とし穴も存在します。ここでは、よくある問題点とその対策について説明します。

10.1 型の違いによる予期しない動作

JavaScriptは暗黙の型変換を行うため、場合によっては予期せぬ動作が発生することがあります。
たとえば、以下のコードでは、数値と文字列の比較により意図しない結果が得られることがあります。

let value = "5";
if (value == 5) {
  console.log("等しいと評価されます。");
}

上記は==演算子を使用しているため、型変換が起こり「等しい」と判断されます。
このようなケースでは、厳密な比較を行うために===演算子を使うことが推奨されます。

10.2 ネストが深くなることによる可読性の低下

条件分岐が多重にネストすると、どの条件に対応しているのかが分かりづらくなります。
対策としては、ガード節の利用や関数分割、論理演算子をうまく活用することで、コードの階層を浅く保つ工夫が必要です。

10.3 複雑な条件の管理

if文の条件が複雑になると、どの条件が真の場合にどの処理が実行されるのかを把握するのが難しくなります。
そのため、条件を変数に代入して意味のある名前をつける、またはコメントで補足説明を入れるといった対策が有効です。

let isAdult = age >= 18;
let hasValidLicense = licenseStatus === "valid";

if (isAdult && hasValidLicense) {
  console.log("運転可能です。");
} else {
  console.log("条件を満たしていません。");
}

このように、条件そのものに名前を付けることで、コードの意味が明確になり、将来的なメンテナンスが容易になります。

11. 最新のJavaScriptにおけるif文の活用事例

現代のJavaScript開発では、ES6以降の新しい構文や機能を利用した記述法も登場しています。ここでは、最新の記法を取り入れたif文の活用事例をいくつか紹介します。

11.1 アロー関数との組み合わせ

アロー関数は短い記述で関数を定義できるため、if文と組み合わせることでコードが非常にシンプルになります。

const checkEligibility = (age) => {
  if (age >= 18) {
    return "登録可能です。";
  } else {
    return "18歳未満は登録できません。";
  }
};

console.log(checkEligibility(20)); // 「登録可能です。」

11.2 テンプレートリテラルと組み合わせた出力

テンプレートリテラルを使用することで、if文の結果を簡潔に文字列として出力することができます。

const score = 92;
const message = score >= 90 ? `素晴らしい！あなたのスコアは${score}点です。` : `頑張りました！あなたのスコアは${score}点です。`;
console.log(message);

上記のように、三項演算子とテンプレートリテラルを組み合わせると、コードの可読性が向上し、動的な文字列生成が容易になります。

12. 実例で学ぶif文の応用

ここでは、実際のアプリケーション開発シーンを想定したif文の応用例をいくつか紹介します。これらの例は、実務においても非常に役立つテクニックばかりです。

12.1 ユーザー認証のシナリオ

ユーザー認証システムでは、ユーザーの入力情報に応じた複数の分岐処理が必要です。以下は、パスワードの正誤チェックやアカウントの有効性をif文で判定する例です。

function authenticateUser(username, password) {
  // 仮のユーザーデータ（実際にはサーバー側で管理される）
  const userData = {
    username: "sampleUser",
    password: "securePass123",
    isActive: true
  };

  if (username !== userData.username) {
    return "ユーザー名が正しくありません。";
  } else if (password !== userData.password) {
    return "パスワードが正しくありません。";
  } else if (!userData.isActive) {
    return "アカウントが無効化されています。";
  } else {
    return "認証成功！ようこそ、" + username + "さん。";
  }
}

console.log(authenticateUser("sampleUser", "securePass123"));

このコードでは、ユーザー名、パスワード、アカウントの状態といった複数の条件をif-else if-else文で判定し、適切なメッセージを返しています。

12.2 商品の在庫管理システム

ECサイトなどでは、商品の在庫状況に応じてユーザーに対する案内を変える必要があります。if文を使った在庫管理の例を示します。

function checkInventory(stock) {
  if (stock > 10) {
    return "在庫豊富です。安心してご購入いただけます。";
  } else if (stock > 0) {
    return "在庫僅少。お早めにご購入ください。";
  } else {
    return "申し訳ありませんが、現在在庫切れです。";
  }
}

console.log(checkInventory(5));

この例では、在庫数に応じて異なるメッセージを表示し、ユーザーの購買意欲を刺激する戦略を実現しています。

13. if文を用いたエラーハンドリングとデバッグ

実際の開発では、予期しないエラーが発生することは避けられません。if文を使って、エラーが発生した場合の適切な処理を行い、デバッグしやすいコードを書くことも重要です。

13.1 エラーチェックの基本

function processResponse(response) {
  if (!response) {
    console.error("エラー: レスポンスが存在しません。");
    return;
  }

  if (response.error) {
    console.error("エラー発生: " + response.error);
    return;
  }

  console.log("レスポンスの処理が成功しました。");
}

この例では、レスポンスオブジェクトの存在やエラーの有無をif文でチェックし、エラーが発生した場合は適切なエラーメッセージをコンソールに出力しています。

13.2 try-catchとif文の併用

時には、try-catch構文とif文を組み合わせることで、より堅牢なエラーハンドリングが可能となります。

function parseJSON(jsonString) {
  try {
    let data = JSON.parse(jsonString);
    if (!data) {
      throw new Error("パースできませんでした。");
    }
    return data;
  } catch (error) {
    console.error("JSONパースエラー:", error.message);
    return null;
  }
}

let resultData = parseJSON('{"key": "value"}');

このように、エラーが発生する可能性のある処理の前後にif文でのチェックを行うことで、より安全なコードを書くことができます。

まとめ

本記事では、JavaScriptのif文の基本構文から、if-else、if-else if-else、ネスト、論理演算子、三項演算子、そして実際の開発シーンにおける応用例まで、幅広く解説してきました。
各サンプルコードは、ブラウザ上で実際に試してみることができ、コードの動作を確認することで理解が深まるはずです。

if文は、まさにプログラミングの基本中の基本でありながら、その応用範囲は無限大です。
初心者が最初に学ぶべき分岐処理として、また熟練の開発者が洗練されたコードを書くための重要なツールとして、今後も進化し続けるJavaScriptの世界において、あなたの強力な武器となるはずです。

最後に、あなたがコードを書くその先に、無限の可能性と新たな発見が待っていることを心から願っています。

カテゴリー
Javascript
タグ
前の記事
【JavaScript】ゲームの戦闘っぽいデモ
2025年3月26日
次の記事
【JavaScript】でハンドジェスチャーを認識する
2025年3月28日