このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】プログラムの制御：if文

プログラムの制御：if文

　JavaScript では、与えられた条件や値によって処理の流れを変えたり、分岐させる機構が用意されています。その代表的なものが if 文 です。ここでは、if 文（およびバリエーションである if-else, else if）を使った基本的な条件分岐の仕組みを解説します。条件分岐を使いこなすことで、動的かつ柔軟な動作を実装できるようになります。

１．if 文の基本構文

ある条件が true（真）と見なせるときだけ、特定の処理を実行する構文です。

if (条件式) {
  // 条件式が true と見なせるときの処理
}

２．if-else 文

もし条件が false（偽）なら、別の処理を行いたい場合に使います。

if (条件式) {
  // trueのときの処理
} else {
  // falseのときの処理
}

３．else if を使った複数分岐

　複数の条件を順番に判定したい場合に、else if を重ねて書き、最後に else を置くことで多段の分岐を組み立てられます。

if (条件式1) {
  // 処理1
} else if (条件式2) {
  // 条件式1が false, 条件式2 が true
} else if (条件式3) {
  // 上記が false, 条件式3 が true
} else {
  // 全ての条件が false
}

４．サンプルコード（HTML + JavaScript）

　以下の例を「myIfStatementsExample.html」というファイル名で保存し、ブラウザで開き、開発者ツールのコンソールを確認してください。

【myIfStatementsExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myIfStatementsExample.html</title>
</head>
<body>
  <h1>if 文のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)を開いて、結果をチェックしてください。</p>

  <script>
    /**
     * 引数で受け取った価格が割引対象かどうかを判定し、コンソールに出力する関数
     * @param {number} price - 商品の価格
     */
    function checkSale(price) {
      if (price >= 2000) {
        console.log(price + '円は、割引対象です。');
      } else {
        console.log(price + '円は、割引対象ではありません。');
      }
    }

    // 関数の実行例
    checkSale(1800);
    checkSale(1900);
    checkSale(2000);
    checkSale(2200);

    /**
     * もう一つの例：得点に応じてランクを判定
     * 80点以上はA、50点以上80点未満はB、20点以上50点未満はC、それ未満はD
     */
    function judgeScore(score) {
      if (score >= 80) {
        console.log('得点:' + score + ' → ランクA');
      } else if (score >= 50) {
        console.log('得点:' + score + ' → ランクB');
      } else if (score >= 20) {
        console.log('得点:' + score + ' → ランクC');
      } else {
        console.log('得点:' + score + ' → ランクD');
      }
    }

    // 関数の実行例
    judgeScore(95);
    judgeScore(72);
    judgeScore(30);
    judgeScore(10);
  </script>
</body>
</html>

デバックコンソールの出力

1800円は、割引対象ではありません。
1900円は、割引対象ではありません。
2000円は、割引対象です。
2200円は、割引対象です。
得点:95 → ランクA
得点:72 → ランクB
得点:30 → ランクC
得点:10 → ランクD

まとめ

  • if 文 で条件式が true なら {} 内を実行、それ以外は処理しない。
  • if-else 文では true の場合と false の場合で異なる処理を設定。
  • else if を重ねることで多段階の条件分岐が可能。
  • 条件式の判断は「真偽値として評価される値」で行われるため、0, '', null, undefined, NaN などは false と見なされることにも注意。

　こうした条件分岐を使えば、同じ関数でも渡す値や状態によって動作を切り替えられるようになり、プログラムの柔軟性が高まります。次は switch 文や例外処理の仕組みなどを学ぶことで、さらに細かい制御が可能になります。