JavaScriptのif文を基礎から丁寧に解説（if / else if / else）

初心者でも迷わない条件分岐の書き方・考え方・演算子の使い方

「この条件のときだけ実行したい」「Aならこう、Bならこう、どれでもなければこう」——そんな“判断”をコードに与えるのがif文です。

本記事では、if / else if / elseの基本から、つまずきやすい比較演算子・論理演算子まで、実務でそのまま使える形で丁寧に解説します。

サンプルはすべてコピペOK。最後にベストプラクティスやよくあるミスのチェック表も付けました。

関連

【初心者向け】JavaScriptの定数ってなに？変数との違いと使いどころをわかりやすく解説！

1. if / else if / else の基本

　そもそもif文とは？

JavaScriptの「if文」は、条件によって処理を変えるための仕組みです。
たとえば「もし〜なら〜する」「そうでなければ〜する」といった“分岐”を作ることができます。

if (条件) {
実行する処理;
}

この書き方の「if」は「もし〜なら」という意味です。
「条件」の部分が true（真） のときだけ、波かっこの中の処理が実行されます。

　具体例で見てみよう

let age = 20;

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

この場合、age >= 18 は「18歳以上なら」という条件です。
age が20なので条件はtrue、結果として「大人です」と表示されます。

　もし条件が当てはまらない場合

elseを使うと、条件がfalse（当てはまらない）ときの処理も書けます。

let age = 16;

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

結果：未成年です
👉 if文は「条件を比べて、どちらの道に進むか」を決める“分岐点”のような役割を持っています。

この仕組みを理解すると、「条件によって動作を変える」プログラムが書けるようになります。
次の章では、実際に条件式の書き方や複数の分岐（else if）を見ていきましょう。

構文テンプレート

if (条件1) {
  // 条件1がtrueのとき実行
} else if (条件2) {
  // 条件1がfalse かつ 条件2がtrueのとき実行
} else {
  // どれにも当てはまらないとき実行（省略可）
}

最小例

const score = 78;

if (score >= 80) {
  console.log("合格（優）");
} else if (score >= 60) {
  console.log("合格");
} else {
  console.log("不合格");
}

ポイント

• 上から順に評価され、最初にtrueになったブロックだけが実行されます。
• else if は必要なだけ連ねられます。
• else は最後の受け皿。想定外の入力に備えて置いておくと堅牢です。

2. 条件式を正しく書くための「演算子」入門

条件式は比較演算子と論理演算子で組み立てます。ベースとなる算術演算子もあわせて整理しておきましょう。

2-1. 算術（基本）演算子一覧

文字列結合に注意："1" + 2 // => "12"
数値として計算したいときはNumber()やparseInt()で明示的に変換しましょう。

2-2. 比較演算子（条件の“大小・等しさ”）

超重要：=== を使う

• JavaScriptには「厳密等価」=== と「抽象等価」== があります。
• == は型を暗黙変換して比較するため、意図しないtrueが生まれます。
  例：0 == false // true、"" == 0 // true
• 基本は常に === / !== を使うのが実務の定石です。

2-3. 論理演算子（条件を“つなぐ”）

例：会員割引の条件

const isMember = true;
const hasCoupon = false;

if (isMember || hasCoupon) {
  console.log("割引適用");
} else {
  console.log("通常価格");
}

3ステップでしっかり学ぶ　JavaScript入門 ［改訂第3版］ [ 大津 真 ]

created by Rinker

¥2,750 (2026/01/05 07:05:51時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

3. 真偽値と「truthy / falsy」を理解する

if文は真偽値（true/false）で分岐します。

ただし、JavaScriptでは「真偽値以外」も条件式に書け、内部で真偽に解釈されます。

よく出る falsy 値（条件式でfalseとみなされる）

注意：NaNの罠

NaN === NaN // false です。NaN判定は Number.isNaN(value) を使いましょう。

4. 具体例で理解を深める

4-1. 基本的な多段分岐

function grade(score) {
  if (score >= 90) return "S";
  else if (score >= 80) return "A";
  else if (score >= 70) return "B";
  else if (score >= 60) return "C";
  else return "D";
}

console.log(grade(85)); // "A"

設計ポイント

• 範囲が重ならないよう大きい条件から順に書くと安全。
• 早期return（ガード節）でネストを浅く保つと読みやすい。

4-2. 論理演算子で条件を組み合わせる

const age = 25;
const hasID = true;

if (age >= 20 && hasID) {
  console.log("入場可");
} else {
  console.log("入場不可");
}

5. if文の書き方を整えるベストプラクティス

1. 厳密等価 === を使う（==は極力使わない）
2. 肯定形で書く：if (isActive) { ... } の方が if (!isInactive) より読みやすい
3. 早期return（ガード節）でネストを浅く function login(user) { if (!user) return "ユーザーなし"; if (!user.email) return "メール未登録"; // ここに本処理... }
4. 条件を関数名で意味づけ const isAdult = (age) => age >= 18; if (isAdult(user.age)) { ... }
5. 範囲条件は順序を意識（上から厳しい/広い順に並べる）
6. switchとの使い分け：値の一致が中心（例：曜日や状態定数）ならswitchも検討

6. よくあるミスと対策（チェック表）

デイトラのWeb制作コースでJavaScriptも習える！

7. 実践ミニレシピ

7-1. 時間帯で挨拶を出し分け

function greetByHour(hour) {
  if (hour < 0 || hour > 23) return "時刻が不正です";
  if (hour < 5)   return "おやすみなさい";
  if (hour < 12)  return "おはようございます";
  if (hour < 18)  return "こんにちは";
  return "こんばんは";
}

7-2. フォーム入力のバリデーション

function validateSignup({ email, password }) {
  if (!email || !password) return "必須項目が未入力です";
  if (!email.includes("@")) return "メール形式が不正です";
  if (password.length < 8) return "パスワードは8文字以上";
  return "OK";
}

7-3. 価格とクーポンの条件判定

function calcPrice(base, { isMember, couponCode }) {
  let price = base;

  if (isMember && price >= 1000) {
    price *= 0.9; // 会員10%オフ
  } else if (couponCode === "WELCOME") {
    price -= 200; // 一律割引
  }

  return Math.max(price, 0);
}

8. まとめ：if文は「読みやすい条件設計」が命

• if / else if / elseは「上から順に最初のtrueだけ実行」。
• 条件式は**比較演算子（===推奨）と論理演算子（&&, ||, !）**で組み立てる。
• truthy/falsyの挙動を理解し、??でデフォルト値を安全に扱う。
• 実務では早期returnや意味のある関数名で、可読性・拡張性を高める。

##（付録）演算子の早見表（保存版）

関連

【保存版】JavaScriptのアロー関数とは？初心者にもわかる違いと使い分けガイド

関連

JavaScriptで作る！回転する円形テキストアニメーション｜初心者でもわかる実装手順付き（コピペ可）