AIと一緒に学ぶJavaScript基礎③ 条件分岐と繰り返し ～「もし○○なら」と「何回もやる」で一気にプログラムっぽくなる～

こんにちは！
フロントエンドエンジニアのあまんちゅです。

AIと一緒に学ぶJavaScript基礎の第三弾です！

前回は、変数を使ってデータを保存したり、数値を増やしたりしました。

今回はいよいよ、プログラムらしさが一気に増すテーマです。

今回のテーマは
「条件分岐」と「繰り返し」
です。

条件分岐（if / else）とは？

条件分岐は、簡単に言うと「状況に応じて処理を分ける」書き方です。

例えば、

• 点数が80点以上なら「OK」
• それ以外なら「Try again」

みたいな判断をコードで書けます。

まずは if / else を動かしてみる

コンソールで試してみましょう👇

const score = 85;
if (score >= 80) { 
    console.log("OK");
} else {
    console.log("Try again");
}

OKと出たら成功です！
試しに
const score = 60;
に変えて、結果が変わるかも確認してみてください。

• ※コンソールの使い方の復習はこちらから💡

比較演算子：条件はどう書く？

if (score >= 80) の部分は、「条件」です。条件を書くときは、比較演算子をよく使います。

=== と == の違い

JavaScriptには、等しいかどうかを比較する書き方が2つあります。

• ==：ゆるい比較（比較の前に暗黙の型変換が起きることがある）
• ===：厳密な比較（型も値も同じかを見る）

実際にコンソールで試すと違いが分かりやすいです👇

console.log(1 == "1"); // true
console.log(1 === "1"); // false

初心者のうちは、基本は===を使った方が意図しない比較ミスを避けやすいです。

繰り返し（for）とは？

次に、繰り返し処理です。
繰り返しは、同じ処理を何回も実行したいときに使います。

for文の形

まずは「3回繰り返す」だけの例です👇

for (let i = 0; i < 3; i++) { 
    console.log("繰り返し：" + i); 
}

出力はこんな感じになります。

繰り返し：0 
繰り返し：1 
繰り返し：2

• let i = 0：カウンターを0から始める
• i < 3：3回になるまで続ける（0,1,2）
• i++：1回ごとに +1 する

前回のTryでやった count = count + 1 を、自動でやってくれる仕組みがfor文のイメージです。

配列 × 繰り返し：forEachを使ってみる

Web開発では「データが複数ある」ことが多いので、配列（リスト）と繰り返しはセットで出てきます。

今回は、点数の配列を使ってみます👇

const scores = [90, 70, 100];
scores.forEach((score) => { 
    if (score >= 80) { 
        console.log("OK"); 
    } else { 
        console.log("Try again"); 
    } 
});

これで、配列の要素（90, 70, 100）を順番に取り出して、条件分岐の判定をしています。

繰り返しには「使いどころ」がある

繰り返し処理にはいくつか書き方がありますが、どれが正解というより「場面で使い分ける」イメージです。

• for：回数を数えながら繰り返したいとき（0〜9まで、3回だけ、など）
• forEach：配列の中身を先頭から順番に処理したいとき

今回はまずこの2つを触って、「繰り返し＝1種類じゃない」ことを掴めたらOKです。

今回のまとめ

• if / else で「もし○○なら」を書ける
• 比較は基本 === を使っておくと安心
• for で同じ処理を何回も実行できる
• forEach で配列の中身を順番に処理できる

条件分岐と繰り返しが出てくると、「入力→判断→処理」の形が作れるようになって、一気にプログラムっぽくなります。

Try（練習）

よかったら、コンソールで次のコードも試してみてください👇

✅ Try1：点数から合否を出す

const score = 59;
if (score >= 60) { 
    console.log("合格"); 
} else { 
    console.log("不合格"); 
}

数字を変えて、結果が変わるか確認してみてください。

✅ Try2：配列の合計点を出してみる

const scores = [90, 70, 100];
let total = 0;
scores.forEach((score) => { 
    total = total + score; 
});
console.log("合計点は" + total + "です");

合計点が 260と表示されればOKです！

次回予告

次回は、関数について触れていきます！
処理をひとまとめにして、何度も使えるようにする考え方で、JavaScriptがさらに書きやすくなります。

おまけ

AIとの併走メモ🏃‍♀️💨

今回も、AIに「説明の順番」や「例題」を相談しつつ組み立てました。
ただ、最終的に自分が意識したのは、“コンソールで実際に試して納得できること”です。

AIに聞くときは、

• 「このコードはどういう順番で動いてる？」
• 「この条件は、どんなときにtrue/falseになる？」

のように、動きのイメージが掴める質問を投げると理解が進みやすかったです。