Day6 後半のゴール
Day6 後半では、前半で学んだ for / while を
「ただ回す」から「目的を持って回す」レベルに引き上げます。
回数を数える、合計を出す、条件付きで処理する、といった
“よくあるパターン”を体で覚えていきましょう。
for 文で「合計」を求める
1〜10 の合計を求める
ただ数字を表示するだけでなく、「合計」を出してみます。
let sum = 0;
for (let i = 1; i <= 10; i = i + 1) {
sum = sum + i;
}
console.log(sum); // 55
ここでのポイントは、変数 sum を「結果をためていく箱」として使っていることです。
最初は 0 から始めて、ループのたびに i を足していきます。
1 回目：sum = 0 + 1 → 1
2 回目：sum = 1 + 2 → 3
3 回目：sum = 3 + 3 → 6
…
最後に 55 になります。
「ループの中で変数を更新していく」という感覚は、
この先ずっと使う超重要パターンです。
偶数だけの合計を求める
少しだけ条件を足してみます。
let sum = 0;
for (let i = 1; i <= 10; i = i + 1) {
if (i % 2 === 0) {
sum = sum + i;
}
}
console.log(sum); // 2 + 4 + 6 + 8 + 10 = 30
i % 2 === 0 は「i を 2 で割った余りが 0」つまり「偶数」という意味です。
for と if を組み合わせることで、「条件付きの繰り返し」が書けるようになります。
while 文で「条件次第のループ」を書く
ユーザーが正しい値を入れるまで繰り返すイメージ
ブラウザだけでは少しやりにくいですが、
イメージとして「条件が満たされるまで続ける」パターンを見てみます。
let count = 0;
while (count < 3) {
console.log("試行回数:", count);
count = count + 1;
}
このコードは、「3 回になるまで繰り返す」例です。
前半の for と同じことを while で書いています。
while が得意な場面のイメージ
for は「何回回すか決まっている」時に強い。
while は「いつ終わるかは条件次第」の時に強い。
例えば本物のアプリでは、
パスワードが正しく入力されるまで
サーバーからデータが返ってくるまで
接続が成功するまで
といった「終わりのタイミングが事前に決まっていない」処理に
while の考え方がよく使われます。
for と while の使い分けを整理する
回数が決まっているなら for
「1〜10 まで」「100 回」「配列の長さ分」など、
回数がはっきりしているときは for が読みやすいです。
for (let i = 0; i < 10; i = i + 1) {
console.log(i);
}
パッと見ただけで「0 から 9 まで回しているんだな」とわかります。
条件で止めたいなら while
「いつ終わるかは状況次第」というときは while の方が自然です。
let n = 1;
while (n < 1000) {
n = n * 2;
console.log(n);
}
ここでは「n が 1000 未満の間は続ける」という書き方になっています。
何回回るかは、実際に計算してみないとわかりません。
break と continue のイメージ（軽く触れておく）
break でループを途中で抜ける
「ある条件になったら、もうそれ以上回さなくていい」というときに使います。
for (let i = 1; i <= 10; i = i + 1) {
console.log(i);
if (i === 5) {
break;
}
}
この場合、1〜5 まで表示されたところでループが終了します。
continue で「その回だけスキップ」
for (let i = 1; i <= 5; i = i + 1) {
if (i === 3) {
continue;
}
console.log(i);
}
このコードは 1, 2, 4, 5 を表示します。
3 のときだけ console.log をスキップしています。
Day6 の時点では「こういうこともできる」くらいの理解で十分です。
大事なのは、「ループの流れを自分でコントロールできる」という感覚です。
セキュリティの視点から見る繰り返しの怖さ
無限ループは「ただのバグ」で終わらないことがある
特に while で更新を忘れた場合の無限ループは、
ブラウザならフリーズ、サーバーなら CPU を食いつぶす原因になります。
let i = 0;
while (i < 10) {
console.log(i);
// i を増やしていない → 永遠に 0 のまま
}
もしこれがサーバー側のコードだったら、
その処理は永遠に終わらず、他の処理にも影響を与えます。
悪意ある攻撃者が、
意図的に重いループを大量に走らせるようなリクエストを送れば、
それだけでサービス妨害攻撃（DoS）の一種になります。
だからこそ、ループを書くときは必ず自分に問いかけてください。
「このループは必ず終わるか？」
「終わる条件と、変化している値は対応しているか？」
これは“きれいなコード”のためだけでなく、
“安全なコード”のためのチェックでもあります。
実践コード：Day6 後半のサンプル
1〜100 のうち、3 の倍数だけを表示する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day6 後半</title>
</head>
<body>
<h1>Day6: 繰り返しの応用</h1>
<script>
for (let i = 1; i <= 100; i = i + 1) {
if (i % 3 === 0) {
console.log(i);
}
}
</script>
</body>
</html>
条件付きで処理を行う、典型的な for＋if の組み合わせです。
合計が 100 を超えるまで足し続ける（while）
<script>
let sum = 0;
let n = 1;
while (sum <= 100) {
sum = sum + n;
n = n + 1;
}
console.log("合計:", sum);
console.log("最後に足した数:", n - 1);
</script>
「何回足すかはわからないけれど、合計が 100 を超えたら終わり」
という、“条件で止める”タイプのループです。
Day6 後半のまとめ
for と while は、どちらも「繰り返し」を表す道具ですが、
得意な場面が少し違います。
回数が決まっているなら for。
終わりが条件で決まるなら while。
そして、どちらを使うにしても、
「どこから始めるか」
「いつ終わるか」
「何を変化させているか」
この3つを常に意識して書けるようになると、
ループは一気に“味方”になります。
ここまで来ているあなたなら、
もう「繰り返しが怖い初心者」からは卒業しつつありますよ。