JavaScriptループ完全理解！初心者が挫折しない繰り返し処理の基礎

こんにちは、とまだです。

JavaScriptのループ処理って、最初は「なんだこれ？」って感じませんでしたか？

私も独学でプログラミングを始めた頃、for文の構文を見て「呪文みたい...」と思ったものです。実際、プログラミングスクールで教えていた時も、受講生の多くがループで立ち止まっていました。

でも大丈夫です。今回は、ループ処理を「日常生活の繰り返し作業」に例えながら、誰でも理解できるように解説していきます。

JavaScriptのループとは？毎日の習慣で理解する基本概念

ループ処理って、難しそうに聞こえますよね。

でも実は、私たちの日常生活にもループはたくさんあるんです。

例えば、朝の準備を思い出してください。

• 歯を磨く（上の歯→下の歯→奥歯...）
• 朝食を食べる（一口ずつ繰り返し）
• 通勤電車で駅を通過する（次の駅、また次の駅...）

これらはすべて「繰り返し処理」です。

JavaScriptのループも同じように、同じ処理を繰り返したい時に使います。

// 5回「おはよう」と表示したい場合

// ループを使わないと...
console.log("おはよう");
console.log("おはよう");
console.log("おはよう");
console.log("おはよう");
console.log("おはよう");

これを書くのは大変ですよね。100回だったらどうしましょう？

// ループを使えば1行で済む！
for (let i = 0; i < 5; i++) {
  console.log("おはよう");
}

たった3行で同じことができました。これがループの力です。

なぜループが必要なのか

「コピペすればいいじゃん」

そう思うかもしれません。

でも、プログラミングの世界ではDRY原則（Don't Repeat Yourself = 繰り返すな）という考え方があります。

例えば、ECサイトで商品一覧を表示する場合を考えてみましょう。

// 商品が3つの時（ループなし）
document.write("<div>商品1: りんご - 100円</div>");
document.write("<div>商品2: みかん - 80円</div>");
document.write("<div>商品3: バナナ - 120円</div>");

もし商品が1000個あったら？価格を変更したくなったら？

ループを使えば、データの数に関係なく対応できます。

const products = [
  { name: "りんご", price: 100 },
  { name: "みかん", price: 80 },
  { name: "バナナ", price: 120 }
];

// 商品の数だけ自動で繰り返す
products.forEach(product => {
  document.write(`<div>${product.name} - ${product.price}円</div>`);
});

データが増えても、コードを変更する必要がありません。これがループの本当の価値です。

JavaScriptの3大ループ：for、while、forEachの使い分け

JavaScriptには主に3つのループがあります。

それぞれに得意な場面があるので、使い分けを覚えましょう。

1. for文：回数が決まっている時の定番

for文は「〇回繰り返す」という時に使います。

// 基本構文
for (初期化; 条件; 更新) {
  // 繰り返したい処理
}

// 実例：1から10まで数える
for (let i = 1; i <= 10; i++) {
  console.log(i);
}

for文の3つの要素を、エレベーターに例えてみましょう。

• 初期化（let i = 1）：1階からスタート
• 条件（i <= 10）：10階まで行く
• 更新（i++）：1階ずつ上がる

この3つが揃って、エレベーターが動くイメージです。

2. while文：条件が満たされる限り続ける

while文は「〇〇である限り繰り返す」という時に使います。

// お腹が空いている限り食べ続ける
let hunger = 100; // 空腹度

while (hunger > 0) {
  console.log("もぐもぐ...");
  hunger -= 20; // 食べると空腹度が20減る
}

console.log("ごちそうさま！");

自動販売機でジュースを買う時をイメージしてください。

「お金が足りている間は、ボタンが押せる」という感じです。

3. forEach：配列の要素を1つずつ処理

forEachは配列専用のループです。

const fruits = ["りんご", "みかん", "バナナ"];

// 配列の中身を1つずつ取り出す
fruits.forEach(fruit => {
  console.log(`${fruit}が好きです`);
});

// 結果：
// りんごが好きです
// みかんが好きです
// バナナが好きです

お弁当箱の中身を1つずつ食べるイメージです。

全部食べ終わったら、自動的にループも終了します。

実践！JavaScriptループの基本パターン10選

ここからは、実際によく使うループのパターンを見ていきましょう。

パターン1：カウントアップ（1,2,3...）

// 1から5まで数える
for (let i = 1; i <= 5; i++) {
  console.log(`${i}番目`);
}

パターン2：カウントダウン（5,4,3...）

// 5から1までカウントダウン
for (let i = 5; i >= 1; i--) {
  console.log(`あと${i}秒`);
}
console.log("スタート！");

パターン3：偶数だけ処理する

// 1から10の偶数だけ表示
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(`${i}は偶数`);
  }
}

パターン4：配列の合計を計算

const scores = [80, 90, 75, 85, 95];
let total = 0;

scores.forEach(score => {
  total += score;
});

console.log(`合計点: ${total}`);
console.log(`平均点: ${total / scores.length}`);

パターン5：文字列の繰り返し

let star = "";

// ★を5個並べる
for (let i = 0; i < 5; i++) {
  star += "★";
}

console.log(star); // ★★★★★

パターン6：二重ループで表を作る

// 3×3の表を作る
for (let i = 1; i <= 3; i++) {
  let row = "";
  for (let j = 1; j <= 3; j++) {
    row += `[${i},${j}] `;
  }
  console.log(row);
}

