JavaScriptのif文とは？条件分岐の書き方と使い分けを初心者向けに徹底解説

Webサイトで「ログインしている時だけログアウトボタンを出す」「テストの点数によって合格・不合格のメッセージを変える」といった動き、これらはすべて 「if文（条件分岐）」 という仕組みで作られています。

もしif文がなければ、プログラムは常に決まった動きしかできず、今の便利なWebアプリやゲームは存在できませんでした。

本記事では、JavaScriptのif文の基本構文から、複数の条件を組み合わせる応用、そして現場で「デキる」と思われるための「綺麗で読みやすい条件分岐」の書き方まで徹底解説します。

if文とは？「プログラムの分かれ道」を作る仕組み
1. 日常生活で例えてみる
2. 真偽値（true / false）との関係
if文の基本構文：もっともシンプルな形
1. 具体的なコード例
2. {}（波括弧）の役割
「そうでなければ」を追加する：if … else文
1. elseの書き方
2. AかBか、必ずどちらかが実行される
複数の条件を並べる：if … else if文
1. else ifの実践例
2. 【重要】上から順番に判定される
条件をより強力にする「比較演算子」と「論理演算子」
1. よく使う比較演算子
2. 複数の条件を繋ぐ論理演算子
実務で嫌われる「ネストの深すぎるコード」とは？
1. 悪いコードの例（ネストが深い）
2. 解決策：ガード句
発展：if文をスッキリさせる「三項演算子」と「switch文」
1. 三項演算子
2. switch文
実践演習：時間帯による挨拶の自動切り替え
信頼できる学習ステップ：次は何を学ぶべき？
まとめ：if文はプログラムの「心臓部」

if文とは？「プログラムの分かれ道」を作る仕組み

if文を一言で言えば、「特定の条件が満たされている時だけ、その中身を実行する」という命令です。

日常生活で例えてみる

私たちは無意識のうちに毎日「条件分岐」を行っています。

もし雨が降っているなら、傘を持っていく。
もしお腹が空いているなら、ご飯を食べる。
もし信号が赤なら、止まる。

これと同じことをプログラムにさせるのがif文の役割です。

真偽値（true / false）との関係

if文を理解する上で欠かせないのが「真偽値（Boolean）」です。

true（真）: 条件が合っている
false（偽）: 条件が合っていない

if文のカッコ ( ) の中には、必ずこの true か false を導き出す式を書きます。

if文の基本構文：もっともシンプルな形

まずは一番基本となる、1つの条件による分岐を見てみましょう。

if (条件式) {
  // 条件が true（正しい）の時に実行される処理
}

具体的なコード例

const score = 85;

if (score >= 80) {
  console.log("素晴らしい！合格です。");
}

この場合、 score >= 80 は true になるため、コンソールにメッセージが表示されます。

{}（波括弧）の役割

波括弧の中身を「ブロック」と呼びます。if文の影響が及ぶ範囲を示す大切なものなので、必ずセットで覚えるのがマナーです。

「そうでなければ」を追加する：if … else文

条件に当てはまらなかった場合の処理を書きたい時は、 else （エルス）を使います。

elseの書き方

const age = 18;

if (age >= 20) {
  console.log("お酒を注文できます。");
} else {
  console.log("未成年はソフトドリンクのみです。");
}

AかBか、必ずどちらかが実行される

else を使うと、条件が true なら上のブロック、false なら下のブロック、というように「必ずどちらか一方が実行される」という構造になります。

複数の条件を並べる：if … else if文

「80点以上なら『優』、60点以上なら『良』、それ以外は『不可』」のように、3つ以上の分岐を作りたい時は else if を使います。

else ifの実践例

const score = 75;

if (score >= 80) {
  console.log("判定：優");
} else if (score >= 60) {
  console.log("判定：良");
} else {
  console.log("判定：不可");
}

【重要】上から順番に判定される

if文は「上から順番に評価され、一度どこかに当てはまったら、それ以降の条件は見ない」という性質があります。
もし、上記の例で「60点以上」を一番上に書いてしまうと、80点以上の人も全員「良」で止まってしまいます。条件は「厳しい順（または狭い範囲）」から書くのが鉄則です。

条件をより強力にする「比較演算子」と「論理演算子」

if文のカッコ内をより細かく指定するために、以下の記号を組み合わせて使います。

よく使う比較演算子

=== : 等しい（型まで同じ）
!== : 等しくない
> / < : より大きい / より小さい
>= / <= : 以上 / 以下

複数の条件を繋ぐ論理演算子

&& (かつ) : AもBも両方正しい時
|| (または) : AかBのどちらかが正しい時
! (否定) : Aではない時

// 20歳以上、かつ、免許を持っている場合
if (age >= 20 && hasLicense) { ... }

実務で嫌われる「ネストの深すぎるコード」とは？

初心者がやりがちな失敗に、if文の中にif文を何重にも書く「ネスト（入れ子）」があります。

悪いコードの例（ネストが深い）

if (isLoggedIn) {
  if (hasPermission) {
    if (itemAvailable) {
      console.log("購入可能です");
    }
  }
}

これでは、右にコードがどんどんズレていき、非常に読みづらくなります。

管理人

右にどんどんズレていく深いネストは『地獄のピラミッド』とも呼ばれます。現場では後述のエラーを先に弾く『ガード句』でスッキリさせるのが鉄則です。

解決策：ガード句

条件に合わないものを先に「お断り」して外に出す書き方です。

if (!isLoggedIn) return;
if (!hasPermission) return;
if (!itemAvailable) return;

console.log("購入可能です");

このように書くと、メインの処理が深い階層に埋もれず、スッキリと読みやすくなります。

発展：if文をスッキリさせる「三項演算子」と「switch文」

if文以外にも、条件によって処理を分ける方法はあります。

三項演算子

簡単な2択の代入なら、1行で書けます。

const message = score >= 80 ? "合格" : "不合格";

switch文

一つの値に対して、5つも6つも分岐がある場合は switch 文のほうが表のように整理されて見やすくなります。

【関連記事】

実践演習：時間帯による挨拶の自動切り替え

これまで学んだことを活かして、時間によって挨拶を変えるプログラムを作ってみましょう。

// 現在の時間を取得（0〜23）
const hour = new Date().getHours();

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