【JavaScript】if 文による条件分岐の書き方｜else if・ネスト・論理演算子・truthy/falsy・実務パターンまで解説

const age = 20;

if (age >= 18) {
  console.log("成人です");
}
// 条件が true なら {} 内が実行される

const age = 15;

if (age >= 18) {
  console.log("成人です");
} else {
  console.log("未成年です");
}
// 条件が false なら else ブロックが実行される

const score = 75;

if (score >= 90) {
  console.log("A 評価");
} else if (score >= 70) {
  console.log("B 評価");
} else if (score >= 50) {
  console.log("C 評価");
} else {
  console.log("D 評価（不合格）");
}
// 上から順に評価され、最初に true になった分岐だけ実行される

// == は型変換してから比較（予期しない結果になりやすい）
console.log(1 == "1");     // true（文字列 "1" が数値に変換）
console.log(0 == false);   // true
console.log("" == false);  // true
console.log(null == undefined); // true

// === は型変換しない（推奨）
console.log(1 === "1");    // false（型が異なる）
console.log(0 === false);  // false
console.log("" === false); // false

const age = 25;
const hasLicense = true;

// AND: 両方の条件を満たす
if (age >= 18 && hasLicense) {
  console.log("運転できます");
}

// OR: いずれかの条件を満たす
const role = "moderator";
if (role === "admin" || role === "moderator") {
  console.log("管理画面にアクセスできます");
}

// NOT: 条件を反転
const isLoggedIn = false;
if (!isLoggedIn) {
  console.log("ログインしてください");
}

// falsy な値
if (0)         { /* 実行されない */ }
if ("")        { /* 実行されない */ }
if (null)      { /* 実行されない */ }
if (undefined) { /* 実行されない */ }
if (NaN)       { /* 実行されない */ }

// truthy な値（意外なもの）
if ("0")       { console.log("文字列の 0 は truthy"); }  // 実行される
if ([])        { console.log("空配列は truthy"); }       // 実行される
if ({})        { console.log("空オブジェクトは truthy"); } // 実行される
if ("false")   { console.log("文字列 false は truthy"); } // 実行される

// 値が存在するかチェック（null / undefined / 空文字 / 0 を除外）
const name = getUserName();
if (name) {
  console.log("名前:", name);
} else {
  console.log("名前が未入力です");
}

// 0 も有効な値として扱いたい場合は != null を使う
const count = getCount(); // 0 が返る可能性がある
if (count != null) {
  console.log("カウント:", count); // 0 でも表示される
}

// NG: ネストが 3 段 → 読みにくい
function processOrder(user, order) {
  if (user) {
    if (user.isActive) {
      if (order.amount > 0) {
        // ここまで辿り着くのが大変
        console.log("注文を処理します");
      }
    }
  }
}

// OK: 異常系を先に弾く（ガード節）
function processOrder(user, order) {
  if (!user) return;
  if (!user.isActive) return;
  if (order.amount <= 0) return;

  // ここに到達 = 全条件クリア
  console.log("注文を処理します");
}

// user が null/undefined でもエラーにならない
const user = getUser(); // null かもしれない

// 従来の書き方
if (user && user.address && user.address.city) {
  console.log(user.address.city);
}

// オプショナルチェーニング（ES2020）
if (user?.address?.city) {
  console.log(user.address.city);
}

// Null 合体演算子（??）との組み合わせ
const city = user?.address?.city ?? "未設定";
console.log(city); // user が null なら "未設定"

function validateForm(name, email) {
  if (!name.trim()) {
    alert("名前を入力してください");
    return false;
  }
  if (!email.includes("@")) {
    alert("メールアドレスが不正です");
    return false;
  }
  return true;
}

async function fetchUser(id) {
  const res = await fetch(`/api/users/${id}`);

  if (!res.ok) {
    if (res.status === 404) {
      console.error("ユーザーが見つかりません");
    } else if (res.status === 403) {
      console.error("アクセス権限がありません");
    } else {
      console.error("サーバーエラー:", res.status);
    }
    return null;
  }

  return await res.json();
}

const isDebug = location.hostname === "localhost";

if (isDebug) {
  console.log("デバッグモード: ON");
  // 開発時のみ実行する処理
}

// 配列が空でないかチェック
const items = getItems();
if (items && items.length > 0) {
  renderList(items);
} else {
  renderEmptyMessage();
}

// オブジェクトのプロパティ存在チェック
if ("name" in user) {
  console.log(user.name);
}

// typeof でデータ型を安全にチェック
function greet(name) {
  if (typeof name !== "string") {
    throw new TypeError("name は文字列で指定してください");
  }
  console.log(`Hello, ${name}!`);
}