// 結果：
// [1,1] [1,2] [1,3]
// [2,1] [2,2] [2,3]
// [3,1] [3,2] [3,3]

パターン7：条件に合うものだけ抽出

const numbers = [15, 28, 7, 42, 33, 19];
const over20 = [];

numbers.forEach(num => {
  if (num > 20) {
    over20.push(num);
  }
});

console.log("20より大きい数:", over20);
// 結果: [28, 42, 33]

パターン8：インデックスも使う

const colors = ["赤", "青", "黄"];

colors.forEach((color, index) => {
  console.log(`${index + 1}番目の色は${color}`);
});

// 結果：
// 1番目の色は赤
// 2番目の色は青
// 3番目の色は黄

パターン9：オブジェクトの配列を処理

const users = [
  { name: "田中", age: 25 },
  { name: "鈴木", age: 30 },
  { name: "佐藤", age: 28 }
];

users.forEach(user => {
  console.log(`${user.name}さんは${user.age}歳です`);
});

パターン10：breakで途中終了

// 50を超えたら終了
let sum = 0;

for (let i = 1; i <= 100; i++) {
  sum += i;
  if (sum > 50) {
    console.log(`${i}で合計が50を超えました`);
    break; // ループを抜ける
  }
}

初心者がつまずきやすい3つのポイントと解決法

ループ処理で多くの初心者がつまずくポイントがあります。

私も最初は同じところで悩みました。

1. 無限ループに陥る

// 危険！これは無限ループ
let i = 1;
while (i > 0) {
  console.log(i);
  // i++を忘れている！
}

解決法：必ず終了条件に近づく処理を入れましょう。

let i = 1;
while (i <= 5) {
  console.log(i);
  i++; // これで必ず終わる
}

2. オフバイワンエラー（1つずれる）

const array = ["A", "B", "C"];

// よくある間違い
for (let i = 1; i <= array.length; i++) {
  console.log(array[i]); // undefined が出る
}

配列のインデックスは0から始まることを忘れがちです。

解決法：0から始めて、length未満で終わる。

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

3. スコープの問題

for (let i = 0; i < 3; i++) {
  // ここでiが使える
}
// console.log(i); // エラー！iはループの外では使えない

解決法：変数のスコープを理解して、必要に応じて外で宣言する。

let lastIndex;

for (let i = 0; i < 3; i++) {
  lastIndex = i;
}

console.log(`最後のインデックス: ${lastIndex}`);

どのループを使えばいい？状況別の選び方ガイド

「結局、どれを使えばいいの？」

そんな疑問にお答えします。

for文を使うべき場面

• 回数が明確：「10回繰り返す」
• 数値の連番が必要：「1から100まで」
• 配列のインデックスが必要：「〇番目の要素」

// 九九の3の段
for (let i = 1; i <= 9; i++) {
  console.log(`3 × ${i} = ${3 * i}`);
}

while文を使うべき場面

• 終了条件が不明確：「ユーザーが止めるまで」
• 条件ベースの処理：「〇〇になるまで」
• 無限ループが必要：ゲームのメインループなど

// ランダムで6が出るまでサイコロを振る
let dice;
let count = 0;

while (dice !== 6) {
  dice = Math.floor(Math.random() * 6) + 1;
  count++;
  console.log(`${count}回目: ${dice}`);
}

forEachを使うべき場面

• 配列の全要素を処理：「全員に処理を適用」
• インデックスが不要：要素の値だけ使う
• コードの可読性重視：意図が明確

const tasks = ["企画", "設計", "実装", "テスト"];

tasks.forEach(task => {
  console.log(`□ ${task}`);
});

ループ処理を使った実践的な例：TODOリストを作ろう

最後に、実際のWebアプリでよく使うループの例を見てみましょう。

// TODOリストのデータ
const todos = [
  { id: 1, task: "JavaScriptの勉強", done: true },
  { id: 2, task: "買い物に行く", done: false },
  { id: 3, task: "部屋の掃除", done: false }
];

// 完了したタスクを数える
let completedCount = 0;

todos.forEach(todo => {
  if (todo.done) {
    completedCount++;
  }
});

console.log(`完了: ${completedCount}/${todos.length}`);

// HTMLに表示する
let html = "<ul>";

todos.forEach(todo => {
  const status = todo.done ? "✓" : "□";
  html += `<li>${status} ${todo.task}</li>`;
});

html += "</ul>";
document.body.innerHTML = html;

このように、ループは実際のアプリケーション開発で欠かせない技術です。

まとめ：ループをマスターして次のステップへ

JavaScriptのループについて、基礎から実践まで解説してきました。

重要なポイントをまとめると：

• for文：回数が決まっている時
• while文：条件で繰り返す時
• forEach：配列を処理する時

最初は構文が複雑に見えるかもしれません。

でも、日常生活の「繰り返し」と同じだと考えれば、きっと理解できるはずです。

もし「もっと体系的に学びたい」「練習問題で理解を深めたい」と思ったら、JavaScript基礎を1ヶ月で学習！初心者が確実に身につく学習法の記事も参考にしてみてください。

また、私が作成したLearning Nextでは、JavaScriptの基礎から応用まで、豊富な練習問題と一緒に学べるカリキュラムを用意しています。月額わずか2,000円程度で、JavaScriptだけでなくReactやTypeScriptなども学び放題です。

ループは配列やオブジェクトと組み合わせることで、さらに強力なツールになります。

一歩ずつ、着実に進んでいきましょう！