JavaScriptイテラブルオブジェクトの基礎と構造

JavaScriptイテラブルオブジェクト

JavaScriptでは、**イテラブルオブジェクト(Iterable Object)**は反復可能なオブジェクトを意味します。つまり、**反復文(for...of)**を通じて順次的にアクセス可能なオブジェクトを指します。イテラブルオブジェクトは、JavaScriptでデータを順次的に処理する際に非常に有用な概念です。

1. イテラブルオブジェクトの定義

イテラブルオブジェクトは、**Symbol.iterator**という固有のプロパティを持つオブジェクトです。このプロパティは、イテレーターを返す関数であり、このイテレーターは順次的に値を返す役割を担います。

2. イテラブルオブジェクトの構造

• イテラブル(Iterable): オブジェクトが Symbol.iterator メソッドを定義している場合、そのオブジェクトはイテラブルです。このメソッドは、イテレーター(iterator) というオブジェクトを返します。
• イテレーター(Iterator): このオブジェクトは next() メソッドを持っており、このメソッドは value と done プロパティで構成されたオブジェクトを返します。
  • value: 現在のイテラブルから返される値
  • done: 順次的に返す値がもうない場合 true、ある場合 false

3. イテラブルオブジェクトの例

最もよく使用されるイテラブルオブジェクトは 配列(Array) と 文字列(String) です。これらは基本的にイテラブルオブジェクトとして定義されており、for...of 文を使用して順次的にアクセスできます。

例: 配列

javascript

let arr = [1, 2, 3, 4, 5];

for (let value of arr) {
  console.log(value);  // 1, 2, 3, 4, 5
}

例: 文字列

javascript

let str = "Hello";

for (let char of str) {
  console.log(char);  // 'H', 'e', 'l', 'l', 'o'
}

4. Symbol.iterator メソッド

このメソッドはイテラブルオブジェクトで呼び出され、イテレーターを返します。イテレーターは next() メソッドを呼び出して各値を順次的に返します。この Symbol.iterator メソッドは主に内部的に使用されますが、直接実装することもできます。

例: イテラブルオブジェクトの直接実装

以下は Symbol.iterator を利用して独自のイテラブルオブジェクトを作成する例です。

javascript

let myIterable = {
  items: [1, 2, 3, 4, 5],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.items.length) {
          return { value: this.items[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for (let value of myIterable) {
  console.log(value);  // 1, 2, 3, 4, 5
}

この例では、myIterable オブジェクトは Symbol.iterator メソッドを実装して、next() メソッドを通じて配列の値を一つずつ返すイテラブルオブジェクトになります。

5. イテラブルオブジェクトでないもの

すべてのオブジェクトがイテラブルオブジェクトではありません。イテラブルオブジェクトは必ず Symbol.iterator メソッドを実装しなければならず、このメソッドが欠けているオブジェクトはイテラブルではありません。例えば、オブジェクト(Object) と 一般的な数値(Number) は基本的にイテラブルではありません。

例: イテラブルでないオブジェクト

javascript

let obj = { a: 1, b: 2 };

for (let value of obj) {  // エラー発生: objはイテラブルオブジェクトではない
  console.log(value);
}

6. for...of と for...in の違い

• for...of: この文法は イテラブルオブジェクト (配列、文字列、Map、Set など) の 値 を反復します。
• for...in: この文法はオブジェクトの キー を反復します。したがって、配列などのイテラブルオブジェクトで for...in を使用すると、配列のインデックスが返されます。

javascript

let arr = [10, 20, 30];

// for...ofは値にアクセス
for (let value of arr) {
  console.log(value);  // 10, 20, 30
}

// for...inはインデックスにアクセス
for (let index in arr) {
  console.log(index);  // 0, 1, 2
}

7. イテラブルオブジェクトとスプレッド演算子

スプレッド演算子 (...) はイテラブルオブジェクトを展開して配列または他のイテラブルに値を割り当てるのに役立ちます。

javascript

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];  // 既存の配列を展開して新しい配列を作成
console.log(newArr);  // [1, 2, 3, 4, 5]

8. イテラブルオブジェクトの例

よく使用されるイテラブルオブジェクトは以下の通りです:

• 配列(Array): 順次的にアクセス可能
• 文字列(String): 文字一つずつ順次的にアクセス
• MapとSet: for...of を通じてキー/値または要素を順次的にアクセス
• DOM NodeList: document.querySelectorAll() などで返されるNodeListもイテラブル

例: Mapイテラブル

javascript

let map = new Map();
map.set('a', 1);
map.set('b', 2);

for (let [key, value] of map) {
  console.log(key, value);  // 'a' 1, 'b' 2
}

例: Setイテラブル

javascript

let set = new Set([1, 2, 3, 4]);

for (let value of set) {
  console.log(value);  // 1, 2, 3, 4
}

9. イテラブルとジェネレーター(Generator)

ジェネレーターはイテラブルオブジェクトを生成する特殊な関数です。ジェネレーター関数は function* キーワードを使用して定義され、yield キーワードを使用して値を返します。ジェネレーター関数は実行中断と、値の逐次的な返却の特性を持っています。

javascript

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

let gen = myGenerator();
for (let value of gen) {
  console.log(value);  // 1, 2, 3
}

結論

JavaScriptでは イテラブルオブジェクト はデータの反復に重要な役割を果たします。Symbol.iterator と next() メソッドを理解し、活用することで、より強力で柔軟なデータ処理方法を使用できます。イテラブルは配列、文字列、Map、Set など、様々なオブジェクトで利用され、反復文やジェネレーターとともにデータを効果的に扱うことができます。