if 文とは何か
if 文は「条件が真（true）なら、この処理を実行する」という分岐を書ける仕組みです。フォーム入力のチェック、アクセス権の判定、数値の範囲確認など、あらゆるロジックで使われます。JavaScriptでは条件は真偽値に変換され、真なら中括弧 {} の中が実行され、偽ならスキップされます。
基本構文と評価の流れ
条件が真のときだけブロックが実行されます。偽なら何もしません。
const age = 20;
if (age >= 18) {
console.log("成人です"); // 条件が真 → 実行
}
「条件 → ブロック」の形が基本です。中括弧 {} は1行でも省略しないほうが安全です（省略すると、次の1行だけが対象になり、バグの原因になりやすい）。
// 推奨（常にブロックを使う）
if (isMember) {
discount();
}
// 非推奨（次の1行だけが対象）
if (isMember) discount();
else と else if
条件が偽のときに別の処理をしたいなら else。複数段階の条件分岐は else if を使います。
const score = 72;
if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else if (score >= 70) {
console.log("C");
} else if (score >= 60) {
console.log("D");
} else {
console.log("F");
}
上から順に評価され、最初に真になったブロックだけが実行されます。後続は評価されません。条件が重なる可能性がある場合は、厳密な順番で並べることが重要です（高い閾値から低い閾値へ）。
truthy / falsy と条件式
JavaScriptでは、条件の位置に置かれた値は真偽値へ自動変換されます。falsy（偽扱い）は false, 0, -0, 0n, "", null, undefined, NaN。それ以外は truthy（真扱い）。
const name = "";
if (!name) {
console.log("名前を入力してください"); // 空文字は falsy → !で真に
}
const items = [];
if (items) {
console.log("配列は存在します（空でも truthy）");
}
if (items.length === 0) {
console.log("配列は空です（中身で判定）");
}
「0 や空文字を有効値として扱いたい」場面では、単なる truthy 判定ではなく厳密な比較（===）で条件を書くと意図を守れます。
よくある落とし穴と回避策
代入と比較の取り違え
= は代入、=== は比較です。if の条件で = を使うと、代入が起きて常に真・偽になってしまうバグに直結します。
// 間違い：flag に true を代入してしまう
if (flag = true) { /* … */ } // 常に実行される
// 正しい：比較（厳密等価）
if (flag === true) { /* … */ }
緩い等価（==）の予期せぬ型変換
== は型変換が入り、空文字や null/undefined が意図と違う判定になることがあります。比較は基本 === を使いましょう。
console.log("" == 0); // true（意図外）
console.log("" === 0); // false（厳密）
ブロックスコープと再宣言
let や const はブロック {} の中だけ有効です。同じ名前で再宣言しないように注意します。
let x = 1;
if (true) {
let x = 2; // これは別スコープの x
console.log(x); // 2
}
console.log(x); // 1
実用例で理解する
フォーム入力のバリデーション
function validatePrice(s) {
if (s.trim() === "") {
return "入力が空です";
}
const n = Number(s);
if (Number.isNaN(n)) {
return "数値にしてください";
}
if (n < 0) {
return "0以上にしてください";
}
return "OK";
}
console.log(validatePrice(" ")); // 入力が空です
console.log(validatePrice("abc")); // 数値にしてください
console.log(validatePrice("-1")); // 0以上にしてください
console.log(validatePrice("100")); // OK
範囲チェック（下限以上かつ上限以下）
function inRange(x, min, max) {
if (Number.isNaN(x)) return false;
if (x < min) return false;
if (x > max) return false;
return true;
}
console.log(inRange(5, 1, 10)); // true
console.log(inRange(0, 1, 10)); // false
ロールによるアクセス制御
function canAccess(user) {
if (!user) return false;
if (user.role === "admin") return true;
if (user.role === "member" && user.active === true) return true;
return false;
}
console.log(canAccess({ role: "admin" })); // true
console.log(canAccess({ role: "member", active: true })); // true
console.log(canAccess({ role: "member", active: false })); // false
if と他の手段の使い分け
「値の選択だけ」を簡潔に書きたいときは三項演算子（条件 ? A : B）。デフォルト値は OR（||）や null 合体（??）が便利。ただし副作用（ログ出力、代入など）がある処理や、分岐が複雑なときは if 文が読みやすく安全です。
// 値の選択なら三項演算子
const label = score >= 60 ? "合格" : "不合格";
// デフォルト値（0や""を有効値として残すなら ??）
const count = inputCount ?? 0;
// 副作用があるときは if がわかりやすい
if (error) {
console.error(error.message);
report(error);
}
まとめ
if 文は「条件が真なら実行」という最も基本的な分岐です。中括弧は常に使い、比較は === を基本に、truthy/falsy の自動変換を理解して条件を設計しましょう。代入と比較の取り違え、== の型変換、スコープの誤解が初心者の三大ハマりどころ。迷ったら小さな if に分けて、読みやすさと意図の明確さを優先すると、堅牢なコードになります。
