【第6回】バグの大半が生まれる場所を読めるようにする｜条件分岐とループ（嫁子が教えるTS講座）

今回のゴール

• if で「もし〜なら」の分岐が読める
• for と forEach で「全部に対して〜する」が読める
• == と === の違いを説明できる

前回（配列とオブジェクト）でデータの持ち方をやったので、今回はそれを判断する側です。全体の流れは講座の目次へ。

嫁子: プログラムのバグって、ほとんどが条件分岐のところで起きるんだよ。

「未入力のときはエラーを出す」と指示したのに、空白1文字だと素通りしてしまう、みたいなやつね。AIが書き間違えることもあるし、そもそもあなたの指示に抜けがあることもある。

どっちにしても、条件の部分が読めないと確認しようがないの。今日はそこを読めるようにする回だよ。

① if — もし〜なら

const price = 1200;

if (price > 1000) {
  console.log("高い");
} else {
  console.log("安い");
}

if の丸括弧の中が true になったときだけ、その下の {} の中が実行されます。ならなければ else のほうへ進みます。

3つ以上に分けたいときは else if を挟みます。

if (price > 3000) {
  console.log("高級");
} else if (price > 1000) {
  console.log("ふつう");
} else {
  console.log("安い");
}

上から順に判定され、最初に当てはまったところで止まります。だから並べる順番に意味があります。

② 比較に使う記号

前回も触れましたが、= は代入で、比較は === です。ここは間違えやすいところです。

if (name === "牛乳") { ... }              // 名前が牛乳なら
if (price > 100 && done === false) { ... } // 100円超、かつ、まだ買っていない

③ なぜ == ではなく === なのか

JavaScriptには == と === の両方があります。使うのは === だけと覚えてください。

console.log(1 === "1");  // false（型が違うので別物）
console.log(1 == "1");   // true（型を勝手に揃えてから比較する）

== は型が違っても揃えてから比べます。第4回でやった「静かに壊れる」の仲間で、意図しない一致が起きます。

嫁子: これ、実務でも本気で嫌われてるやつなの。だから「== を使うと警告する」設定を入れる現場がほとんどだよ。

AIも基本は === を書いてくるけど、古い記事を参考にしたコードだと == が混ざることがある。見つけたら「=== に直して」と言えばいいだけだね。

覚えることは1つだけ。イコールは3つ。それでいいよ。

④ 真偽値の落とし穴

if の中には、true／false 以外のものも書けてしまいます。そのとき何が起きるかは、決まっています。

if (name) {          // name が空文字 "" だと false 扱いになる
  console.log("入力あり");
}

次の値は、if の中では false として扱われます。

• false
• 0（数値のゼロ）
• ""（空の文字列）
• null / undefined

「0を入力したのに未入力と判定される」という不具合は、ほぼこれが原因です。

嫁子: 個数を0にしたら「未入力です」って怒られる、みたいなやつね。地味に多いよ。

ちゃんと書くなら if (count !== undefined) みたいに、何を判定したいのかを明示するの。「入力があるか」と「0でないか」は違う話だからね。

⑤ ループ — 全部に対して繰り返す

同じ処理を繰り返す書き方です。まず基本の for から。

const items = ["牛乳", "卵", "パン"];

for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}

丸括弧の中は「i を0から始めて、items.length 未満のあいだ、1ずつ増やす」という意味です。i++ は「i に1を足す」の省略形です。

ただ、配列を回すだけなら次の書き方のほうが読みやすく、実務ではこちらが主流です。

items.forEach((item) => {
  console.log(item);
});

番号を管理しなくていいぶん、間違いが減ります。

嫁子: 3つもあると混乱するよね。でも実際に自分で選ぶ場面はそんなに来ないと思う。

書くのはAIだから、あなたは「これは全件に何かしてるな」と読めれば十分だよ。区別が必要になるのは、途中で止めたいときくらいだね。

つまずきポイント

{} の対応を見失いやすいです。if の中に for が入り、その中にまた if が入ると、どこで何が終わっているか分からなくなります。VS Codeは対応する括弧を光らせてくれるので、それを頼りにしてください。

無限ループに注意。i++ を書き忘れると for が永遠に終わりません。ブラウザが固まったら、タブを閉じて構いません。

嫁子: 無限ループ、一度はやると思うよ。パソコンが壊れたわけじゃないから安心してね。

AIが書いたコードでも起きうるの。特に「条件を満たすまで繰り返す」系を頼んだときは、終わる条件があるかを一応見ておくといいよ。

今回のまとめ

• if は括弧の中が true のときだけ実行される。else if は上から順に判定
• 比較は === を使う（== は型を勝手に揃えるので避ける）
• 0 や "" は if の中では false 扱いになる
• ループは for（番号が要るとき）と forEach（1件ずつ処理）
• 括弧の対応と、終わる条件があるかを確認する

次にやること

次回は関数です。ここまでに出てきた処理をまとめて名前をつけ、何度でも呼び出せるようにする仕組みで、JavaScriptの中心にあたる回になります。

今回の宿題：console.log(1 == "1") と console.log(1 === "1") を両方実行して、結果が違うことを確認してください。1分で終わります。

嫁子: これ見ておくと、=== を3つ書く理由が体で分かるよ。

理屈で覚えたことは忘れるけど、一度おかしな結果を見たものは忘れないからね。