if文とは？受講ログで見えた「書き方」より難しい条件の作り方

執筆・監修: 徐聖博／株式会社シンシア代表取締役社長

if文の書き方そのものは易しく、ナミノリの受講ログでは再挑戦12%でした。対して変数と混ざる回は35%。つまずくのは構文ではなく「何と、どう比べるか」です。送料の判定と境界値テストで、実行結果を確認済みのコードから解説します。

if文とは？つまずくのは書き方ではなく「何と比べるか」

if文は「もし〜なら」を書く仕組みです。構文そのものは1分で覚えられます。それでも動かないコードが生まれるのは、比べ方のほうに原因があるからです。

ナミノリの受講ログには、その差がはっきり出ていました。

文法だけの回より、変数と混ざる回のほうが難しい

ナミノリの無料講座は各レクチャーに確認テストがあり、何回目で合格したかが記録に残ります。条件分岐に関わる回を並べると、こうなりました。

レクチャー	完了した人	2回以上かかった人
様々な条件分岐（if / else if / switch などの書き方）	16人	2人（12%）
変数と条件分岐（変数の値で分岐する）	17人	6人（35%）

全レクチャーの平均は29.9%（完了887件中265件が2回以上）です。つまり書き方だけを扱う回は平均より易しく、変数と混ざった途端に平均より難しくなります。

同じことが変数とデータ型の記事でも起きていました。型の種類を覚える回は10%なのに、型変換の回は67%。単体の文法ではなく、組み合わさった瞬間に詰まるという同じ形です。

だからこの記事では、書き方の一覧ではなく「何と、どう比べるか」を扱います。

※ 集計は2026年9月20日時点。完了したレクチャーのみが対象で、母数は各16〜17人と小さい数字です。

まず、送料の判定を書いてみる

「合計5000円以上なら送料無料、それ未満なら500円」という条件を書きます。

function shippingFee(total) {
  if (total >= 5000) {
    return 0;
  }
  return 500;
}

console.log(shippingFee(4999));
console.log(shippingFee(5000));
console.log(shippingFee(5001));

結果は上から 500、0、0 です。

境界を必ず3つ試す

いま試した4999・5000・5001は、適当に選んだ数字ではありません。条件の境目と、その前後です。この3つを試すと、間違いがすぐ見つかります。

たとえば >= を > と書き間違えたとします。

if (total > 5000) {
  return 0;
}

この場合、5000円ちょうどの注文は 500 になります。「5000円以上なら無料」という仕様に反しますが、4999と5001だけを試していると気づけません。ちょうどの値を試して初めて分かります。

この「境目とその前後を試す」やり方を境界値テストと呼びます。条件を1つ書いたら3つ試す、と覚えてください。

もうひとつの例で練習する

「80点以上で合格」を書きます。

function judge(score) {
  if (score >= 80) {
    return "合格";
  }
  return "不合格";
}

console.log(judge(79));
console.log(judge(80));
console.log(judge(81));

結果は 不合格、合格、合格 です。79で不合格、80で合格になっていれば、境目は正しく書けています。

詰まるのはここ ― 比べる相手の型

受講ログで35%が2回以上かかった「変数と条件分岐」の回が難しいのは、比べる相手が変数になると、中身が見えなくなるからです。

入力欄から受け取った値は、見た目が数字でも文字列です。

console.log("100" >= 5000);
console.log("9" > "80");

結果は false と true です。

2つ目に注目してください。9は80より小さいのに true になりました。両方が文字列のときは、文字の並び順で比較されるためです。「9」は「8」より後ろなので、大きいと判定されます。

入力欄の値をそのまま条件に使うと、この種の誤りが起きます。比べる前に数値へ変換します。

const input = "4999";
const total = Number(input);
if (Number.isNaN(total)) {
  console.log("金額を数字で入力してください");
} else if (total >= 5000) {
  console.log("送料無料");
} else {
  console.log("送料500円");
}

空欄が送られてきた場合も確認しておきます。Number("") は 0 になるため、「未入力」ではなく「0円の注文」として処理が進みます。未入力を弾きたいなら、変換の前に空かどうかを見る必要があります。