【初心者向け】if/else文の使い方を超わかりやすく解説|条件分岐の基礎をマスターしよう
プログラミングを始めると必ず出てくるのが if / else(条件分岐) です。
この記事では、初心者でも理解できるように、考え方から実際の書き方、JavaScriptの例、よくあるミス、応用まで徹底的にわかりやすく解説します。

TOC
1. if / else文とは?(超基本)
if文は「もし ●● なら、▲▲ を実行する」という意味を持つ構文です。
else は「それ以外の場合は ●● を実行する」という補助的な役割。
基本形は以下のとおりです。
if (条件) {
// 条件がtrueのとき実行
} else {
// 条件がfalseのとき実行
}
2. “条件” とは?
条件とは、最終的に true(真) か false(偽) のどちらかになる式のこと。
例:
x > 10(xが10より大きいか?)isLoggedIn(ログインしているか? 真偽値)score === 100(スコアが100点か?)
3. よく使う比較・論理演算子
● 比較演算子
==等しい!=等しくない>大きい<小さい>=以上<=以下===(JS)厳密に等しい(型まで一致)
● 論理演算子
&&かつ||または!否定
4. JavaScriptでのif/elseの書き方
const age = 20;
if (age >= 18) {
console.log('成人です');
} else {
console.log('未成年です');
}
厳密比較(JavaScript):
const a = '5';
if (a === 5) {
console.log('同じ');
} else {
console.log('違う(文字列と数値は異なる)');
}
5. else if(複数の条件分岐)
● JavaScript
const score = 75;
if (score >= 90) {
console.log('A');
} else if (score >= 70) {
console.log('B');
} else if (score >= 50) {
console.log('C');
} else {
console.log('D');
}
6. 三項演算子(短く書く方法)
● JavaScript
const message = age >= 18 ? '成人' : '未成年';
7. よくあるミスと注意点
● 1. 代入と比較を間違える(JS)
if (x = 5) { // ←代入!バグの原因
}
比較は == や === を使う。
● 2. 波括弧 {} を省略してバグる(JS)
1行でも {} を付けたほうが安全です。
● 3. 条件の順番ミス
広い条件を先に書くと細かい条件に到達しません。
● 4. JSの truthy / falsy に注意
0''(空文字)nullundefinedNaN
これらは false と扱われる。
● 5. 小数の比較は誤差に注意
0.1 + 0.2 === 0.3 // false
8. 実用コード例
● 偶数・奇数判定(JavaScript)
const n = 6;
if (n % 2 === 0) {
console.log('偶数');
} else {
console.log('奇数');
}
9. ネスト(入れ子)しすぎ問題の解決策
● ネストが深い例
if (loggedIn) {
if (hasPermission) {
doSomething();
} else {
showError();
}
}
● 改善版(早期リターン)
if (!loggedIn) return;
if (!hasPermission) { showError(); return; }
doSomething();
10. 練習問題
①
変数 temp が
- 30 以上 →「暑い」
- 20 以上30未満 →「快適」
- それ以外 →「寒い」
と判定するコードを書いてみよう。
②
変数 n が
- 正の偶数
- 正の奇数
- 負の数
- 0
のどれかを判定するコードを書いてみよう。
③
文字列 pw が
- 8文字以上
- 英数字を含む
なら OK、
それ以外は NG。
Summary
- if/elseは「条件で処理を分ける」ための最も基本的な構文。
- JavaScriptは
===を使うのが安全。 - 条件の順番やネストに注意。
- 慣れてきたら三項演算子も便利。
Programming Notes


JavaScriptでクリックしても動かない?onclickとaddEventListenerの違いを初心者向けに徹底解説!2025
JavaScriptでボタンをクリックしても動かない…そんなときはonclickとaddEventListenerの違いを理解すれば解決します! 本記事では、動かない原因から正しい書き方、即実行…
Programming Notes


【初心者向け】JavaScriptのforEach()とは?使い方と注意点を徹底解説2025
初心者向けにJavaScriptのforEach()の使い方を徹底解説。配列やNodeListの繰り返し処理の基本から注意点、DOM操作の実例までわかりやすく紹介します。
その他関連記事はこちら→Programming Notes

Comments