4.ループ

学習目標

• while と for を使って処理を繰り返し実行できる
• ループの実行順序をトレースできる

---

「1 から 5 までの数を出力する」プログラムを console.log() だけで書くと、次のようになります。

loops.js

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

5回なら書けますが、1 から 1000 までだったらどうでしょうか。1000行の console.log() を書くのは現実的ではありません。

ループ（反復）は、条件が成り立つ間同じ処理を繰り返す仕組みです。ループを使えば、上のプログラムは数行で書けます。

1. while

while は条件式が true である間、ブロックの処理を繰り返します。

while (条件式) {
  繰り返す処理
}

1-1. 基本の書き方

導入の5行の console.log() では、出力する数だけが 1, 2, 3, 4, 5 と異なり、それ以外は同じでした。ループではこの「変わる部分」を変数 i で表します。

Info

i は index の頭文字で、ループの変数名としてよく使われます。

loops.js

let i = 1;

while (i <= 5) {
  console.log(i);
  i++;
}

1
2
3
4
5

Info

i++ は i = i + 1 の省略形です。

実行の流れを追います。

1回目

1. 条件式 i <= 5 を評価する。1 <= 5 なので true
2. ブロックが実行され、console.log(1) で 1 が出力される
3. i++ で i が 2 に更新される

2回目

1. 条件式 i <= 5 を評価する。2 <= 5 なので true
2. ブロックが実行され、console.log(2) で 2 が出力される
3. i++ で i が 3 に更新される

3回目以降も同じサイクルで進み、i が 6 になると i <= 5 が false になりループが終了します。

Warning

ループの中で条件式に関わる変数を更新し忘れると、条件式が永遠に true のままになりプログラムが停止しなくなります（無限ループ）。万が一そうなった場合は、ターミナルで Ctrl + C を押すと強制停止できます。

1-2. トレース

変数の値を1ステップずつ追うことをトレースと呼びます。1-1 ではステップを2回分追いましたが、トレース表にまとめるとループ全体の流れが一覧できます。

i	i <= 5	出力
1	true	1
2	true	2
3	true	3
4	true	4
5	true	5
6	false	—

最後の行で i が 6 になり、条件式が false になってループが終了していることが分かります。

Tip

ループの動きが分からなくなったら、上のような表を書いてトレースしてみてください。

1-3. 合計値の計算

1 から 10 までの合計を求める方法を考えます。合計を保持する変数 sum を用意し、1, 2, 3 と順に足していきます。

loops.js

let sum = 0;
sum = sum + 1;  // 1
sum = sum + 2;  // 3
sum = sum + 3;  // 6
sum = sum + 4;  // 10
sum = sum + 5;  // 15
// ... 10 まで続く

足す値が 1, 2, 3… と増えていくだけで、sum = sum + 値 の形は同じです。この繰り返しを while で書きます。

loops.js

let sum = 0;
let i = 1;

while (i <= 10) {
  sum = sum + i;
  i++;
}

console.log(sum); // 55

sum がどう変化するかをトレースします。

i	sum + i	sum
1	0 + 1	1
2	1 + 2	3
3	3 + 3	6
4	6 + 4	10
5	10 + 5	15
…	…	…
10	45 + 10	55

Warning

sum はループの外で let を使って宣言しています。もしループの中で let sum = 0; と書くと、繰り返しのたびに sum が新しく作り直されて 0 にリセットされてしまいます。ループをまたいで値を保持したい変数は、必ずループの前に宣言してください。

2. for

「1 から 5 まで繰り返す」のように、繰り返す回数が決まっている場合は for を使うとより簡潔に書けます。

for (初期化; 条件式; 更新) {
  繰り返す処理
}

2-1. 基本の書き方

先ほど while で書いた「1 から 5 まで出力する」プログラムを for で書き直します。

for

loops.js

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

while（同じ処理）

loops.js

let i = 1;

while (i <= 5) {
  console.log(i);
  i++;
}

どちらも出力は同じです。while では3行に分かれていた初期化（let i = 1）、条件式（i <= 5）、更新（i++）が、for では () の中に1行でまとまっています。

2-2. for の構造

for は () の中に3つの要素をセミコロンで区切って書きます。

要素	役割
初期化	ループの前に1回だけ実行される
条件式	繰り返しのたびに評価される。false でループを終了する
更新	ブロックの処理が終わるたびに実行される

実行の流れは while と同じです。「条件式を評価 → 処理を実行 → 更新」の繰り返しで、条件式が false になった時点でループから抜けます。

Info

for (let i = ...) のように let で宣言した変数は、その for のブロックの中でだけ使えます。ブロックを抜けると i は使えなくなります。

for (let i = 0; i < 5; i++) {
  console.log(i);
}
console.log(i); // エラー: i はブロックの外では使えない

2-3. i = 0 から始めるループ

プログラミングでは 0 から数え始めることが多いです。for ループも 0 から始める書き方がよく使われます。

loops.js

for (let i = 0; i < 5; i++) {
  console.log(i);
}

0
1
2
3
4

条件式が i <= 5 ではなく i < 5 になっている点に注目してください。「5 以下」ではなく「5 未満」なので、i は 0, 1, 2, 3, 4 の5回ループします。<= と < を間違えるとループ回数が1回ずれるので注意してください。

2-4. ループと条件分岐

ループの中で条件分岐を使うと、特定の条件を満たす数だけを処理できます。次のプログラムは、1 から 10 の中に偶数がいくつあるかを数えます。

loops.js

let count = 0;

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    count++;
  }
}

console.log(count); // 5

i % 2 === 0 は「i を 2 で割った余りが 0」、つまり偶数かどうかの判定です。偶数のときだけ count を 1 増やしています。

i	i % 2 === 0	count
1	false	0
2	true	1
3	false	1
4	true	2
5	false	2
…	…	…
10	true	5

3. 演習

演習: ループ