JavaScriptの繰り返し処理（for文）とは？基本から解説

JavaScriptでは、同じ処理を何度も実行する場面がよくあります。
例えば、配列のデータを順番に処理する場合や、一定回数処理を繰り返す場合です。

このような処理を効率よく行うために使われるのが**繰り返し処理（ループ処理）**です。

その中でも最も基本となるのがfor文です。
for文を理解すると、配列操作・データ処理・DOM操作など、多くの場面で応用できるようになります。

この記事では、

• JavaScriptの繰り返し処理とは何か
• for文の基本構造
• 実際のコード例
• break / continue
• 配列との組み合わせ

までを、基礎から丁寧に解説します。

JavaScriptの基本構造をまだ理解していない場合は、先に以下の記事を読むと理解がスムーズです。

関連記事
→ JavaScriptの役割と基本構造
→ JavaScriptの変数とは？基本から解説

繰り返し処理（ループ処理）とは

**繰り返し処理（ループ処理）**とは、同じ処理を複数回実行する仕組みです。

例えば、次のような処理があるとします。

• 数字を1〜5まで表示する
• 配列のデータを順番に処理する
• 条件を満たすまで処理を続ける

このような処理を1行ずつ書くと、次のようになります。

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

しかし、繰り返し処理を使うと次のように書くことができます。

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

このように、同じ処理を効率よく実行できるのが繰り返し処理の特徴です。

JavaScriptの主な繰り返し処理

JavaScriptには複数の繰り返し処理があります。

主なものは次の通りです。

• for文
• while文
• do…while文
• for…of
• for…in

その中でも、最も基本的でよく使われるのがfor文です。

for文とは

for文とは、指定した条件を満たす間、処理を繰り返す構文です。

基本構造は次の通りです。

for (初期化; 条件式; 更新処理) {
  実行する処理
}

それぞれの意味は次の通りです。

for文の基本例

次のコードは、1〜5までの数字を表示する例です。

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

実行結果

1
2
3
4
5

処理の流れは次の通りです。

1. let i = 1 で変数を初期化
2. i <= 5 を判定
3. trueなら処理を実行
4. i++で値を更新
5. 再び条件を判定

この流れが繰り返されます。

for文の処理の流れ

for文の処理は次の順序で実行されます。

① 初期化
② 条件判定
③ 処理実行
④ 更新処理
⑤ 条件判定へ戻る

図で表すと次のような流れです。

初期化
  ↓
条件判定 → false → 終了
  ↓true
処理実行
  ↓
更新処理
  ↓
条件判定へ戻る

配列とfor文

for文は配列の処理でよく使われます。

配列については以下の記事で詳しく解説しています。

関連記事
→ JavaScriptの配列とは？基本から解説

例えば、配列の中身を順番に表示する場合です。

const fruits = ["apple", "banana", "orange"];

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

実行結果

apple
banana
orange

ここで重要なのが次の部分です。

fruits.length

これは配列の要素数を取得するプロパティです。

break文（ループを終了する）

break文は、ループを途中で終了するための命令です。

for (let i = 1; i <= 10; i++) {

  if (i === 5) {
    break;
  }

  console.log(i);
}

実行結果

1
2
3
4

i === 5になった時点でループが終了します。

continue文（処理をスキップする）

continue文は、現在の処理をスキップして次のループに進む命令です。

for (let i = 1; i <= 5; i++) {

  if (i === 3) {
    continue;
  }

  console.log(i);
}

実行結果

1
2
4
5

3だけがスキップされます。

for文を使う場面

for文は次のような場面でよく使われます。

配列の処理

for (let i = 0; i < array.length; i++) {
  処理
}

DOM操作

const items = document.querySelectorAll(".item");

for (let i = 0; i < items.length; i++) {
  items[i].style.color = "red";
}

DOM操作については以下の記事で詳しく解説しています。

関連記事
→ JavaScriptの役割と基本構造

for文を理解するポイント

for文を理解するためのポイントは次の3つです。

1. カウンター変数

let i

繰り返し回数を管理する変数です。

2. 条件式

i < 10

この条件がtrueの間、ループが続きます。

3. 更新処理

i++

1回の処理ごとに値を更新します。

まとめ

JavaScriptのfor文は、繰り返し処理を行う基本的な構文です。

ポイントを整理します。

• for文は繰り返し処理を行う構文
• 初期化・条件式・更新処理で構成される
• 配列処理で特によく使われる
• breakでループ終了
• continueで処理スキップ

JavaScriptでは、配列やオブジェクト、DOM操作などで繰り返し処理が頻繁に登場します。
for文を理解しておくと、JavaScriptのコードをより効率的に書けるようになります。

関連記事

• JavaScriptの役割と基本構造
• JavaScriptの基本構造とは？仕組みから理解する
• JavaScriptの変数とは？基本から解説
• JavaScriptのデータ型とは？基本から解説
• JavaScriptの配列とは？基本から解説