Day6 前半のゴール
Day6 のテーマは「繰り返し」です。
ここから一気に「コンピュータらしさ」が強くなります。
前半では、特に次の2つを目標にします。
Day6 前半で身につけたいこと
同じ処理を「何回も」自動で繰り返すイメージをつかむ
for と while の基本的な書き方と違いを理解する
繰り返しとは何か
「同じことを何度もやる」をコードにする
人間がやると面倒なことの代表が「同じ作業の繰り返し」です。
「1〜10 までの数字を順番に表示する」
「100人分のデータを順番に処理する」
「一定回数だけメッセージを表示する」
こういった処理を、毎回手で書くのは現実的ではありません。
console.log(1);
console.log(2);
console.log(3);
// … 10 まで書く?
JavaScriptそこで使うのが「繰り返し(ループ)」です。
for 文の基本
for 文は「回数が決まっている繰り返し」に強い
for 文の基本形はこうです。
for (初期値; 条件; 更新) {
繰り返したい処理;
}
JavaScriptまずは具体例から見てみましょう。
for (let i = 1; i <= 5; i = i + 1) {
console.log(i);
}
JavaScriptこのコードは、1〜5 までの数字を順番に表示します。
3つのパーツを分解して理解する
初期値
let i = 1;
JavaScript最初に i に 1 を入れています。
「カウンターを 1 からスタートする」という意味です。
条件
i <= 5
JavaScriptこの条件が true の間だけ、繰り返しが続きます。
i が 6 になった時点で false になり、ループが止まります。
更新
i = i + 1;
JavaScript1 回ループが終わるたびに、i に 1 を足しています。
1 → 2 → 3 → 4 → 5 と増えていきます。
実際に頭の中で追ってみる
1 回目:i = 1 → 条件 1 <= 5 → true → console.log(1)
2 回目:i = 2 → 条件 2 <= 5 → true → console.log(2)
3 回目:i = 3 → 条件 3 <= 5 → true → console.log(3)
4 回目:i = 4 → 条件 4 <= 5 → true → console.log(4)
5 回目:i = 5 → 条件 5 <= 5 → true → console.log(5)
6 回目:i = 6 → 条件 6 <= 5 → false → ループ終了
この流れを一度しっかりイメージできると、for 文は一気に怖くなくなります。
for 文のよくあるパターン
0 からスタートするパターン
プログラミングでは「0 から数える」ことが多いです。
for (let i = 0; i < 5; i = i + 1) {
console.log(i);
}
JavaScriptこの場合、表示されるのは 0, 1, 2, 3, 4 です。
条件が i < 5 なので、5 になった時点で止まります。
2 ずつ増やす・減らす
for (let i = 0; i <= 10; i = i + 2) {
console.log(i); // 0, 2, 4, 6, 8, 10
}
JavaScriptfor (let i = 5; i >= 1; i = i - 1) {
console.log(i); // 5, 4, 3, 2, 1
}
JavaScript「何から始めるか」「どこまでやるか」「どう増減させるか」を
自分で決められるのが for 文の強みです。
while 文の基本
while 文は「いつ終わるか条件で決まる繰り返し」
while 文の基本形はこうです。
while (条件) {
繰り返したい処理;
}
JavaScript条件が true の間、ずっと繰り返します。
for 文と同じことを while で書いてみましょう。
let i = 1;
while (i <= 5) {
console.log(i);
i = i + 1;
}
JavaScriptfor と while の違い(前半のイメージ)
for 文
「回数がはっきりしているときに書きやすい」
while 文
「いつ終わるかが条件次第のときに書きやすい」
前半では、このくらいのイメージで十分です。
後半で、もう少し使い分けを深掘りします。
while 文で気をつけること
更新を忘れると「無限ループ」になる
次のコードを見てください。
let i = 1;
while (i <= 5) {
console.log(i);
}
JavaScript一見それっぽく見えますが、
これは 永遠に終わらないループ になります。
理由は、i を増やしていないからです。
i はずっと 1 のままなので、i <= 5 が永遠に true のままです。
正しくはこうです。
let i = 1;
while (i <= 5) {
console.log(i);
i = i + 1;
}
JavaScriptfor 文は「初期値・条件・更新」がひとまとめになっているので、
更新の書き忘れが起きにくいですが、
while 文は自分で更新を書く必要があります。
実践:Day6 前半のサンプルコード
例1:1〜10 を表示する(for)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day6 繰り返し</title>
</head>
<body>
<h1>Day6: for 文の基本</h1>
<script>
for (let i = 1; i <= 10; i = i + 1) {
console.log(i);
}
</script>
</body>
</html>
コンソールに 1〜10 が順番に表示されることを確認してみてください。
例2:1〜5 を表示する(while)
<script>
let i = 1;
while (i <= 5) {
console.log(i);
i = i + 1;
}
</script>
for と while の両方で「同じ結果」を出してみると、
2つの構造の違いがよく見えてきます。
セキュリティの視点から見る「繰り返し」
無限ループは「リソース攻撃」にもなりうる
while の更新忘れのような無限ループは、
単なるバグで済まないこともあります。
サーバー側のコードで無限ループが起きると、
CPU やメモリを延々と消費し続け、
サービス全体が重くなったり、落ちたりします。
悪意のあるコードが意図的に無限ループを仕込めば、
それだけで「サービス妨害攻撃(DoS)」の一種になります。
だからこそ、
「ループには必ず終わりがあるか?」
「条件と更新は正しく対応しているか?」
を意識して書くことは、
単なるバグ防止だけでなく、安全性の面でも重要です。
Day6 前半のまとめ
今日の前半で押さえておきたいポイント
for 文は「初期値・条件・更新」の3点セットで書く
while 文は「条件が true の間ずっと繰り返す」
回数が決まっているなら for、条件次第なら while が書きやすい
更新を忘れると while は無限ループになる
後半では、
少し実用的な繰り返し(合計を求める・条件付きでスキップするなど)や、
for / while の使い分けを、具体的な例と一緒に深掘りしていきます。
