for...of文

for...of文は、反復可能（iterable）なオブジェクトを巡回するためのループ構文です。
JavaScript においては、Iterable Protocol（イテラブルプロトコル）に準拠したオブジェクトがイテラブルオブジェクトと見なされます。

for...of文を使って反復可能なイテラブルオブジェクトの概念と、for...of文の使い方、および注意点について解説します。

for...of文とイテラブルオブジェクトの概要

for...of文は、ECMAScript 2015（ES6）から導入されたJavaScriptのループ構文の一つです。
この構文は、DOMコレクションオブジェクトの各要素に対して繰り返し処理を行うのに非常に便利な方法を提供します。

DOMコレクションオブジェクトであるHTMLCollectionとNodeListは、いずれも配列のようなオブジェクト（類似配列オブジェクト）であり、かつイテラブルオブジェクトでもあります。

このとき、「イテラブルオブジェクト」という概念が重要な役割を果たします。

イテラブルオブジェクトとは何か？

for...of文は、イテラブルオブジェクトの反復処理のために設計されたものです。
for...of文を理解し使用するためには、何よりもまずイテラブルオブジェクトの概念を理解しておく必要があります。

イテラブルプロトコル（Iterable Protocol）

ES6以前は、反復可能なオブジェクトに対して統一された規約が存在しませんでした。
例えば、配列や文字列、類似配列オブジェクト、DOMコレクションなどは、それぞれ独自のデータ構造を持ち、for文、for...in文、配列の反復処理のためのメソッドであるforEach()関数など、それぞれの方法で繰り返し処理を行っていました。

そこで、JavaScriptは反復可能なオブジェクトに対して統一された規約を作りました。この規約が「イテラブルプロトコル」です。イテラブルプロトコルとは、JavaScriptにおいてイテラブルオブジェクトを定義し、利用するためのルールを指します。イテラブルオブジェクトとは、このイテラブルプロトコルを遵守したオブジェクトのことです。

イテラブル（iterable）オブジェクトとは、オブジェクト内部に特別なメソッドであるSymbol.iteratorが定義されており、そのメソッドがイテレーター（iterator）を返すオブジェクトのことを指します。

イテラブルオブジェクトとは、反復可能なデータコレクションのことであり、JavaScriptにおいてイテラブルオブジェクトを定義し利用するための規約（プロトコル）に従って動作します。

イテラブルプロトコルは、Symbol.iteratorメソッドとイテレーター（iterator）オブジェクト、この二つの主要な要素で構成されています。これがfor...of文を使用できる基盤となっています。

複雑に考えがちですが、内部構造や仕組みについてはここでは一旦置いておきます。しかし、重要なポイントがあります。

イテラブルオブジェクトはfor...of文で統一的に反復処理が可能です。この点が重要です。

イテラブルオブジェクトの種類

  • 配列：配列の各要素を順に処理して操作することができます。
  • 文字列：文字列の各文字にアクセスして操作できます。
  • DOMコレクションオブジェクトであるHTMLCollectionおよびNodeList
  • MapとSet：キーと値のペアを持つMapや、ユニークな値のみを持つSetを反復処理できます。

注意してください！
オブジェクトリテラルやクラスはイテラブルオブジェクトではありません。

for...of文を使用すると、イテラブルオブジェクトを反復処理して各要素にアクセスし、データを操作することができます。

for...of文の使い方

for...of文は、JavaScriptにおいてイテラブルオブジェクトを反復処理するためのループ構文です。

基本文法と動作原理

for...of文の基本文法は次の通りです。

JavaScript：構文 
for (variable of iterable) {
    // 繰り返し実行するコード
}
  • variable：ループ内で現在反復処理中の要素を格納する変数名を指定します。この変数はループの各反復で更新され、各要素に対する操作に使用されます。
  • iterable：反復処理したいイテラブルオブジェクトです。配列、文字列、Map、Set、NodeListなど、さまざまなオブジェクトを反復処理できます。

例を通して理解を深めましょう。

JavaScript 
const iterable = [1, 2, 3, 4, 5]; // 配列を例として使用

for (const item of iterable) {
    console.log(item);
}
コンソールに出力された表示例

上記のコードでは、itemが各反復ごとに配列iterableの要素に更新され、console.log(item)のコードが実行されます。その結果、配列の各要素が出力されます。

さらに詳しく見ていきましょう。

JavaScript 
const iterable = "Hello"; // 文字列を例として使用

for (const char of iterable) {
    console.log(char);
}
コンソールに出力された表示例

今回は文字列をイテラブルとして使用し、文字列の各文字にアクセスして出力します。

DOMコレクションであるNodeListやHTMLCollectionもイテラブルとして使用でき、同様の方法で要素にアクセスすることが可能です。

HTML 
<div></div>
<div></div>
<div></div>
<div></div>
JavaScript 
const elements = document.querySelectorAll("div"); // NodeList

for (const element of elements) {
    console.log(element);
}
コンソールに出力された表示例

このように、for...of文はさまざまなイテラブルオブジェクトを反復処理し、各要素にアクセスして操作を行うために使用されます。for...of文は内部的にイテレータープロトコルを利用して反復処理を行うため、ユーザー定義のイテラブルオブジェクトにも適用可能です。

for...of文を使用する際の注意点

  1. 配列のインデックス情報の欠落
  2. オブジェクトリテラルには使用できません：イテラブルオブジェクトではありません

配列のインデックス情報の欠落

for...of文は、配列の要素にアクセスするための反復変数のみを提供します。

配列のインデックスに直接アクセスする方法がないため、インデックス情報が必要な場合は、for...of文よりも伝統的なfor...in文や、配列の反復メソッドであるforEach()関数を使用することをおすすめします。

JavaScript 
const myArray = [10, 20, 30, 40, 50];

// "for...of"文で配列を反復処理（インデックス情報は含まれません）
for (const item of myArray) {
    console.log(item); // 配列の要素を出力
}

// "for...in"文で配列を反復処理（インデックス情報を含みます）
for (const index in myArray) {
    console.log(index, myArray[index]); // インデックスと配列の要素を出力
}

// "forEach"関数で配列を反復処理（インデックス情報は含まれません）
myArray.forEach((item) => {
    console.log(item); // 配列の要素を出力
});

上記のコードでは、for...in文を使用すると、配列のインデックスと要素にアクセスできます。一方、forEach()関数は要素のみにアクセス可能です。for...of文は各要素へのアクセスのみ可能で、インデックス情報を直接取得することはできません。

オブジェクトリテラルには使用できません：イテラブルオブジェクトではありません

オブジェクトリテラルはイテラブルオブジェクトではありません！

for...of文はオブジェクトリテラルの反復処理には使用できません。オブジェクトリテラルはイテラブルオブジェクトではないためです。オブジェクトのプロパティを反復処理する場合は、for...in文のほうが適しています。

JavaScript 
const myObject = {
    a: 1,
    b: 2,
    c: 3
}

for (const prop of myObject) { // ここでエラーが発生します
    console.log(prop);
}
// TypeError: myObject is not iterable

正しい方法は、for...in文や、Object.keys()、Object.values()、Object.entries()メソッドを使用することです。

JavaScript 
for (const prop in myObject) {
    console.log(myObject[prop]);
}

for (const [key, value] of Object.entries(myObject)) {
    console.log(key, value);
}

仕様書

for...of 문에 대한 명세서
仕様書
for...of ECMAScript Language Specification
#sec-for-in-and-for-of-statements

ブラウザ互換性

for...of文のブラウザ対応
文
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
for...of 38 12 13 7

参考資料

関連項目