JavaScript | レベル別練習問題：繰り返し（for / while / do…while）

今回は「繰り返し（ループ処理）」をテーマに、変数の状態を逐次追跡するステップ実行解説を紹介します。
初心者が「ループごとに変数がどう変化するか」を理解できるように丁寧に解説します。

練習問題：繰り返し（forループで合計計算）

let numbers = [3, 5, 7, 2, 8];
let sum = 0;

// 配列の合計値を計算
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

console.log(sum);

let numbers = [3, 5, 7, 2, 8];
let sum = 0;

// 配列の合計値を計算
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

console.log(sum);

出力

25

ステップ実行（逐次追跡）

最終状態

sum = 25

解説ポイント

1. ループ変数 i が 0 から numbers.length-1 まで変化
2. numbers[i] の値を順番に sum に加算
3. 各ステップで sum の前後状態を追うと、ループの動きを理解しやすい
4. 配列の長さが変わっても、ループの追跡手法は同じ

応用例：条件付きループ処理（偶数のみ合計）

let numbers = [3, 5, 7, 2, 8];
let sumEven = 0;

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        sumEven += numbers[i];
    }
}

console.log(sumEven);

let numbers = [3, 5, 7, 2, 8];
let sumEven = 0;

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        sumEven += numbers[i];
    }
}

console.log(sumEven);

出力

10

ステップ実行

最終状態

sumEven = 10

ポイントまとめ

• ループの中で条件分岐を組み合わせると処理の選択ができる
• 変数の前後状態を表に書くと、処理の流れが可視化できる
• 初心者は「どのループで何が加算されるか」を理解するのが重要