2026年4月16日
JavaScript if文とは？条件分岐の基本
「点数が60点以上なら合格、未満なら不合格」のように、条件によって処理を変えたいときに使うのが if文（イフぶん） です。
JavaScript if文は「もし〇〇なら△△する」という 条件分岐 を書くための構文です。プログラミングの中で最もよく使う仕組みの一つです。
この記事では、if文の基本から応用まで、コード例とともにわかりやすく解説します。
if文の基本的な書き方
if (条件) {
// 条件が true のときに実行される処理
}具体例
let score = 80;
if (score >= 60) {
console.log('合格！');
}score >= 60 が true（正しい）のとき、console.log('合格！') が実行されます。
💡 イベント処理入門で基礎を確認できます。
else：条件が false のとき
else を使うと、条件が false（正しくない）のときの処理も書けます。
let score = 45;
if (score >= 60) {
console.log('合格！');
} else {
console.log('不合格...');
}🔗 あわせて変数入門もチェックしてみましょう。
else if：複数の条件を書く
else if を使うと、3つ以上の条件を順番にチェックできます。
let score = 75;
if (score >= 90) {
console.log('優');
} else if (score >= 70) {
console.log('良');
} else if (score >= 60) {
console.log('可');
} else {
console.log('不可');
}上から順番に条件をチェックし、最初に true になった処理だけが実行されます。
比較演算子
条件式でよく使う比較演算子を覚えましょう。
| 演算子 | 意味 | 例 |
|---|---|---|
=== | 等しい（型も一致） | a === 5 |
!== | 等しくない | a !== 0 |
> | より大きい | a > 10 |
>= | 以上 | a >= 60 |
< | より小さい | a < 100 |
<= | 以下 | a <= 100 |
論理演算子：複数の条件を組み合わせる
let age = 15;
let hasTicket = true;
// && (かつ)：両方 true のとき
if (age >= 12 && hasTicket) {
console.log('入場できます');
}
// || (または)：どちらか true のとき
if (age < 6 || age > 65) {
console.log('割引対象です');
}📖 詳しくはエラー処理入門で解説しています。
ハンズオン：クイズ判定を作ろう
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>クイズ</title></head>
<body>
<p>日本の首都は？</p>
<input type="text" id="answer" placeholder="答えを入力">
<button id="btn">答え合わせ</button>
<p id="result"></p>
<script>
document.getElementById('btn').addEventListener('click', function() {
const answer = document.getElementById('answer').value;
if (answer === '東京') {
document.getElementById('result').textContent = '正解！';
} else {
document.getElementById('result').textContent = '不正解。もう一度！';
}
});
</script>
</body>
</html>条件分岐の実践的な使い方
if文を使った実践的な例を紹介します。日常のプログラミングでよく使うパターンです。
パターン1：入力チェック
フォームに何も入力されていないときに「入力してください」と表示する処理です。変数の中身が空文字（""）かどうかをif文で判定します。ウェブサイトのフォームでは必ず使う処理です。
パターン2：年齢による表示の切り替え
年齢が18歳以上なら「大人料金」、それ以外なら「子供料金」と表示する処理です。if...elseを使って2つのパターンに分けます。
パターン3：スコアによる評価
テストの点数に応じて「A」「B」「C」「D」と評価を表示する処理です。else ifを使って複数の条件を順番にチェックします。90点以上ならA、80点以上ならB、のように上から順に判定していきます。
パターン4：ログイン状態の確認
ユーザーがログインしているかどうかで、表示する内容を変える処理です。ログイン済みなら「ようこそ」、未ログインなら「ログインしてください」と表示します。
条件分岐とループを組み合わせると、さらに複雑な処理ができます。たとえば「配列の中から80点以上の人だけを取り出す」という処理は、ループで1つずつ確認しながらif文で判定します。ループについて詳しくは「JavaScriptのループ入門」で学べます。
条件分岐でよくあるミス
ミス1：代入演算子（=）と比較演算子（==）を間違える
if (x = 5)と書くと、xに5を代入してしまいます。比較したいときはif (x === 5)と書きましょう。イコールは3つ（===）を使うのがおすすめです。
ミス2：else ifの順番を間違える
条件は上から順にチェックされます。最初に当てはまった条件で処理が決まり、それ以降はチェックされません。広い条件を先に書くと、狭い条件に到達しなくなります。狭い条件（厳しい条件）から先に書きましょう。
ミス3：波かっこを省略してバグを生む
if文の中身が1行のとき、波かっこを省略できます。しかし、あとから2行目を追加したときにバグになりやすいです。初心者のうちは常に波かっこを書く癖をつけましょう。
ミス4：条件が複雑すぎて読めない
条件が長くなりすぎると、何を判定しているのかわからなくなります。複雑な条件は変数に入れて名前をつけると読みやすくなります。
JavaScriptの基本がまだ不安な人は「JavaScriptとは？初心者向けにわかりやすく解説」を先に読んでおきましょう。変数や演算子の基本がわかっていれば、条件分岐もスムーズに理解できます。
条件分岐はプログラムに「判断力」を与える仕組みです。if文を使いこなせるようになると、ユーザーの入力に応じて表示を変えたり、エラーを検出して適切なメッセージを出したりできます。最初はシンプルな条件から始めて、徐々に複雑な条件を組み合わせる練習をしていきましょう。プログラミングの面白さが一気に広がります。
まとめ
- ✅ if文：条件が true のときだけ処理を実行する
- ✅ else：条件が false のときの処理を書く
- ✅ else if：複数の条件を順番にチェックする
- ✅
===で等しいか、>=で以上かを判定する - ✅
&&（かつ）・||（または）で条件を組み合わせられる
if文を使いこなすと、ユーザーの入力に応じて動きが変わるプログラムが作れます。レッスンでさらに実践的な使い方を学んでみましょう。
🚀 JavaScriptをレッスンで学ぼう！
このサイトのJavaScriptコースでは、if文を使った実践的なプログラムをブラウザだけで学べます。無料・登録不要です。
JavaScriptコースを見る →