【サクッと解説】JavaScript for・while・for…of・for…inの違いと使い分け

2025年8月5日

1. 本記事のポイント

JavaScriptにおける代表的な繰り返し構文の違いと用途を整理
for / while / for…of / for…in の使い分け指針を明示
実行可能なコード付きで構文ごとの特徴を比較

2. JavaScriptの繰り返し構文とは？

JavaScriptでは、繰り返し処理（ループ）を記述する構文として複数の選択肢があります。主なものに、for文、while文、for...of文、for...in文があります。

これらはすべて「反復処理」を目的とした構文ですが、対象とするデータ構造やループの制御方法、処理効率に違いがあるため、適切な使い分けが重要です。

たとえば、インデックス指定が必要な場合はfor、配列要素の順次処理にはfor...of、オブジェクトのプロパティ列挙にはfor...inが向いています。

本記事では、それぞれの構文の挙動と代表的な用途を比較しながら、実務における使い分けの指針を解説します。

3. 詳細解説

インデックスベースでループ：`for`文

for文は、指定した回数だけループ処理を行う基本的な構文です。カウンタ変数を使って、添字を明示的に操作できます。

JavaScript

// 配列の要素をインデックス指定で処理
const items = ['apple', 'banana', 'orange'];
for (let i = 0; i < items.length; i++) {
  console.log(i + ': ' + items[i]);
}
// 出力: 0: apple, 1: banana, 2: orange

// 配列の要素をインデックス指定で処理
const items = ['apple', 'banana', 'orange'];
for (let i = 0; i < items.length; i++) {
  console.log(i + ': ' + items[i]);
}
// 出力: 0: apple, 1: banana, 2: orange

条件式と増減処理を柔軟に設定可能
添字が必要な場合や逆順処理にも適している

条件を満たす限り繰り返す：`while`文

while文は、条件が真である限り繰り返します。回数が決まっていない処理に適しています。

JavaScript

// ランダムな数値が3になるまで繰り返す
let num;
do {
  num = Math.floor(Math.random() * 5);
  console.log('試行:', num);
} while (num !== 3);

// ランダムな数値が3になるまで繰り返す
let num;
do {
  num = Math.floor(Math.random() * 5);
  console.log('試行:', num);
} while (num !== 3);

実行条件に応じて動的に繰り返す処理に適している
条件を満たさなければ一度も実行されない（do…whileを除く）

配列など反復可能オブジェクトに：`for...of`文

for...of文は、反復可能（iterable）なオブジェクト（例：配列、文字列、Setなど）に対して順次処理を行います。

JavaScript

// 配列要素の内容を1つずつ出力
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
  console.log(color);
}
// 出力: red, green, blue

// 配列要素の内容を1つずつ出力
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
  console.log(color);
}
// 出力: red, green, blue

インデックス操作が不要な場合に簡潔
配列やSetなど、順序を保ったデータの処理に有用

オブジェクトのキー列挙に：`for...in`文

for...in文は、オブジェクトの列挙可能なプロパティ名（キー）に対してループ処理を行います。

JavaScript

// オブジェクトのプロパティと値を列挙
const user = { name: 'Taro', age: 30 };
for (const key in user) {
  console.log(key + ': ' + user[key]);
}
// 出力: name: Taro, age: 30

// オブジェクトのプロパティと値を列挙
const user = { name: 'Taro', age: 30 };
for (const key in user) {
  console.log(key + ': ' + user[key]);
}
// 出力: name: Taro, age: 30

配列に対して使うと順序が保証されず注意が必要
hasOwnPropertyで継承プロパティを除外することが推奨

4. よくあるミス・誤解・落とし穴

for...inは配列の反復に不向きです。数値順が保証されないため、意図しない順序になる可能性があります。
for...ofはオブジェクト（plain object）には使えません。エラーになるか、TypeErrorが発生します。
whileループは、条件が常に真だと無限ループになります。終了条件を明示することが重要です。
オブジェクトを列挙する場合、for...inは継承プロパティも含むため、Object.hasOwn()またはObject.prototype.hasOwnProperty.call()と組み合わせる必要があります。