JavaScriptのif文が苦手な人のための条件分岐入門ガイド

こんにちは、とまだです。

JavaScript条件分岐で頭がごちゃごちゃになっていませんか？

if文、else文、比較演算子。 次から次へと新しい概念が出てきて、混乱してしまいますよね。

今回は現役のエンジニア、そして元プログラミングスクール講師としての経験から、JavaScript条件分岐をわかりやすく解説します。

なぜJavaScriptの条件分岐をマスターすべきなのか

条件分岐は、プログラミングの基礎中の基礎です。

身の回りを見てみてください。

エレベーターは「上ボタンが押されたら上へ」という条件分岐で動いています。 自動販売機も「100円入れられたら商品を光らせる」という条件分岐です。

スマホアプリも同じです。

LINEなら「メッセージが来たら通知を表示」。 YouTubeなら「動画が終わったら次の動画を提案」。

すべて条件分岐で実現されています。

条件分岐を理解できれば、動くアプリが作れるようになります。

if文の基本を信号機で理解する

まずは、一番シンプルなif文から始めましょう。

if文は「もし〜なら」という条件を表現します。

以下のコードは信号機の例です。

let signal = "青";

if (signal === "青") {
  console.log("進んでください");
}

このコードは「もし信号が青なら、進んでください」という意味です。

構文はとてもシンプルです。

if (条件) {
  // 条件が正しい時の処理
}

ポイントは3つだけです。

1. ifの後ろに条件を書く
2. 条件は()で囲む
3. 処理は{}で囲む

実際の例を見てみましょう。

let age = 20;

if (age >= 18) {
  console.log("選挙権があります");
}

このコードを実行すると「選挙権があります」と表示されます。

20歳は18歳以上だからです。

if-else文で「それ以外」も処理する

条件に当てはまらない時はどうすればいいでしょうか？

そこで登場するのがelseです。

信号機の例を拡張してみます。

let signal = "赤";

if (signal === "青") {
  console.log("進んでください");
} else {
  console.log("止まってください");
}

elseは「それ以外の場合」を意味します。

自動販売機の例も見てみましょう。

let money = 80;

if (money >= 100) {
  console.log("購入できます");
} else {
  console.log("お金が足りません");
}

80円では100円の商品は買えません。 「お金が足りません」と表示されます。

else ifで複数の条件を処理する

信号機には青と赤だけでなく、黄色もありますよね。

複数の条件を処理したい時はelse ifを使います。

let signal = "黄";

if (signal === "青") {
  console.log("進んでください");
} else if (signal === "黄") {
  console.log("注意して進んでください");
} else {
  console.log("止まってください");
}

成績判定の例も見てみましょう。

let score = 75;

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");
}

75点なので「評価：C」と表示されます。

条件は上から順番にチェックされることが重要です。 最初の条件に当てはまったら、そこで処理は終了します。

比較演算子と論理演算子を使いこなす

より複雑な条件を作る方法を学びましょう。

比較演算子の種類

// 等しい
console.log(5 === 5);  // true

// 等しくない
console.log(5 !== 3);  // true

// より大きい
console.log(10 > 5);   // true

// 以上
console.log(10 >= 10); // true

// より小さい
console.log(3 < 5);    // true

// 以下
console.log(5 <= 5);   // true

論理演算子で条件を組み合わせる

複数の条件を組み合わせたい時は、論理演算子を使います。

遊園地の乗り物を例に見てみましょう。

let age = 8;
let height = 130;

// AND演算子（&&）：両方の条件を満たす必要がある
if (age >= 6 && height >= 120) {
  console.log("ジェットコースターに乗れます");
} else {
  console.log("条件を満たしていません");
}

年齢と身長、両方の条件を満たす必要があります。

OR演算子の例も見てみましょう。

let day = "土曜日";

// OR演算子（||）：どちらか一方でも条件を満たせばOK
if (day === "土曜日" || day === "日曜日") {
  console.log("週末です！");
} else {
  console.log("平日です");
}

土曜日か日曜日、どちらか一方なら週末です。

実践的な条件分岐の活用例

実際のWebアプリでよく使う条件分岐を見てみましょう。

フォームの入力チェック

let username = "";
let password = "12345";

if (username === "") {
  console.log("ユーザー名を入力してください");
} else if (password.length < 6) {
  console.log("パスワードは6文字以上にしてください");
} else {
  console.log("ログイン成功！");
}

時間による挨拶の変更

let hour = new Date().getHours();

if (hour < 12) {
  console.log("おはようございます");
} else if (hour < 18) {
  console.log("こんにちは");
} else {
  console.log("こんばんは");
}

条件分岐を使えば動的なWebサイトが作れるようになります。

よくあるつまずきポイントと解決法

1. 等価演算子の違い

初心者がよく間違えるのが==と===の違いです。

// == は型を変換して比較（使わない方がいい）
console.log("5" == 5);   // true

// === は型も含めて比較（こちらを使う）
console.log("5" === 5);  // false

基本的に===を使うようにしましょう。 バグの原因になりにくいです。

2. 条件の順番

let score = 85;

// 間違った順番
if (score >= 60) {
  console.log("合格");  // 85点でもここで終わってしまう
} else if (score >= 80) {
  console.log("優秀");  // ここには到達しない
}

// 正しい順番
if (score >= 80) {
  console.log("優秀");
} else if (score >= 60) {
  console.log("合格");
}

大きい値から順にチェックするのがコツです。

3. 論理演算子の優先順位

// わかりにくい書き方
if (age >= 18 && gender === "男性" || special === true) {
  // どこで区切られるか不明確
}

// わかりやすい書き方
if ((age >= 18 && gender === "男性") || special === true) {
  // 括弧で優先順位を明確に
}

迷ったら括弧を使って、意図を明確にしましょう。

まとめ

条件分岐は難しく見えても、日常の判断と同じです。

今日覚えておいてほしいポイントは以下の通りです。

• 条件分岐は日常の判断と同じ
• if文は「もし〜なら」を表現
• コンピューターは指示通りに動く
• エラーが出たら順番をチェック

条件分岐ができるようになると、考えるプログラムが書けるようになります。

ユーザーの入力に応じて反応するプログラム。 状況によって動作を変えるWebサイト。

こういったプログラムが作れるようになります。

体系的にJavaScriptを学びたい方は、Learning Nextをご覧ください。

条件分岐から始まり、実際のWebアプリ開発まで、挫折しない順序で学べます。 月額約2,000円で、着実にプログラマーへの道を歩めます。

条件分岐を理解できたら、次は繰り返し処理（ループ）や関数について学んでみてください。