1. はじめに
JavaScriptでデータを扱う際、繰り返し処理は欠かせません。配列や文字列などのデータを順番に処理するには、さまざまなループ構文が用意されています。その中でも for…of文 はシンプルかつ強力な構文として注目されています。
この記事では、JavaScriptの for…of文 の基本から応用までを詳しく解説します。初心者が基本を理解しやすい例から始め、中級者や実務レベルの応用例まで幅広くカバーします。これを読めば、ループ処理で迷うことなく for…of文 を使いこなせるようになるでしょう。
2. JavaScriptのfor…of文とは？基本の使い方
2.1 for…of文の概要
JavaScriptの for…of文 は、反復可能（iterable）なオブジェクトをシンプルにループ処理できる構文です。配列や文字列、Map、Setなどのデータ構造を効率的に扱うために設計されています。
2.2 for…of文の基本構文
以下の構文を使って、反復可能なオブジェクトの要素を順に処理します。
for (const 要素 of 配列やオブジェクト) {
// 繰り返し処理
}この構文は、配列や文字列の各要素を簡単に取得する際に便利です。
2.3 実際のコード例
例1：配列の要素を順番に出力する
const fruits = ['りんご', 'バナナ', 'オレンジ'];
for (const fruit of fruits) {
console.log(fruit);
}実行結果：
りんご
バナナ
オレンジ 例2：文字列の各文字を出力する
const word = 'JavaScript';
for (const char of word) {
console.log(char);
}実行結果：
J
a
v
a
S
c
r
i
p
t 2.4 適用可能なデータ型
for…of文 は以下の反復可能オブジェクトに使用できます。
- 配列 (Array)
- 文字列 (String)
- Mapオブジェクト
- Setオブジェクト
- argumentsオブジェクト（関数の引数として渡されるオブジェクト）
- NodeListオブジェクト（HTML要素の集合）
注意: オブジェクトリテラルには直接適用できません（対策は後述）。
3. 他のループ構文との違いと比較
3.1 for…of文とfor…in文の違い
| 構文 | 用途 | 処理対象 | 特徴 |
|---|---|---|---|
| for…of | 値を反復 | 配列、文字列、Map、Setなどの反復可能オブジェクト | 各要素の値をシンプルに処理できる |
| for…in | プロパティキーを反復 | オブジェクトの列挙可能なプロパティ | キー名のみを取得。プロトタイププロパティも含む可能性あり |
例：for…in文の使用例
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
console.log(key); // a, b, c
}注意点：
for…in文はプロトタイプチェーンまで列挙してしまうため、特にオブジェクトのループでは注意が必要です。
3.2 for…of文とforEachメソッドの違い
| 構文 | 特徴 | 制御フロー |
|---|---|---|
| for…of | シンプルで任意の反復処理に適用可能 | breakやcontinueが使用可能 |
| forEach | 配列専用、コールバック関数が必要 | breakやcontinueが使用不可 |
例：forEachの使用例
const arr = [1, 2, 3];
arr.forEach(num => {
console.log(num);
});注意点：
forEachでは途中でループを終了できないため、制御フローが重要な処理では for…of文 が推奨されます。
4. 実践的な使用例と応用テクニック
4.1 配列のフィルタリング
以下は、偶数のみを出力する例です。
const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
if (num % 2 === 0) console.log(num); // 偶数のみ出力
}実行結果：
2
4 4.2 Mapのキーと値の取得
Mapオブジェクトを使ってキーと値を取得する例です。
const map = new Map([
['name', '太郎'],
['age', 25]
]);
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}実行結果：
name: 太郎
age: 25 4.3 非同期処理との組み合わせ
非同期処理をfor…of文で扱う例を示します。
const urls = ['url1', 'url2', 'url3'];
async function fetchData() {
for (const url of urls) {
const response = await fetch(url);
const data = await response.json();
console.log(data);
}
}
fetchData();この例では、各APIリクエストが順番に実行されるため、実行順序を保ちながらデータを取得できます。
5. 注意点とトラブルシューティング
5.1 オブジェクトでエラーが発生した場合
for…of文はオブジェクトリテラルでは使用できません。代わりに Object.entries() を利用します。
例：Object.entries()を使った処理
const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
console.log(key, value);
}実行結果：
a 1
b 2 この方法を使えば、オブジェクトのキーと値を効率的に処理できます。
5.2 パフォーマンスへの配慮
for…of文は通常の処理には十分なパフォーマンスを提供しますが、大規模なデータセットでは注意が必要です。必要に応じて、インデックスベースのforループやwhileループの使用を検討しましょう。
例：インデックスベースのforループ
const largeArray = Array(1000000).fill(1);
for (let i = 0; i < largeArray.length; i++) {
// パフォーマンスを優先した処理
console.log(largeArray[i]);
}5.3 エラーハンドリングの追加
非同期処理とfor…of文を組み合わせる場合、エラーハンドリングを忘れずに行いましょう。
例：try…catchでエラーを処理
const urls = ['url1', 'url2', 'url3'];
async function fetchData() {
for (const url of urls) {
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error('エラーが発生しました:', error);
}
}
}
fetchData();6. FAQセクション
Q1: for…of文はすべてのブラウザで動作しますか？
A1:
for…of文は ES6（ECMAScript 2015） で導入された構文です。最新のブラウザではサポートされていますが、Internet Explorer では動作しません。
対応ブラウザ一覧：
- Google Chrome 38以降
- Firefox 36以降
- Safari 7.1以降
- Edge 12以降
古いブラウザに対応する場合は、Babel を使用してトランスパイルするか、他のループ構文を利用しましょう。
Q2: for…of文で配列のインデックスを取得するには？
A2:
for…of文ではインデックスを直接取得できませんが、entries()メソッド を使うことでインデックスと値を同時に取得できます。
例：
const fruits = ['りんご', 'バナナ', 'オレンジ'];
for (const [index, fruit] of fruits.entries()) {
console.log(index, fruit);
}実行結果：
0 りんご
1 バナナ
2 オレンジ Q3: for…of文はオブジェクトリテラルに使えますか？
A3:
いいえ、for…of文は反復可能オブジェクト専用です。オブジェクトリテラルは適用外ですが、Object.entries() を使えばキーと値を反復できます。
例：
const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
console.log(key, value);
}実行結果：
a 1
b 2 Q4: 非同期処理でfor…of文は使えますか？
A4:
はい、非同期処理は async/await と組み合わせて利用できます。
例：
const urls = ['url1', 'url2', 'url3'];
async function fetchData() {
for (const url of urls) {
const response = await fetch(url);
const data = await response.json();
console.log(data);
}
}
fetchData();Q5: for…of文とforEachの違いは何ですか？
A5:
以下の表で違いをまとめます。
| 特徴 | for…of文 | forEachメソッド |
|---|---|---|
| 対象データ | 配列、文字列、Map、Setなど反復可能オブジェクト | 配列のみ |
| コールバック関数 | 不要 | 必要 |
| break/continue | 使用可能 | 使用不可 |
| 非同期処理 | async/awaitとの併用が可能 | async/awaitを直接サポートしない |
7. まとめ
この記事では、JavaScriptの for…of文 について以下のポイントを解説しました。
- 基本構文と使用例 を理解し、配列や文字列の反復処理に活用する方法
- 他のループ構文（for…in、forEach）との 違いや使い分け
- 応用例 としてMapやSetオブジェクト、非同期処理との組み合わせを紹介
- 実践で役立つ FAQ を通じて、よくある疑問を解消
7.1 for…of文のメリット
- シンプルで可読性が高い
- 反復可能オブジェクトに対して柔軟に対応
- break や continue が使用できるため、ループの制御が簡単
8. 次に学ぶべきステップ
for…of文 を習得したら、次のステップとして以下の機能を学ぶことをおすすめします。
- スプレッド構文（…）
- 配列やオブジェクトを展開・結合する便利な機能。
- デストラクチャリング代入
- 配列やオブジェクトから値を簡単に取り出すテクニック。
- Promiseとasync/awaitの詳細
- 非同期処理の効率的な書き方を学びましょう。
これらを組み合わせることで、より高度なJavaScriptプログラムを構築できるようになります。
最後に
この記事はJavaScriptの for…of文 の基本から応用までを網羅し、初心者から実践者まで役立つ内容を提供しました。
次のステップへのアクション例：
- 自分のコードに for…of文 を実装して実験する。
- 配列やMap、Setを使った処理を試して理解を深める。
- より高度なES6の機能に挑戦して、スキルアップを図る。