JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript:JavaScript文法の基礎 - Day6:繰り返し

JavaScript JavaScript
スポンサーリンク

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;
JavaScript

1 回ループが終わるたびに、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
}
JavaScript
for (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;
}
JavaScript

for と 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;
}
JavaScript

for 文は「初期値・条件・更新」がひとまとめになっているので、
更新の書き忘れが起きにくいですが、
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 の使い分けを、具体的な例と一緒に深掘りしていきます。

タイトルとURLをコピーしました