プログラムらしさが出てくるのが、この条件分岐です。「入力が空なら警告を出す」「点数が80以上なら合格」といった判断ができるようになります。

書き方

script.js
const score = 85;

if (score >= 80) {
  console.log("合格");
} else {
  console.log("もう少し");
}

丸かっこの中が条件、波かっこの中が「そのときにやること」です。else は「そうでなければ」で、要らなければ省略できます。

= と == と === の違い

ここが最初の関門です。イコールの数で意味がまったく変わります。

  • = … 代入。右の値を左に入れる。条件には使わない
  • == … ゆるい比較。型が違っても、変換して比べる
  • === … 厳密な比較。型まで同じか比べる。基本はこちらを使う

== は "1" と 1 を「同じ」と判定します。便利そうに見えますが、予想外の判定が起きるため、条件には === を使うのが定番です。迷ったらイコール3つ、と覚えてください。

CODE== と === を比べるコードを書き換えると、すぐ下で動きます

文字の "1" と数値の 1 を比べています。== は true、=== は false になります。値を変えて試してみてください。

使う比較の記号

  • === … 同じ
  • !== … 同じではない
  • > … より大きい / < … より小さい
  • >= … 以上 / <= … 以下

3つ以上に分ける

else if でつなぐ
if (score >= 80) {
  result = "合格";
} else if (score >= 60) {
  result = "あと少し";
} else {
  result = "再挑戦";
}

上から順に判定され、最初に当てはまったところで終わります。だから順番が大事です。ゆるい条件を先に書くと、後ろの厳しい条件には決してたどり着きません。

「かつ」と「または」

  • && … かつ（両方を満たす）
  • || … または（どちらかを満たす）
  • ! … ではない（条件を反転させる）
CODE条件を組み合わせるコードを書き換えると、すぐ下で動きます

age の数字を変えて実行してみてください。&& を || に変えると判定が変わります。

空かどうかの判定

フォームの入力が空かどうかを調べる場面はとても多いです。文字列が空のときは false として扱われるので、そのまま条件に書けます。

入力が空なら止める
const value = input.value.trim();

if (!value) {
  alert("入力してください");
  return;
}

trim() は前後の空白を取り除く命令です。空白だけの入力を「入力あり」と判定しないために付けています。

波かっこは省略しない

1行だけなら波かっこを省略できますが、省略しないでください。あとで処理を1行足したときに、条件の外に出てしまう事故がよく起きます。常に波かっこを書く、と決めておくのが安全です。