0Pricing
JavaScript Academy · レッスン

反復可能プロトコルとfor...of

反復可能プロトコル、Symbol.iterator、iterator.next()を学び、簡単なカスタム例でfor...of、spread、Array.fromを使います。

「反復可能プロトコルとfor...of」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

全体像

目標：小さなiterableを読み取り、作成します。

  • iterableの意味
  • Symbol.iteratorとiterator.next()
  • for...of、spread、Array.from
  • 0..Nカウンターの例を作ります
反復可能プロトコルとfor...of — イラスト1

組み込みオブジェクトでのfor...of

for...ofは、配列や文字列のような組み込みのiterableで動作し、項目を順番に取り出します。

// Arrays and strings are iterable
const arr = [10, 20, 30];
for (const n of arr) {
  console.log("arr item:", n);
}

const word = "JS";
for (const ch of word) {
  console.log("char:", ch);
}
反復可能プロトコルとfor...of — イラスト2

カスタムiterable

iterableは、イテレーターを返す[Symbol.iterator]()を持ちます。そのイテレーターのnext()は、{ value, done }を返します。

// A tiny iterable that counts 0..max-1
const Counter = {
  make: function (max) {
    return {
      max: max,
      // Symbol.iterator returns an iterator object
      [Symbol.iterator]: function () {
        let i = 0;
        return {
          next: function () {
            if (i < max) {
              const out = { value: i, done: false };
              i = i + 1;
              return out;
            }
            return { value: undefined, done: true };
          }
        };
      }
    };
  }
};

for (const x of Counter.make(3)) {
  console.log("count:", x);
}
反復可能プロトコルとfor...of — イラスト3

手動反復

内部では、for...ofがdone: trueになるまでnext()を繰り返し呼び出します。

// You can drive the iterator manually
const iterable = Counter.make(2);
const it = iterable[Symbol.iterator]();

console.log(it.next()); // { value: 0, done: false }
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: undefined, done: true }
反復可能プロトコルとfor...of — イラスト4

スプレッドとArray.from

スプレッドとArray.fromもiterableプロトコルを使って値を集めます。

// Spread (...) and Array.from consume iterables
const small = Counter.make(4);
const a1 = [...small];
const a2 = Array.from(Counter.make(3));

console.log("spread:", a1);
console.log("from :", a2);
反復可能プロトコルとfor...of — イラスト5

よい習慣

ヒント：

  • [Symbol.iterator]では、呼び出すたびに新しいイテレーターを返します。
  • 無限ループを避けるため、必ずdone: trueで終了します。
  • 状態はイテレーターのクロージャー内にローカルで保持します。
反復可能プロトコルとfor...of — イラスト6

iterableプロトコルのクイズ

クイックチェック：オブジェクトをiterableにします。

反復可能プロトコルとfor...of — イラスト7

まとめ

まとめ：配列のような組み込みオブジェクトはiterableです。独自のiterableを作るには、next()を持つイテレーターを返す[Symbol.iterator]()を追加します。値を取り出すにはfor...of、spread、またはArray.fromを使います。

反復可能プロトコルとfor...of — イラスト8

よくある質問

「反復可能プロトコルとfor...of」レッスンは無料ですか？

はい。「反復可能プロトコルとfor...of」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「反復可能プロトコルとfor...of」で何を学びますか？

反復可能プロトコル、Symbol.iterator、iterator.next()を学び、簡単なカスタム例でfor...of、spread、Array.fromを使います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「反復可能プロトコルとfor...of」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 反復可能プロトコルとfor...of
  2. ジェネレーター関数、yield、小さなパイプライン
  3. 非同期イテレーター — for await...ofとasyncジェネレーター
← JavaScript Academyに戻る