if文の=（イコール1つ）と===（イコール3つ）はどう違いますか？

=は変数に値を入れる記号で、===は左右が等しいか調べる記号です。if文の条件で使うのは===。まちがえて=を書くと「調べる」つもりが「入れる」動きになり、いつでも条件が成り立つバグになります。

==（イコール2つ）でも動くと聞きました。===とどちらを使えばいいですか？

==は型（文字か数かなど）を自動で変換してから比べるため、思わぬ結果になることがあります。初心者のうちは、きっちり比べる===だけを使えば大丈夫です。

やることが1行だけなら文法上は省略できますが、あとから行を足したときにバグのもとになります。慣れるまでは必ず{ }を書くのがおすすめです。

「もし雨なら傘を持っていく。晴れなら持っていかない」。わたしたちがふだんやっているこの判断を、プログラムに書けるのがif文です。状況によって動きを変える——プログラムが”賢く”ふるまう仕組みの正体です。

let weather = "雨";

if (weather === "雨") {
  console.log("傘を持っていこう！");
}

weatherの中身が「雨」なので、コンソールに「傘を持っていこう！」と表示されます。中身が「晴れ」だったら、何も起きません。

条件の中で「等しいかどうか」を調べるときは、===とイコールを3つ並べます。

if (weather === "雨") {

「成り立たなかったときは、こっち」も書けます。それがelse（さもなければ）です。

if (weather === "雨") {
  console.log("傘を持っていこう！");
} else {
  console.log("手ぶらでOK！");
}

これで、雨なら「傘を持っていこう！」、それ以外なら「手ぶらでOK！」。道が2つに分かれるので、この仕組みは「条件分岐」と呼ばれます。

条件には、数のくらべっこも書けます。

let score = 85;

if (score >= 80) {
  console.log("すごい！合格！");
}

「等しくない」は!==と書きます。先頭のびっくりマークは「〜ではない」の意味です。

ところで、ifは条件が成り立つかどうかを、どうやって知るのでしょう。じつは( )の中に書いた式は、true（成り立つ）かfalse（成り立たない）のどちらかの答えに化けています。コンソールでたしかめられます。

console.log(3 > 1);
console.log(3 > 100);

「true」と「false」が表示されます。ifがやっているのは「答えがtrueなら{ }を実行する」——それだけの、シンプルな仕組みです。

これまで学んだ「イベント」と組み合わせると、こんな仕掛けが作れます。あいことばが合っているかどうかで、返事が変わります。ひとつだけ新顔の道具があって、入力欄に打ちこまれた文字は、つかまえた要素に.valueをつけると取り出せます。

ボタンが押されたら（イベント）、入力された文字を調べて（if文）、結果を書きこむ（textContent）。学んだ材料の合わせ技です。