JavaScriptのジェネレーターの使い方

1. ジェネレーターの定義と基本的な使用方法

ジェネレーターは、関数内にfunction*という構文を使用して定義します。ジェネレーター内でyieldキーワードを使うことで、値を生成し、一時停止したり再開したりすることができます。

function* exampleGenerator() {
  yield '値1';
  yield '値2';
  yield '値3';
}
const generator = exampleGenerator();
console.log(generator.next().value); // 出力: 値1
console.log(generator.next().value); // 出力: 値2
console.log(generator.next().value); // 出力: 値3

2. ジェネレーターを使った反復処理

ジェネレーターは、for...ofループを使って繰り返し処理を行うことができます。以下の例では、ジェネレーターが生成する値を順番に処理します。

function* countUpTo(max) {
  for (let i = 1; i <= max; i++) {
    yield i;
  }
}
for (const num of countUpTo(5)) {
  console.log(num); // 出力: 1, 2, 3, 4, 5
}

3. ジェネレーターを使った非同期処理

ジェネレーターを利用すると、非同期処理を直感的に記述することができます。以下の例では、非同期なデータの取得をシンプルに行っています。

function fetchData(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`データ: ${url}`);
    }, 2000);
  });
}
function* fetchWithGenerator() {
  const data1 = yield fetchData('https://example.com/data1');
  console.log(data1); // 出力: データ: https://example.com/data1
  const data2 = yield fetchData('https://example.com/data2');
  console.log(data2); // 出力: データ: https://example.com/data2
}
const generator2 = fetchWithGenerator();
const promise = generator2.next().value;
promise.then((result) => {
  generator2.next(result);
});

上記のように、ジェネレーターを使うことでコードをより簡潔にし、読みやすくすることができます。ジェネレーターは、反復処理や非同期処理を含むさまざまなシナリオで役立つツールです。