閉じる

JavaScriptのif文をマスターする！条件分岐の書き方と効率的な判定方法

広告

JavaScriptを学習する過程で、必ずと言っていいほど最初に直面する重要な概念が「条件分岐」です。

プログラムは、特定の条件が満たされているかどうかによって、実行する処理を切り替える必要があります。

その中心的な役割を担うのが「if文」であり、これを使いこなすことで複雑なロジックをシンプルに構築できるようになります。

本記事では、JavaScriptにおけるif文の基礎から、2026年現在でも通用する効率的な判定方法やベストプラクティスまでを詳しく解説します。

目次 [ close ]
  1. if文の基本的な書き方
  2. 比較演算子の使い分けと注意点
    1. 厳密等価演算子（===）を推奨する理由
  3. 論理演算子による複数条件の結合
    1. AND演算子（&&）
    2. OR演算子（||）
    3. NOT演算子（!）
  4. TruthyとFalsyの概念を理解する
    1. Falsy（偽とみなされる主要な値）
  5. 効率的な条件分岐の書き方
    1. 三項演算子の活用
    2. 早期リターン（ガード句）のパターン
    3. Null合体演算子（??）とオプショナルチェイニング（?.）
  6. switch文との使い分け
  7. まとめ

if文の基本的な書き方

JavaScriptのif文は、指定した条件式が「true（真）」である場合にのみ、続くブロック内の処理を実行する仕組みです。

もっともシンプルな構造は、以下の通りです。

JavaScript
// 数値の比較を行う基本的なif文
const score = 85;

if (score >= 80) {
  // 条件が真の場合に実行される
  console.log("合格です！おめでとうございます。");
}
実行結果
合格です！おめでとうございます。

条件式の括弧 () の中には、結果として論理値（trueまたはfalse）を返す式を記述します。

波括弧 {} で囲まれた部分は「ブロック」と呼ばれ、条件が一致したときに実行したい処理をまとめます。

もし条件が一致しない場合に別の処理を行いたいときは、else を組み合わせます。

JavaScript
const score = 50;

if (score >= 80) {
  console.log("合格です。");
} else {
  // 条件が偽（false）の場合に実行される
  console.log("不合格です。次は頑張りましょう。");
}
実行結果
不合格です。次は頑張りましょう。

さらに、複数の条件を段階的に判定したい場合には、else if を使用します。

JavaScript
const score = 75;

if (score >= 90) {
  console.log("素晴らしい成績です！");
} else if (score >= 70) {
  console.log("良好な成績です。");
} else {
  console.log("さらなる努力が必要です。");
}

else if はいくつでも繋げることができますが、上から順番に判定され、最初に一致したブロックのみが実行されるという点に注意してください。

比較演算子の使い分けと注意点

条件式を記述する際には、「比較演算子」を正しく選ぶことが重要です。

JavaScriptにはいくつかの比較演算子がありますが、特に注意が必要なのが「等価演算子」の種類です。

演算子意味例
===厳密に等しい（型も一致）a === b
!==厳密に等しくないa !== b
==等しい（暗黙の型変換あり）a == b
>より大きいa > b
>=以上a >= b

厳密等価演算子（===）を推奨する理由

JavaScriptでは、==（等価演算子）を使うと、比較する値の型が異なる場合に自動的に型を変換して比較してしまいます。

例えば、数値の 1 と文字列の "1" を比較した場合、== では true になります。

JavaScript
console.log(1 == "1"); // true
console.log(1 === "1"); // false

意図しない挙動やバグを防ぐため、現代のJavaScript開発では原則として厳密等価演算子（===）を使用することが標準的なルールとなっています。

論理演算子による複数条件の結合

「AかつB」や「AまたはB」といった、より複雑な条件を作成したい場合には論理演算子を利用します。

AND演算子（&&）

すべての条件が true の場合にのみ、全体を true と判定します。

JavaScript
const age = 25;
const hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("車を運転することができます。");
}

OR演算子（||）

いずれか一つの条件が true であれば、全体を true と判定します。

JavaScript
const isWeekend = true;
const isHoliday = false;

if (isWeekend || isHoliday) {
  console.log("今日はお休みです。");
}

NOT演算子（!）

