if 文を一言でいうと
if 文は、
「ある条件が成り立つときだけ、特定の処理を実行するための文」です。
日本語にすると、
もし（条件）が成り立つなら、この処理をしなさい
という意味になります。
JavaScript での基本形はこうです。
if (条件) {
// 条件が true のときだけ実行される処理
}
ここが重要です。
if 文は「必ず実行されるもの」ではなく、「条件が true のときだけカギ括弧 {} の中が実行されるスイッチ」 です。
コードを書くたびに「この if は、いつオンになって、いつオフになるのか？」を意識してみてください。
if 文の基本構文と実行の流れ
最小の if 文の形
いちばんシンプルな if 文は、こう書けます。
const score = 80;
if (score >= 70) {
console.log("合格です");
}
実行の流れを順番に追うと、こうなります。
- まず
score >= 70が評価される
この例では80 >= 70なので、結果はtrueになる。 - 条件が true なので、波かっこの中が実行される
"合格です"が表示される。
もし score が 60 だったらどうなるか考えてみましょう。
const score = 60;
if (score >= 70) {
console.log("合格です");
}
ここでは 60 >= 70 は false なので、
条件は成り立たず、波かっこの中は一切実行されません。
つまり、このプログラムは何も表示しません。
ここが重要です。
if 文は「条件を評価 → true なら中身を実行、false ならスキップ」という、とても単純なルールで動いています。
「この if の条件は true になるか？ false になるか？」を、必ず自分で一度予想してから実行してみる癖をつけましょう。
条件式には何を書くのか
true / false を返す式を書く
if の丸かっこの中には、
最終的に true か false になる「条件式」を書きます。
よく使うのは比較演算子です。
const age = 20;
if (age >= 18) {
console.log("成人です");
}
age >= 18 は true か false になります。
他にも、いろいろな比較ができます。
if (x === 0) { /* x がちょうど 0 のとき */ }
if (x !== 10) { /* x が 10 ではないとき */ }
if (x > 0) { /* x が 0 より大きいとき */ }
if (x <= 100) { /* x が 100 以下のとき */ }
ここが重要です。
if のかっこの中に書くのは、「Yes / No で答えられる質問」 だと思ってください。
「年齢が 18 歳以上か？」「スコアが 70 点以上か？」という“質問”をコードにしたものが、条件式です。
true / false 以外も書ける（truthy / falsy）
JavaScript では、かっこの中に書く値は、
必ず boolean（true / false）でなくても構いません。
const name = "太郎";
if (name) {
console.log("名前が設定されています");
}
ここでは name は "太郎" なので、
「真っぽい値（truthy）」として扱われ、if の中が実行されます。
逆に空文字のときは「偽っぽい値（falsy）」として扱われます。
const name = "";
if (name) {
console.log("ここは実行されない");
}
このように、
「値が空かどうか」「設定されているかどうか」を
簡易的にチェックするのにも if はよく使われます。
ただし、0 や空文字も falsy になるなど、少しクセがあるので、
初心者のうちはまず「比較式で true / false をはっきり書く」ところから慣れるのがおすすめです。
if / else で「そうでないとき」を書く
if 〜 else の基本形
「条件が成り立つときは A、そうでないときは B」を書きたいときは、else を使います。
const score = 65;
if (score >= 70) {
console.log("合格です");
} else {
console.log("不合格です");
}
流れはこうです。
score >= 70を評価する（今回は65 >= 70→ false）- false なので if の中身はスキップ
- 代わりに else の中身が実行される
条件が true なら if ブロック、
false なら else ブロックが必ずどちらか一方だけ実行されます。
「どちらか片方必ず通る 2 択」と覚えておきましょう。
if / else でフローを分岐させる感覚
例えばログイン状態で表示を分ける例です。
const isLoggedIn = false;
if (isLoggedIn) {
console.log("マイページを表示");
} else {
console.log("ログイン画面を表示");
}
isLoggedIn が true なら「マイページ」、
false なら「ログイン画面」が表示されます。
ここが重要です。
if 単体は「条件を満たすときだけ何かする」ですが、
if / else は 「状況によって必ずどちらかに流れを振り分ける」 ためのものです。
「どっち側の道を通るのか」を意識して、条件を書くと理解しやすくなります。
else if で複数パターンを分ける
3 パターン以上を分ける if / else if / else
成績をランク分けするような場面を考えてみます。
「90 点以上 → A」「70 点以上 → B」「それ以外 → C」
const score = 82;
if (score >= 90) {
console.log("評価 A");
} else if (score >= 70) {
console.log("評価 B");
} else {
console.log("評価 C");
}
評価の流れを丁寧に追ってみましょう。
- まず
score >= 90を評価する
82 >= 90 は false なので、ここはスキップ - 次に
score >= 70を評価する
82 >= 70 は true なので、このブロックが実行され、「評価 B」が表示される - どこかの条件で true になった時点で、その後の else if / else は無視される
大事なのは、「上から順番にチェックしていき、最初にマッチしたところで打ち止め」 になることです。
条件の順番を間違えると、意図通りに動かない
例えば、こう書いたらどうなるでしょう。
const score = 95;
if (score >= 70) {
console.log("評価 B");
} else if (score >= 90) {
console.log("評価 A");
}
95 点なので、本当は「評価 A」にしたいはずですよね。
でも実際には
- 一行目の
score >= 70が評価される（95 >= 70 → true） - 最初の if で true になったので、「評価 B」が出力されて、
else if には到達しない
結果として、「評価 B」になってしまいます。
ここが重要です。
複数条件を if / else if で書くときは、「より厳しい条件」を上に、「ゆるい条件」を下に書く のが鉄則です。
（今回なら score >= 90 を先に書くべき）
順番次第で結果が変わることを、必ず意識してください。
ブロック（{}）と 1 行 if の注意点
{ } のブロックは「どこまでが if の中か」を決める
if (score >= 70)
console.log("合格");
console.log("お疲れさまでした");
この書き方は文法的にはOKですが、
「どこまでが if の中か」がパッと見で分かりにくいです。
実際にはこう解釈されます。
if (score >= 70) {
console.log("合格");
}
console.log("お疲れさまでした");
つまり "お疲れさまでした" は
条件に関係なく常に表示されます。
もし、両方を条件付きにしたいなら、必ず波かっこ {} でブロックにします。
if (score >= 70) {
console.log("合格");
console.log("お疲れさまでした");
}
一行 if は初心者のうちは控えめに
JavaScript では、if の中の文が 1 行だけなら波かっこを省略できますが、
初心者のうちは、基本的に 毎回 {} を書くことをおすすめします。
// 省略しないほうが安全
if (isLoggedIn) {
console.log("マイページ");
}
慣れないうちに省略すると、
「本当は if の中に入れたかった処理」が if の外に出てしまい、
バグの原因になりやすいからです。
ここが重要です。
波かっこ {} は、「どこからどこまでが条件付きなのか」をハッキリさせるための“カッコ”です。
短く書くより、“意図が伝わること” を優先して、最初のうちは省略しない書き方で統一してみてください。
if 文を書くときに、本当に意識してほしいこと
最後に、if 文を使うときに常に意識してほしいポイントをまとめます。
条件式は「Yes / No で答えられる質問」を書く場所です。score >= 70 は「スコアは 70 以上か？」という質問になっているか？ と自問してみてください。
if は「true のときだけ実行」、if / else は「どちらか一方が必ず実行」。
else if は「上から順にチェックして、最初に当たったところで終わる」。
条件の順番は意味を持つので、「厳しい条件を上、ゆるい条件を下」に書くと意図が伝わりやすい。
波かっこ {} で「どこまでが if の中か」を常に明確にする。
特に初心者のうちは、1 行でも {} を省略しない。
ここが重要です。
if 文は、“プログラムに判断させる” ための最初の道具です。
「どんな状況のときに、この if は true になるのか？」
「そのとき、何をしてほしいのか？」
を日本語で説明できる状態になるまで、コードと対話してみてください。
最後に、小さな練習を置いておきます。
自分の頭で条件を考えてから、コードにしてみてください。
// 練習1:
// 年齢 age が 20 以上なら「お酒を購入できます」、そうでなければ「未成年です」と表示する if / else を書いてみる。
// 練習2:
// 得点 score によって、
// 90以上 → "A"
// 70以上 → "B"
// 50以上 → "C"
// それ以外 → "D"
// を表示する if / else if / else を書いてみる。
// 条件の順番を意識すること。
// 練習3:
// 文字列 name が空文字 "" のときだけ「名前を入力してください」と表示する if 文を書いてみる。
// そのあと、「空でないときだけ表示」するパターンも書いて、条件がどう変わるか確認してみる。
if 文は、プログラミングの「考える力」がもろに出る部分です。
ゆっくりでいいので、自分の日本語の条件を、少しずつ JavaScript の if に翻訳していく感覚を楽しんでみてください。
