【JavaScript入門】イテレータを得る

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

イテレータを得る

　JavaScript の配列・Map・Set などのオブジェクトには、要素を反復処理（イテレーション）するための仕組みが用意されています。これらでは、.keys(), .values(), .entries() といったメソッドを使って「イテレータ（iterator）」と呼ばれる特別なオブジェクトを取得できます。イテレータは、for...of 文などで手軽に要素を一つずつ取得するための仕組みです。ここでは、配列を例にイテレータの使い方を見ていきます。

１．iterator（反復子）を得るメソッド

メソッド	説明
.keys()	キー（インデックス）のイテレータを返す。
.values()	値（要素）のイテレータを返す。
.entries()	[キー, 値] のペアを要素とするイテレータを返す。

２．サンプルコード（HTML + JavaScript）

　以下の例を「myIteratorExample.html」というファイル名で保存し、ブラウザを開き、開発者ツールのコンソール出力を確認してください。

ファイル名： myIteratorExample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myIteratorExample.html</title>
</head>
<body>
  <h1>イテレータを得る(keys, values, entries)のサンプル</h1>
  <p>ブラウザの開発者ツールのコンソールで出力を確認してください。</p>

  <script>
    // 配列を作成
    const arr = ['コーラ', '牛乳', '栄養ドリンク'];

    // 1) .keys()
    console.log('=== .keys() の例 ===');
    const keysIterator = arr.keys();
    for (const key of keysIterator) {
      console.log('キー(インデックス):', key);
    }

    // 2) .values()
    console.log('=== .values() の例 ===');
    const valuesIterator = arr.values();
    for (const value of valuesIterator) {
      console.log('値:', value);
    }

    // 3) .entries()
    console.log('=== .entries() の例 ===');
    const entriesIterator = arr.entries();
    for (const entry of entriesIterator) {
      // entry は [インデックス, 値] のペア
      console.log('エントリ:', entry);
    }
  </script>
</body>
</html>

デバックコンソールの出力

=== .keys() の例 ===
キー(インデックス): 0
キー(インデックス): 1
キー(インデックス): 2
=== .values() の例 ===
値: コーラ
値: 牛乳
値: 栄養ドリンク
=== .entries() の例 ===
エントリ: (2) [0, 'コーラ']
エントリ: (2) [1, '牛乳']
エントリ: (2) [2, '栄養ドリンク']

解説

.keys()
配列のインデックスや、Map オブジェクトならキーを列挙するイテレータ。
.values()
配列の要素や、Map や Set なら値を列挙するイテレータ。
.entries()
配列の場合は [インデックス, 値] のペアを、Map なら [キー, 値] のペアを列挙するイテレータ。

　どのイテレータを得ても for...of などで要素を順に取り出せるため、大量の要素を処理する際に便利です。特に配列にはあまり使われませんが、Map や Set などでキーや値を列挙するときによく利用します。

まとめ

イテレータ（iterator）は、配列・Map・Set などの要素を一つずつ取り出すための仕組み。
.keys(), .values(), .entries() は、指定した種類のイテレータを返す。
取得したイテレータは、for...of やスプレッド構文などで簡単に反復処理が可能。
配列ではあまり使わないかもしれませんが、Map・Set などでキーや値を取得するときに非常に有用。

　これらのメソッドを活用すると、大量の要素を順番に処理・列挙する際に柔軟なコードを書きやすくなります。