Webアプリやサイトを利用していると、次のような場面によく遭遇しませんか？
- ログインしている時だけ「ログアウト」ボタンが表示される
- 入力フォームで空欄のまま送信しようとすると「入力してください」と警告が出る
- 占いアプリで、ボタンを押すたびに結果が変わる
これらはすべて、JavaScriptの「条件分岐（じょうけんぶんき）」という仕組みによって実現されています。その中心となるのが「if文（イフぶん）」です。
もし変数やデータ型の基本がまだ不安な方は、先に以下の記事を読むと理解が深まります。
if文をマスターすると、プログラムはただ命令を順番にこなすだけでなく、状況に応じて自ら判断して動きを変える「知的なプログラム」へと進化します。本記事では、if文の基本から応用、そして実務で役立つ注意点までを詳しく解説します。
条件分岐とif文の基本イメージ
プログラミングにおける「条件分岐」とは、一言で言うと「もし〜なら、〇〇する」という分かれ道を作ることです。
JavaScriptで最もよく使われるif文の基本構造は以下の通りです。
if（条件式） {
// 条件が「正しい」ときに実行したい処理
}
実際に動かしてみよう
例えば、「持っているお金が500円より多ければ、コーヒーを買う」という処理を考えてみましょう。ブラウザのコンソールに以下のコードを打ち込んでみてください。
const money = 800;
if (money > 500) {
console.log(“コーヒーを買います”);
}
この場合、moneyは800なので、money > 500という条件は「正しい」と判断されます。その結果、コンソールには「コーヒーを買います」と表示されます。もしmoneyを300に書き換えて実行すると、何も表示されません。
比較演算子：条件を作るための記号
if文のカッコ（ ）の中には、数値を比べるための記号を書きます。これを「比較演算子（ひかくえんざんし）」と呼びます。主な種類を整理しておきましょう。
- a > b：aはbより大きい
- a < b：aはbより小さい
- a >= b：aはb以上（bを含む）
- a <= b：aはb以下（bを含む）
- a === b：aとbは等しい
- a !== b：aとbは等しくない
プロが「===」を使う理由
JavaScriptには==（イコール2つ）と===（イコール3つ）がありますが、現代のプログラミングでは「===」を使うのが鉄則です。
- 10 == “10” → true（数字と文字の違いを無視して「だいたい同じ」と判断してしまう）
- 10 === “10” → false（型が違うので「別物」と厳密に判断する）
予期せぬバグを防ぐために、常にイコール3つの厳密な比較を使う癖をつけておきましょう。
分岐を増やす「else」と「else if」
「もし〜なら」だけでなく、「そうでなければ〇〇する」という処理を作りたい場合にはelse（エルス）を組み合わせます。
else：そうでなければ
const score = 45;
if (score >= 60) {
console.log(“合格です！”);
} else {
console.log(“不合格です。次は頑張りましょう。”);
}
else if：もし〜なら、あるいは〜なら
さらに「80点以上なら合格、60点以上ならギリギリ合格、それ以外は不合格」のように、複数の条件を作りたいときはelse ifを使います。
const score = 75;
if (score >= 80) {
console.log(“素晴らしい！合格です。”);
} else if (score >= 60) {
console.log(“合格です。”);
} else {
console.log(“不合格です。”);
}
ポイント：プログラムは上から順番に判定を行い、「最初に条件に当てはまったブロック」だけを実行して終了します。一度どこかの条件に合致すれば、その下のelse ifやelseは無視されるという性質を覚えておきましょう。
論理演算子：複数の条件を組み合わせる
「AかつB」「AまたはB」のように、もっと複雑な条件を作りたい時には「論理演算子（ろんりえんざんし）」を使います。
- かつ（&&）：両方の条件が正しいとき
- または（||）：どちらか片方の条件が正しいとき
- 〜ではない（！）：条件を反転させる
実用例
「点数が80点以上」かつ「出席日数が20日以上」で合格、という条件はこう書きます。
const score = 45;
const attendance = 25;
if (score >= 80 && attendance >= 20) {
console.log(“進級おめでとうございます！”);
}
JavaScriptの「真偽値（しんぎち）」とは？
if文のカッコの中では、最終的に「true（トゥルー：真）」か「false（フォルス：偽）」という2つの値のどちらかが導き出されています。これを「論理値（Boolean）」と呼びます。
JavaScriptにとって、if文は「カッコの中がtrueかどうか」だけをチェックしています。
if (true) {
console.log(“これは必ず実行されます”);
}
if (false) {
console.log(“これは絶対に実行されません”);
}
実は、数値の0や空の文字列” “はJavaScriptではfalseにみなされるなど、独特のルール（Truthy/Falsy）がありますが、まずは「比較した結果はtrueかfalseになる」という点だけ押さえておけば十分です。
まとめ
if文は、Web開発において欠かすことのできない最重要パーツの一つです。
- if文はプログラムに「判断」をさせるためのもの。
- 比較には型までチェックする「===」を使うのが安全。
- elseやelse ifを使えば、複雑な分かれ道も自由に作れる。
- &&（かつ）や||（または）で条件を組み合わせることができる
まずは自分の年齢（age）を変数に入れて、「20歳以上ならお酒が飲める」「そうでなければ飲めない」というシンプルなコードを書いてみてください。自分で書いた条件通りにメッセージが変わる瞬間こそ、プログラミングの本当の楽しさが実感できるはずです。
