for文と配列の基本｜受講ログで最も再挑戦が多かった単元を、合計と絞り込みで理解する

for文と配列｜受講ログで最も再挑戦が多かった単元

変数、条件分岐と続けて、3つ目が繰り返しです。ここで難易度が一段上がります。

ナミノリの受講ログを見ると、それが数字に出ていました。

繰り返しは、ここまでで最も詰まる単元だった

ナミノリの無料講座は各レクチャーに確認テストがあり、何回目で合格したかが記録に残ります。これまでの3単元を並べます。

単元	完了した人	2回以上かかった人
データ型（型の種類）	20人	2人（10%）
変数と条件分岐	17人	6人（35%）
型変換（キャスト）	18人	12人（67%）
繰り返し	14人	11人（79%）

全レクチャーの平均は29.9%（完了887件中265件が2回以上）です。繰り返しの回は79%で、ここまでで最も高い数字でした。平均2.21回、最も多い人で6回かかっています。

一方で、「様々な繰り返しについて」（while や for...of など書き方の種類を扱う回）は21%でした。if文の記事と同じ形です。書き方の種類を覚えるところでは詰まらず、基本の回で詰まっています。

では基本の何が難しいのか。ログからは「どこ」までしか分かりませんが、繰り返しには変数と条件が同時に出てきます。回数を数える変数、続ける条件、配列の添字。変数だけ・条件だけのときには起きなかった組み合わせが、ここで一度に現れます。

※ 集計は2026年9月22日時点。完了したレクチャーのみが対象で、母数は14〜20人と小さい数字です。

まず配列から

配列は、値をまとめて1つの名前で扱うものです。

const prices = [10, 15, 20];
console.log(prices.length);
console.log(prices[0]);

結果は 3 と 10 です。

ここが最初のつまずきどころです。要素は3つあるのに、最初の添字は0。最後の要素は prices[2] で、prices[3] は存在しません。

console.log(prices[3]);

結果は undefined です。エラーにはなりません。存在しない場所を読んでも止まらないので、間違いに気づきにくいところです。

for文で合計を出す

const prices = [10, 15, 20];
let sum = 0;
for (let i = 0; i < prices.length; i++) {
  sum += prices[i];
}
console.log(sum);

結果は 45 です。

for (let i = 0; i < prices.length; i++) の3つの部分を分けて読みます。

部分	意味
let i = 0	0から始める（添字が0から始まるため）
i < prices.length	3未満の間つづける（<= にすると範囲外を読む）
i++	1つ進める

< を <= にすると prices[3] を読んでしまいます。 さきほど見たとおり結果は undefined で、数値に足すと NaN になり、合計が壊れます。if文の記事で扱った境界値テストが、ここでも効きます。

添字が要らないなら、もっと短く書ける

let sum = 0;
for (const price of prices) {
  sum += price;
}

結果は同じ 45 です。添字を使わないなら for...of のほうが安全です。i の書き間違いという失敗の余地が、そもそも無くなります。

件数を数える・絞り込む

条件に合うものだけを扱う場面は頻繁にあります。

const items = [
  { name: "A", price: 15 },
  { name: "B", price: 5 },
  { name: "C", price: 20 },
];

const expensive = items.filter((item) => item.price >= 10);
console.log(expensive.length);
console.log(expensive.map((item) => item.price));

結果は 2 と [15, 20] です。filter は条件に合うものだけを集め、map は各要素から欲しい値を取り出します。for文で同じことは書けますが、何をしたいのかが名前で分かるぶん、読み手にも自分にも伝わります。

空のときに何が起きるか

実務で必ず来るのが、配列が空の場合です。

console.log([].reduce((a, b) => a + b, 0));

結果は 0 です。最後の 0 が初期値で、これがあるから空でも答えが出ます。

初期値を省くとどうなるか。

[].reduce((a, b) => a + b);

TypeError: Reduce of empty array with no initial value になります。空の配列は例外ではなく、通常どおり起こります。 検索結果が0件、カートが空、まだ1件も登録がない。どれも日常的な状態です。

自分で確かめる3つ

ブラウザの開発者ツール（F12キー）のコンソールで試してください。

1. for文の < を <= に変えると、合計はいくつになるか。なぜそうなるか
2. prices[3] は何を返すか。エラーにならないのはなぜ困るのか
3. 空の配列で reduce の初期値を省くと何が起きるか

予測してから実行してください。無限ループになる書き方（条件が永久に成り立つもの）は試さないでください。 ブラウザが操作を受け付けなくなります。

まとめ

• 繰り返しは受講ログ上最も再挑戦が多い単元（79%。平均29.9%）
• 書き方の種類を扱う回は21%。詰まるのは基本の回で、変数と条件が同時に出てくるため
• 添字は0から始まる。prices[3] は undefined でエラーにならない
• < と <= の違いが範囲外アクセスを生む。境界値テストで気づける
• 添字が要らないなら for...of。失敗の余地が減る
• 空の配列は必ず来る。reduce には初期値を渡す

変数・条件分岐・繰り返しを順番に確認するなら、プログラミング入門講座が5本構成です。各回に確認テストがあるので、自分がどこで止まったかが記録に残ります。前の単元に戻るなら変数とデータ型とif文があります。