目次
概要
プログラムにおいて「もし〜ならA、そうでなければB」という判断ロジック（条件分岐）は、最も基本的かつ重要な制御構造です。 JavaScriptの if 文を使用することで、変数の値やユーザーの操作に応じて処理を振り分けることができます。 本記事では、基本的な if...else 構文から、複数の条件を扱う else if、そして乱数を使用した動的な分岐処理までを解説します。
仕様（入出力）
- 入力:
- 判定対象となる数値（例: テストの点数）
- システムが生成する乱数
- 出力: 条件判定に基づいた結果メッセージ（コンソールログ）
基本の使い方
if (条件式) { 条件が真の時の処理 } が最小構成です。 条件が満たされない場合の処理を追加するには else { ... } を、さらに別の条件を追加するには else if (条件式) { ... } を繋げます。
コード全文（HTML / JavaScript）
HTML (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件分岐デモ</title>
<script src="conditional-logic.js" defer></script>
</head>
<body>
<div class="container">
<h1>Consoleを確認してください</h1>
<p>条件分岐の結果がログに出力されています。</p>
</div>
</body>
</html>
JavaScript (conditional-logic.js)
テストの点数判定ロジックと、乱数を使った簡易的な運勢判定ロジックです。
/**
* 1. 基本的な多段階分岐 (if - else if - else)
* テストの点数に応じて評価を出力します。
*/
const checkScore = () => {
// 判定対象の点数（ここを書き換えて試せます）
const score = 75;
console.log(`現在の点数: ${score}`);
if (score >= 80) {
// 条件1: 80点以上の場合
console.log("評価: A (素晴らしい！)");
} else if (score >= 60) {
// 条件2: 80点未満 かつ 60点以上の場合
console.log("評価: B (合格です)");
} else {
// 条件3: 上記のどの条件にも当てはまらない場合（60点未満）
console.log("評価: C (再試験が必要です)");
}
};
checkScore();
/**
* 2. 乱数を使った動的な分岐
* 実行するたびに結果が変わる運勢プログラムです。
*/
const drawOmikuji = () => {
// 0以上10未満のランダムな小数を生成
const randomNum = Math.random() * 10;
console.log(`--- おみくじ結果 (数値: ${randomNum.toFixed(2)}) ---`);
if (randomNum >= 8) {
console.log("大吉！今日は良いことがあります。");
} else if (randomNum >= 4) {
console.log("中吉。穏やかな一日でしょう。");
} else {
console.log("小吉。足元に注意しましょう。");
}
};
drawOmikuji();
/**
* 3. 省略記法（波括弧なし）
* 処理が1行だけの場合、{} を省略可能ですが、可読性の観点から注意が必要です。
*/
const isSystemActive = true;
// 1行で書くスタイル
if (isSystemActive) console.log("システムは正常に稼働しています（省略記法）");
カスタムポイント
- 判定順序の重要性:
if文は上から順番に評価され、一度条件に合致するとそれ以降のelse ifは無視されます。 例えば、score >= 60を先に書いてしまうと、80点以上でもそこで止まってしまうため、範囲の狭い条件（厳しい条件）から順に記述するのが鉄則です。 - 論理演算子の活用:
if (age >= 18 && hasTicket)のように、&&（かつ）や||（または）を使うことで、複数の条件を一度に判定できます。
注意点
- 代入演算子との混同: 条件式の中で
if (x = 10)と書いてしまうと、比較ではなく「代入」が行われ、常にtrue（または値そのもの）として評価されてしまいます。必ずif (x === 10)とイコールを3つ（厳密等価）記述してください。 - 波括弧
{}の省略: 処理が1行だけなら{}を省略できますが、後から処理を追加した際にバグの原因になりやすいため、基本的には常に{}を書くことを推奨します。 - 変数のスコープ:
ifブロックの中でconstやletで宣言した変数は、ブロックの外側では使えません。
応用
三項演算子による短縮
単純な if...else の代入処理は、三項演算子を使うと1行で記述できます。
const age = 20;
// 条件 ? 真の場合の値 : 偽の場合の値
const message = age >= 20 ? "お酒が飲めます" : "お酒は二十歳になってから";
console.log(message);
まとめ
if 文はプログラミングの思考そのものです。「どのような条件の時に、何を実行するか」を整理し、漏れのない分岐を作ることがバグのないアプリケーション開発への第一歩となります。まずは基本の if - else if - else の形をマスターしましょう。