真偽値を反転させます。

true は false に、false は true になります。

JavaScript
const isUserLoggedIn = false;

if (!isUserLoggedIn) {
  console.log("ログインしてください。");
}

TruthyとFalsyの概念を理解する

JavaScriptのif文における条件式は、厳密な true や false 以外でも判定が行われます。

全ての値は「Truthy（真とみなされる値）」か「Falsy（偽とみなされる値）」のどちらかに分類されます。

Falsy（偽とみなされる主要な値）

  • false
  • 0 (数値のゼロ)
  • "" (空文字列)
  • null
  • undefined
  • NaN (Not a Number)

これら以外の値は、基本的にすべて Truthy として扱われます。

この性質を利用すると、変数が空でないかを確認する処理を簡潔に書くことができます。

JavaScript
const userName = "田中";

if (userName) {
  // userNameが空文字列でない（Truthy）ため実行される
  console.log(`こんにちは、${userName}さん。`);
}

ただし、数値の 0 なども false 扱いになるため、厳密に「値が存在するか」を判定したい場合には注意が必要です。

効率的な条件分岐の書き方

if文が増えすぎると、コードの可読性が低下し、メンテナンスが困難になります。

ここでは、コードをスッキリとさせるためのテクニックをいくつか紹介します。

三項演算子の活用

単純な値の代入など、2択の分岐であれば「三項演算子」を使うことで1行にまとめることが可能です。

JavaScript
const age = 20;
const status = age >= 18 ? "成人" : "未成年";
console.log(status);

構文は 条件式 ? 真の場合の値 : 偽の場合の値 となります。

しかし、複雑な処理を三項演算子に詰め込むと逆に見づらくなるため、使いどころを見極めることが肝心です。

早期リターン（ガード句）のパターン

ネスト（入れ子）が深いif文は、読み手に負担をかけます。

関数内で条件判定を行う際は、エラーや除外すべき条件を先に判定して、処理を終了させる手法が推奨されます。

JavaScript
function processPayment(amount) {
  // 早期リターン：条件を満たさない場合はすぐに抜ける
  if (amount <= 0) {
    console.log("無効な金額です。");
    return;
  }

  // メインの処理
  console.log(`${amount}円の決済を処理します。`);
}

これにより、本来実行したいメインの処理がインデント（字下げ）されず、コードの見通しが劇的に良くなります。

Null合体演算子（??）とオプショナルチェイニング（?.）

2020年以降のモダンなJavaScriptでは、if文を使わずに安全に値を参照する機能が充実しています。

例えば、プロパティが存在するかどうかをチェックする際、if でネストを作る必要はありません。

JavaScript
const user = { profile: { name: "佐藤" } };

// オプショナルチェイニング
const name = user?.profile?.name; 
console.log(name); // "佐藤"

// Null合体演算子
const nickName = user.nickName ?? "ゲスト";
console.log(nickName); // nickNameがnullまたはundefinedなら"ゲスト"を表示

switch文との使い分け

判定対象がひとつの変数であり、その値によって多くの分岐が発生する場合は switch 文の方が適していることがあります。

JavaScript
const fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("りんごです。");
    break;
  case "banana":
    console.log("バナナです。");
    break;
  default:
    console.log("その他の果物です。");
}

if (fruit === "apple") ... else if (fruit === "banana") と書き続けるよりも、構造が明確になります。

ただし、範囲指定（例：score > 80）のような複雑な比較を行う場合は、依然として if文の方が柔軟で強力 です。

まとめ

JavaScriptにおけるif文は、単に「もし〜なら」を記述するだけでなく、論理演算子やTruthy/Falsyの理解、さらには最新の構文と組み合わせることで真価を発揮します。

基本的な構文をマスターした後は、いかにネストを浅くし、読みやすいコードを書くかという「質」の向上を目指しましょう。

今回解説した比較演算子の厳密な使い分けや、早期リターンの考え方は、実務レベルのプログラミングにおいても極めて重要です。

これらを日々のコーディングに取り入れることで、バグの少ない、メンテナンス性の高いJavaScriptプログラムを記述できるようになるはずです。

まずは小さな条件分岐から意識して、クリーンなコードを目指していきましょう。

URLをコピーしました！