JavaScript超入門③ if文で条件によって処理を分けよう

ボタンを押せるのは入力が終わったときだけ。点数が60以上なら合格。こうした「条件によって処理を変える」仕組みを作るのがif文です。

今回は、分岐の形だけでなく、数と文字の比較、条件の順番、境目の確かめ方まで扱います。動いたのに判定だけ違う、という場面を減らしていきましょう。

コードはブラウザのコンソールか、第1回のHTMLのscript内で、例ごとに分けて試してください。

1. ifは、条件が成り立つときだけ動く

const score = 75;

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

console.log("判定が終わりました");

合格です
判定が終わりました

score >= 60は「scoreが60以上か」です。この比較の結果がtrueなら、波かっこの中を実行します。

scoreを55に変えると、「合格です」は表示しません。「判定が終わりました」はifの外なので、どちらでも表示します。

ifの直後の丸かっこが条件、波かっこが処理の範囲。字下げだけでは範囲を決められない点を確認しましょう。

2. elseで「そうでないとき」を書く

const score = 55;

if (score >= 60) {
  console.log("合格です");
} else {
  console.log("復習してから、もう一度挑戦しましょう");
}

elseには条件を書きません。直前のifに当てはまらなかった場合を受け持つからです。

この場合は55が60以上ではないので、下の文章だけが表示されます。両方を表示する流れではありません。

3. 3段階以上は、上から選ぶelse if

const score = 75;

if (score >= 80) {
  console.log("とてもよくできました");
} else if (score >= 60) {
  console.log("合格です");
} else {
  console.log("復習しましょう");
}

75では、80以上の条件がfalse、60以上がtrueなので「合格です」と表示します。

85なら最初で決まり、後ろの条件は調べません。ここで60以上を先に置くと、85まで最初の分岐へ入ってしまいます。

独立したifとは違う

const score = 85;

if (score >= 80) {
  console.log("80点以上");
}
if (score >= 60) {
  console.log("60点以上");
}

これは2つの独立した判断なので、両方表示されます。

「どれか1つだけ選ぶ」ならelse if、「当てはまる分をそれぞれ処理する」なら独立したif。似た見た目でも、目的が違います。MDNの制御フローの説明で分岐の動きを確認できます。

4. 比較は、まず===を使う

記号	意味
`===`	型を変換せず等しいか比較
`!==`	型を変換せず等しくないか比較
`>`	より大きい
`<`	より小さい
`>=`	以上
`<=`	以下

console.log(5 === 5);
console.log(5 === "5");
console.log(5 == "5");

結果はtrue、false、trueです。

==は比較時に型を変換する場合があり、見た目から予想しにくい結果になります。学び始めは入力を必要な型へ変換してから、===で比較する形にそろえると理解しやすいでしょう。

=は代入なので、条件の比較に使いません。if (score = 60)は、変数がletなら代入してしまい、constなら再代入でエラーになる原因です。

数の大小比較でも型をそろえる

"10" < "2"は文字列同士の比較なので、数値の10と2の大小とは違います。数を比べるなら、前回のNumberで変換し、有効な数か確認して使います。

なお、オブジェクト同士の===は「中身が全部同じか」ではなく、同じオブジェクトかどうかを調べます。この違いはオブジェクトの回で説明します。

5. &&・||・!で条件を組み合わせる

const age = 19;
const hasTicket = true;

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

条件として使う場合、&&は「かつ」、||は「または」、!は真偽を反対にする操作です。

範囲内ならscore >= 0 && score <= 100、範囲外ならscore < 0 || score > 100と書けます。

0 <= score <= 100と数学のように並べると、最初の比較結果をさらに数と比べるため、意図した範囲判定になりません。

左だけで決まれば右へ進まない

&&は左が偽相当なら右を実行せず、||は左が真相当なら右を実行しません。この仕組みが短絡評価です。

const input = null;

if (input !== null && input.trim() !== "") {
  console.log("文字が入力されています");
}

inputがnullなので、文字列用のtrimを呼ぶ前に止まれます。この例では、inputは文字列かnullである前提です。

JavaScriptの&&と||は、式としては必ずbooleanを返すわけではなく、評価した値そのものを返します。まずは今回のように、明確な条件を組み合わせる使い方から覚えましょう。

6. truthy・falsyの思い込みに注意

ifは、boolean以外の値も真偽へ変換して判断します。偽として扱われる値をfalsy、真として扱われる値をtruthyと呼びます。

例えばfalse、0、空文字列""、null、undefined、NaNはfalsyです。一方、"0"や"false"のような空でない文字列はtruthyです。空の配列[]やオブジェクト{}もtruthyになります。

「文字でfalseと書いてあるから偽」という意味ではありません。名前が紛らわしいですね。初心者の入力確認では、空かどうか・数値かどうかを明示的に調べる方が安全です。

7. switchは、決まった値を選ぶ

const menu = 2;

switch (menu) {
  case 1:
    console.log("ゲーム開始");
    break;
  case 2:
    console.log("設定を開く");
    break;
  default:
    console.log("選択肢がありません");
}

2に一致するcaseから実行し、breakでswitchを抜けます。breakを忘れると次のcaseの処理へ流れるため、初めは各分岐の終わりを確認します。

switchの一致は厳密な比較なので、menu = "2"では数値のcase 2に入りません。文字列のメニューならcase "2"へそろえるか、入力を数値へ変換します。

点数のような範囲はif、決まった番号や名前を選ぶときはswitchが向きます。

8. 練習：気温で3つの文章へ分ける

30度以上、15度以上30度未満、15度未満の3段階で、文章を変えてください。これは条件分岐の練習用の区分で、健康上の判断基準ではありません。

模範解答

const temperature = 22;

if (!Number.isFinite(temperature)) {
  console.log("有効な数値を指定してください");
} else if (temperature >= 30) {
  console.log("暑く感じそうですね");
} else if (temperature >= 15) {
  console.log("過ごしやすそうな気温です");
} else {
  console.log("ひんやりしそうですね");
}

解説

22は有限な数なので最初のエラー分岐を通りません。30以上はfalse、15以上はtrueなので「過ごしやすそうな気温です」と表示します。

確認用の答えは、14→最後、15→中央、29→中央、30→暑い側です。境目と隣を試すと、>と>=の取り違いを見つけやすくなります。

Number.isFiniteを最初に使うことで、NaNや文字列などを勝手に「寒い」に分類しないようにしています。MDNのNumber.isFiniteも確認できます。

次の一歩

判断のコードを書く前に、「この値ならこの結果」と小さな表を作ってみましょう。ルールが曖昧なまま記号へ変えるより、ずっと考えやすくなります。

前の記事 / 次の記事：ループと配列