JavaScript

JavaScriptのループ処理とは？for・while・forEachの使い方を徹底解説

💡 この記事でわかること

  • ループ（繰り返し処理）とは何か
  • for / while / do...while の違い
  • 配列をまとめて処理できる forEach・for...of
  • 初心者がつまずきやすいポイント

ループ処理とは？

JavaScriptの学習で必須になるのが「繰り返し処理（ループ）」。
大量のデータや処理を一つずつ書かずに、自動で同じ処理を一定回数または条件を満たすまで繰り返す仕組みのことです。

図解イメージ（ループ処理の流れ）

[初期値] → [条件判定] → true → [処理] → [更新] → 条件判定…
                               ↓
                              false
                              終了

for文（基本のループ構文）

JavaScriptで最もよく使うループが for文 です。

for文の基本構文

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

📘 実例：1〜5まで表示する

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

🖥 結果

1
2
3
4
5

🔍 解説

  • 初期値：let i = 1（最初に1としてスタート）
  • 条件：i <= 5（5以下の間は繰り返す）
  • 更新：i++（ループのたびにiが1増える）

図解（for文）

i = 1 → 条件チェック → OK → 処理 → i++  
i = 2 → 条件チェック → OK → 処理 → i++  
i = 3 …  
i = 6 → 条件NG → ループ終了

while文（条件がtrueの間ずっと繰り返す）

while 文は、条件がtrueの間ずっと繰り返すループです。

📘 基本構文

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

📘 例：1〜5まで表示

let i = 1;

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

🔍 注意点

i++ を忘れると、条件が永遠にtrueのままになり
⚠ 無限ループに注意！

do...while文（最低1回は必ず実行）

do...while は 少なくとも1回は処理を実行したい時に使います。

📘 基本構文

do {
  // 必ず1回実行される
} while (条件);

📘 例

let i = 1;

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

配列ループは forEach が便利！

配列の要素を順番に処理したいなら forEach が最も簡単。

📘 基本構文

array.forEach(function(value, index) {
  // 処理
});

📘 例：配列を1つずつ表示

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

fruits.forEach(function(item) {
  console.log(item);
});

🖥 結果

りんご
みかん
バナナ

さらに短く（アロー関数）

fruits.forEach(item => console.log(item));

for...of（配列をもっと直感的にループ）

配列の値だけ取り出すなら for...of が便利！

📘 例

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

for (const fruit of fruits) {
  console.log(fruit);
}

🖥 結果

りんご
みかん
バナナ

オブジェクトのループには for...in

オブジェクトの「キー」を取得できます。

📘 例

const user = {
  name: "Taro",
  age: 20,
  country: "Japan"
};

for (const key in user) {
  console.log(key + ": " + user[key]);
}

🖥 結果

name: Taro
age: 20
country: Japan

初心者がつまずきやすいポイントまとめ

ミス原因対策
無限ループが起きる変数を更新していないi++ を忘れない
forEach 内で break が使えない仕様のためfor文を使う
index と value を混乱パラメータの順番ミス（value, index）の順

まとめ：ループ処理を使いこなせば自由度が一気に上がる！

今日のまとめ ✔

  • for は最も一般的なループ
  • while は条件がtrueの間続く
  • do...while は最低1回必ず実行
  • 配列には forEach と for...of が便利
  • オブジェクトには for...in

ループ処理は JavaScript の基礎であり、
ゲーム、アニメーション、DOM操作、API処理など、あらゆる領域で必須です。

-JavaScript