JavaScriptのfor..of構文をマスターしよう｜実例付き

（最終更新月：2023年12月）

✔この記事は以下の疑問を持つ方に最適です

✔当記事であなたに伝える内容

• for…of文の基礎知識
• for…of文の正しい構文と使い方
• for…of文を使った実践例

当記事では、JavaScriptのfor…of文の基本概念からスタートし、その構文の規則性を紐解きます。

最後まで読むことで、あなたもfor…of文を使ったコーディングに自信を持てるようになるはずです。

ぜひご覧ください。

JavaScriptにおけるfor…ofループの基礎

ここでは、for...of ループの基本情報についてお伝えしていきます。

for...of ループの理解は、JavaScriptでの効率的なデータ処理に必須です。

• 基本構文の理解
• for…ofと他のループとの比較
• for…ofの利点と制限

基本構文の理解

for...of ループは、以下のようなシンプルな構文を使用します。

for (const item of array) {
  // 処理をここで書く
}

ここで、arrayは配列やイテラブルなオブジェクトを指し、itemはその要素ひとつひとつを示します。

このループを使うことで、配列内の各要素に対しての処理ができるようになります。

for…ofと他のループとの比較

for...of ループは forEach や古い for ループと比較して、いくつかの違いがあります。

例えば、for...of ループは直感的で読みやすく、break や continue 文と組み合わせて使用できます。

対照的に forEach は break や continue を使うことができません。

for…ofの利点と制限

for...of ループの大きな利点の一つは、そのシンプルさと柔軟性にあります。

配列だけでなく、MapやSetなどのイテラブルオブジェクトに対しても適用可能です。

しかしながら、オブジェクトリテラルの直接の反復処理には使用できないという制限があります。

for…ofを体験しよう

次に、実際にコードを書きながら for...of ループの使い方を学んでいきましょう。

具体的な使用例を通じて、さらに理解を深めていきます。

• 実例で学ぶfor…of
• 簡単な配列の反復処理
• オブジェクトプロパティの反復処理

実例で学ぶfor…of

冒頭の基本構文を実際のコード例で見てみましょう。

配列 fruits があったときに、その要素をひとつずつコンソールに表示するには次のように書けます。

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

上記のコードは、apple、banana、cherryの順番でコンソールに出力します。

簡単な配列の反復処理

for...of ループは配列の反復処理に非常に適しています。

例えば、数値の配列があり、その各要素を二倍にしたい場合は以下のように記述しましょう。

const numbers = [1, 2, 3];
for (const number of numbers) {
  console.log(number * 2);
}

このループは各要素に対して乗算を行い、結果をコンソールに表示します。

オブジェクトプロパティの反復処理

直接オブジェクトのプロパティを for...of ループで処理することはできませんが、Object.keys や Object.entries を使用して間接的に反復することは可能です。

例えば、あるオブジェクトのキーと値をペアで出力するには次のようにします。

const user = {
  name: 'John Doe',
  age: 30
};
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

Object.entries(user) はオブジェクトのエントリーの配列を返し、それを for...of ループで走査します。

for…ofの活用法

このセクションでは for...of ループのもっと複雑な使い方をいくつか紹介します。

様々なデータ構造との組み合わせで、 for...of の力をフルに活用しましょう。

• 配列とfor…of
• 文字列への応用
• より進んだ配列操作
• MapとSetでfor…of
• その他のfor…ofの利用シーン

配列とfor…of

配列の中の配列（二次元配列）も for...of ループを使って簡単に処理できます。

例えば、行列として表される配列を次のように処理しましょう。

const matrix = [
  [1, 2],
  [3, 4],
  [5, 6]
];

for (const row of matrix) {
  for (const number of row) {
    console.log(number);
  }
}

このコードは、行列の各要素を行ごとに取り出し、さらに個別の数字をコンソールに表示します。

文字列への応用

for...of ループは文字列に対する反復処理にも使えます。

文字列はイテラブルなので、個々の文字を次のようにループさせましょう。

const greeting = "Hello, World!";
for (const char of greeting) {
  console.log(char);
}

このように、greeting に含まれる各文字がひとつずつコンソールに出力されます。

より進んだ配列操作

for...of ループを利用して配列内の要素に対する複雑な操作も簡潔に書けます。

例えば、特定の条件を満たす要素のみを抽出するフィルタリングの操作を考えてみましょう。

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = [];

