JavaScriptの条件分岐（if文）とは？基本から解説

JavaScriptでは、条件によって処理を変えることができます。
この仕組みを 条件分岐（conditional branching） と呼び、その代表的な書き方が if文 です。

条件分岐は、Webサイトの動作を制御するうえで非常に重要な概念です。例えば次のような処理で使われます。

• ログイン状態によって表示内容を変える
• 入力フォームの内容をチェックする
• ボタンが押されたときに特定の処理を行う

本記事では、JavaScriptの条件分岐の基本である if文の仕組み・書き方・実践例 を基礎から解説します。初めてJavaScriptを学ぶ場合でも理解できるよう、段階的に整理しています。

条件分岐（if文）とは

if文とは、条件が成立した場合にのみ処理を実行する構文です。

基本的な考え方は非常にシンプルです。

もし条件が成立したら → この処理を実行する
成立しなければ → 何もしない

JavaScriptでは、この処理を次のように書きます。

if (条件) {
  実行する処理
}

例えば次のコードです。

let score = 80;

if (score >= 60) {
  console.log("合格です");
}

このコードの意味は次の通りです。

• score が 60以上なら
• 「合格です」を表示する

条件が成立しない場合は、何も実行されません。

if文の基本構文

if文の基本構文は次の形です。

if (条件式) {
  処理
}

それぞれの意味は次の通りです。

条件式は true のときに処理が実行されます。

条件式で使う比較演算子

if文では、条件を判断するために 比較演算子 を使います。

主な比較演算子は次の通りです。

例：

let age = 20;

if (age >= 18) {
  console.log("成人です");
}

このコードでは、ageが18以上かどうかを判断しています。

elseで条件に当てはまらない場合の処理を書く

if文では、条件が成立しなかった場合の処理も書くことができます。
それが else です。

if (条件) {
  条件がtrueの処理
} else {
  条件がfalseの処理
}

例：

let score = 50;

if (score >= 60) {
  console.log("合格");
} else {
  console.log("不合格");
}

処理の流れは次の通りです。

score >= 60 → false
↓
elseが実行
↓
「不合格」と表示

else ifで複数の条件を分岐する

条件が複数ある場合は else if を使用します。

if (条件1) {
  処理1
} else if (条件2) {
  処理2
} else {
  処理3
}

例：

let score = 75;

if (score >= 90) {
  console.log("A評価");
} else if (score >= 70) {
  console.log("B評価");
} else {
  console.log("C評価");
}

処理の流れ

score >= 90 → false
score >= 70 → true
↓
B評価

上から順に条件を評価していくのが特徴です。

複数条件を組み合わせる（論理演算子）

条件を組み合わせたい場合は 論理演算子 を使います。

AND条件

let age = 25;

if (age >= 20 && age < 65) {
  console.log("働く世代です");
}

意味：

20以上 かつ 65未満

OR条件

let day = "土";

if (day === "土" || day === "日") {
  console.log("休日です");
}

意味：

土 または 日

if文の実用例（Web制作）

Web制作では、if文はさまざまな場面で使われます。

フォーム入力チェック

let name = "";

if (name === "") {
  console.log("名前を入力してください");
}

ログイン状態の判定

let isLogin = true;

if (isLogin) {
  console.log("マイページを表示");
}

ボタン処理

let count = 5;

if (count > 10) {
  console.log("上限に達しました");
}

このように、ユーザーの状態や入力によって処理を変える場面で活躍します。

ネスト（if文の入れ子）

if文は 入れ子（ネスト） にすることもできます。

let age = 25;
let hasTicket = true;

if (age >= 18) {
  if (hasTicket) {
    console.log("入場できます");
  }
}

ただし、ネストが増えるとコードが読みにくくなるため、
必要以上に深くしないことが大切です。

if文とtrue / falseの関係

JavaScriptでは、if文は true / false で判定されます。

例：

let isLogin = true;

if (isLogin) {
  console.log("ログイン中");
}

このように boolean型の値 をそのまま条件として使うことも可能です。

JavaScriptのデータ型については、次の記事で詳しく解説しています。

関連記事
→ JavaScriptのデータ型とは？基本から解説

if文を書くときの注意点

=== を使う

JavaScriptでは ===（厳密等価） を使うことが推奨されます。

if (value === 10)

理由は、== は自動的に型変換を行うため、意図しない結果になる場合があるためです。

波括弧 {} は省略しない

次のように書くこともできます。

if (flag) console.log("OK");

しかし、実務では 必ず {} を書く方が安全です。

if (flag) {
  console.log("OK");
}

まとめ

JavaScriptの条件分岐（if文）は、条件によって処理を変えるための基本構文です。

ポイントを整理します。

• if文は「条件がtrueなら処理を実行する」
• elseで条件外の処理を書く
• else ifで複数条件を分岐できる
• 比較演算子で条件を作る
• 論理演算子で複数条件を組み合わせる

if文は、JavaScriptの中でも最も頻繁に使われる構文の一つです。
この仕組みを理解することで、Webページに動きのある処理を実装できるようになります。

関連記事

• JavaScriptの役割と基本構造
• JavaScriptの変数とは？let・constの使い方を解説
• JavaScriptのデータ型とは？基本から解説
• JavaScriptの関数とは？基本と使い方
• JavaScriptの配列とは？基本から解説