---
type: learn
language: javascript
slug: array/loop
title: "配列を繰り返す — for / for...of / forEach"
title_tag: "JavaScript 配列の繰り返し — for と for...of と forEach"
summary: >
  配列の要素を1つずつ処理する3つの書き方を、違いが分かる形で比べます。
  途中で抜けられるか、添字が使えるか、非同期で待てるか。選ぶ基準まで実行して確かめます。
description: >
  for と for...of と forEach の違いを、途中で抜けられるか、添字が要るか、非同期を待てるかで比べます。それぞれどの場面で選ぶべきかを実行しながら確かめます。
status: published
difficulty: 2
minutes: 10

versions:
  verified: "Node 22.22.3"
  since: "ES6"
  deprecated: null
  removed: null

sources:
  - title: "The for Statement — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-for-statement"
  - title: "The for-in and for-of Statements — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-for-in-and-for-of-statements"
  - title: "Array.prototype.forEach — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-array.prototype.foreach"

terms: [ループ, イテレータ, コールバック関数, break, continue]

links:
  prev: javascript/learn/array/basics
  next: javascript/learn/array/transform
  related:
    - javascript/reference/array/map

content_updated_at: 2026-09-07
published_at: 2026-09-07
---

[前回](/ja/javascript/learn/array/basics/)は、配列を作って[type:添字]で取り出しました。
今回は[key:全部の要素を順番に処理する]方法です。

**結論から言うと、ふだんは `for...of` を使ってください。** 理由はこのあと説明します。

```js run
const fruits = ['りんご', 'みかん', 'ぶどう'];

for (const fruit of fruits) {
  console.log(fruit);
}
```
```output
りんご
みかん
ぶどう
```

上のコードは書き換えて実行できます。`fruits` に要素を足してみてください。

## 3つの書き方

同じことを3通りで書きます。

```js run
const fruits = ['りんご', 'みかん', 'ぶどう'];

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

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

fruits.forEach((fruit) => {
  console.log('forEach   :', fruit);
});
```
```output
for       : りんご
for       : みかん
for       : ぶどう
for...of  : りんご
for...of  : みかん
for...of  : ぶどう
forEach   : りんご
forEach   : みかん
forEach   : ぶどう
```

出力は同じです。**違うのは書き心地と、できることです。**

| | 添字が使えるか | 途中で抜けられるか | `await` で待てるか |
|---|---|---|---|
| `for` | [em:使える] | [em:抜けられる] | [em:待てる] |
| `for...of` | 別に用意すれば使える | [em:抜けられる] | [em:待てる] |
| `forEach()` | [em:使える]（第2引数） | [bad:抜けられない] | [bad:待てない] |

## 途中で抜ける

条件に合ったところで止めたいことがあります。`break` を使います。

```js run
const nums = [1, 5, 8, 12, 3];

for (const n of nums) {
  if (n > 10) {
    console.log('見つけた:', n);
    break;
  }
  console.log('見ている:', n);
}
```
```output
見ている: 1
見ている: 5
見ている: 8
見つけた: 12
```

`12` を見つけたところで止まったので、最後の `3` は見ていません。

その回だけ飛ばしたいときは `continue` です。

```js run
const nums = [1, 2, 3, 4, 5];

for (const n of nums) {
  if (n % 2 === 0) continue;
  console.log(n);
}
```
```output
1
3
5
```

## forEach は途中で抜けられない

**ここが `forEach()` のいちばん大きな制限です。**

```js bad
const nums = [1, 5, 8, 12, 3];

nums.forEach((n) => {
  if (n > 10) return;
  console.log(n);
});
```
```output
1
5
8
3
```

`return` は[key:そのコールバック関数から抜けるだけ]で、繰り返し自体は止まりません。
`12` は飛ばされましたが、そのあとの `3` は[bad:出てしまいました]。

`forEach()` の中に `break` は書けません。書くと構文エラーになります。

**途中で抜けたいなら `for...of` を使ってください。**

## 添字も欲しいとき

`for...of` だけでは添字が取れません。`entries()` を使うと[key:添字と値の両方]が取れます。

```js run
const fruits = ['りんご', 'みかん', 'ぶどう'];

for (const [i, fruit] of fruits.entries()) {
  console.log(i, fruit);
}
```
```output
0 りんご
1 みかん
2 ぶどう
```

`forEach()` は第2引数で受け取れます。

```js run
const fruits = ['りんご', 'みかん', 'ぶどう'];

fruits.forEach((fruit, i) => {
  console.log(i, fruit);
});
```
```output
0 りんご
1 みかん
2 ぶどう
```

## 待つ処理では forEach を使わない

時間のかかる処理を[key:順番に待ちながら]回したいとき、`forEach()` では待てません。

```js bad
const ids = [1, 2, 3];

const load = async (id) => `データ${id}`;

ids.forEach(async (id) => {
  const data = await load(id);
  console.log(data);
});

console.log('ここが先に出てしまう');
```
```output
ここが先に出てしまう
データ1
データ2
データ3
```

`forEach()` は[bad:コールバック関数の中の await を待ちません]。
先へ進んでしまい、順序が崩れます。

`for...of` なら待てます。

```js run
const ids = [1, 2, 3];

const load = async (id) => `データ${id}`;

for (const id of ids) {
  const data = await load(id);
  console.log(data);
}

console.log('全部終わってから出る');
```
```output
データ1
データ2
データ3
全部終わってから出る
```

[dim:このページの実行環境では、コードの一番外側でも await が書けます。]

## for...in を配列に使わない

名前が似ていますが、`for...in` は[key:オブジェクトのキー]を回すものです。
配列に使うと、添字が[bad:文字列]で来ます。

```js bad
const fruits = ['りんご', 'みかん'];

for (const i of fruits.keys()) {
  console.log(typeof i, i);
}

for (const i in fruits) {
  console.log(typeof i, i);
}
```
```output
number 0
number 1
string 0
string 1
```

`'0' + 1` は `'01'` になるので、計算に使うと[bad:静かに壊れます]。
**配列には `for...of` を使ってください。**

## まとめ

- ふだんは **`for...of`**。読みやすく、`break` も `await` も使える
- 添字が要るときは `entries()` を足す
- `forEach()` は[bad:途中で抜けられず]、[bad:await も待てない]
- `for...in` は[bad:配列向けではない]

## 次に学ぶ

繰り返しながら[key:新しい配列を作る]書き方を学びます。
`map()` と `filter()` を使うと、ここまで書いてきたループの多くが[em:1行]になります。

→ [第3回: 配列を変換する・絞り込む](/ja/javascript/learn/array/transform/)