for (const number of numbers) {
  if (number % 2 === 0) {
    evenNumbers.push(number);
  }
}
console.log(evenNumbers); // 出力: [2, 4, 6]

偶数のみを evenNumbers 配列に追加することで、フィルタリングしました。

MapとSetでfor…of

for...of ループは、Map や Set のような他のイテラブルオブジェクトにも対応しています。

たとえば、Map オブジェクトの各エントリをループする方法は次のとおりです。

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

このコードは Map オブジェクト内のすべてのキーと値のペアを出力します。

その他のfor…ofの利用シーン

for...of ループはまた、イテレータを明示的に実装しているカスタムオブジェクトについても使えます。

また、DOMの操作や非同期処理に関する API を使用するときに、反復可能な要素を処理するのに役立ちます。

for…ofの制御

反復処理の中でより細やかな制御を行う方法を学びます。

for...of ループの制御には、「早期終了」や、特定の条件でループをスキップさせる技術です。

• 早期終了のテクニック
• breakとcontinueの活用
• エラーハンドリングの組み込み

早期終了のテクニック

場合によっては、全ての要素をループする必要がないかもしれません。

そんなとき break 文を利用してループを途中で終了させられます。

例えば、最初に見つかった特定の要素を見つけた時点でループを停止したい場合、以下のようなコードが良いでしょう。

const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  if (number === 3) {
    console.log('Found:', number);
    break;
  }
}

このコードは 3 を見つけた瞬間に Found: 3 を表示してループを終了します。

breakとcontinueの活用

ループの制御には continue 文も有効です。

continue 文は、ループの現在の反復処理をスキップし、次の反復処理に移るときに使います。

例えば、偶数のみを処理したい場合には次のように記述してください。

const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  if (number % 2 !== 0) {
    continue;
  }
  console.log('Even:', number);
}

このコードは偶数のときのみ Even: に続いてその数値をコンソールに出力します。

エラーハンドリングの組み込み

for...of ループ内では、try...catch 構文を使用してエラーハンドリングをおこなえます。

やや進めた使い方ですが、ループ内で例外が発生しても処理を中断させずに対処できるでしょう。

以下に簡単な例を示します。

const numbers = [1, 2, 'oops', 4, 5];

for (const number of numbers) {
  try {
    if (typeof number !== 'number') {
      throw new Error('Not a number!');
    }
    console.log(number);
  } catch (e) {
    console.log(e.message);
  }
}

このコードは文字列 ‘oops’ でエラーを発生させ、Not a number! と処理を続けます。

ループ比較: for…of vs for…in

for...of と似た構文である for...in もJavascriptには存在しますが、これらは異なる用途に使われます。

それらの違いと各場面での適切な選択について詳しく見ていきましょう。

• 主な違いを理解する
• 注意 – for…inの罠
• 使用シーンに応じた選択基準

主な違いを理解する

for...of ループは値に対する反復処理に使用されるのに対し、for...in ループはオブジェクトのプロパティ（キー）に対しておこなわれます。

これは重要な違いで、次のような使用法です。

const object = { a: 1, b: 2, c: 3 };

for (const key in object) {
  console.log(key, object[key]);
}

この例では、a、b、c がそれぞれの値とともに出力されます。

注意 – for…inの罠

for...in ループを使う際にはいくつかの落とし穴があります。

例えば、配列に対して for...in を使うと、予期しないプロパティや配列のインデックスが出力されることがあります。

これは、for...in がオブジェクトの全ての列挙可能なプロパティをループするためです。

そのため、配列の反復処理では for...of を使用する方が好ましいでしょう。

使用シーンに応じた選択基準

どちらのループを使用するかは、あなたが処理したいデータの種類に大きく依存します。

for...of はイテラブルなオブジェクトに対して、for...in はオブジェクトのプロパティの探索に合わせて使い分けるべきでしょう。

まとめ

当記事では、JavaScriptの for...of ループについて学習してきました。

• この構文を使うことで、さまざまなデータ構造の反復処理を簡単で効率的におこなえる
• for...of ループは、各要素へのアクセスが簡単で、コードの可読性を高めるのに役立つ
• 常に for...of を使用するべきかどうかを考え、時には map や filter、reduce といった配列のメソッドを使った方がより宣言的なコードが書ける

また、エラーハンドリングを忘れずに、安全なコードを心がけましょう。

当記事で学んだことを元に、さらにJavaScriptの深い知識を育てて自分のプロジェクトに活かしてください。