はじめに

この記事は、JavaScriptを利用したPromiseの配列を扱っている開発者を対象にしている。特に、Promiseの非同期処理やasync/await、Generatorの基礎知識があるとスムーズに理解できる。
この記事を読むことで、Promiseの配列を早い順でresolveするasync generatorに変換する方法がわかり、実際のコードで活用できるようになる。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 JavaScriptの基本的な知識（変数、データ型、制御構文など） Promiseの基本的な使い方（resolve、reject、then、catchなど） async/awaitの基本的な使い方（async関数、await式など） Generatorの基本的な知識（yield式、nextメソッドなど）

Promise の配列を早い順で resolve する async generator に変換する方法の概要

Promiseの配列を早い順でresolveするasync generatorに変換する方法は、JavaScriptの非同期処理を効率的に行う上で重要となる。この方法を利用することで、複数のPromiseを並列に実行し、解決された順に処理することができる。

Promise の配列を早い順で resolve する async generator に変換する方法

具体的な手順は以下の通りです。

最初のステップ：Promiseの配列を作成する

まずはPromiseの配列を作成します。以下の例は、3つのPromiseを含む配列を作成し、それぞれのPromiseが一定時間後にresolveされる様子を示しています。

Javascript

const promises = [
  new Promise((resolve) => setTimeout(() => resolve('Promise 1'), 2000)),
  new Promise((resolve) => setTimeout(() => resolve('Promise 2'), 1000)),
  new Promise((resolve) => setTimeout(() => resolve('Promise 3'), 3000)),
];

次のステップ：async generatorを作成する

次に、Promiseの配列を早い順でresolveするasync generatorを作成します。以下のコードでは、for awaitループを使用して、Promiseの配列を逐次的に解決し、結果をyieldします。

Javascript

async function* resolvePromises(promises) {
  const results = await Promise.allSettled(promises);
  for (const result of results) {
    if (result.status === 'fulfilled') {
      yield result.value;
    }
  }
}

さらに詳細なステップ：実際にasync generatorを使用する

ここで、async generatorを実際に使用して、Promiseの配列を早い順でresolveする例を示します。

Javascript

async function main() {
  for await (const value of resolvePromises(promises)) {
    console.log(value);
  }
}

main();

ハマった点やエラー解決

async generatorの使用時に遭遇する問題として、 Promise.allSettled()が全てのPromiseを解決するまで待つ点が挙げられます。もし、早いPromiseだけを解決させたい場合は、他のアプローチを取る必要があるかもしれません。

解決策

この問題に対しての解決策の一つは、Promise.race()を利用し、最も早く解決したPromiseを優先的に処理する方式を取ることです。

Javascript

async function* resolvePromises(promises) {
  while (promises.length > 0) {
    const index = await new Promise((resolve) => {
      const racingPromises = promises.map((promise, index) => promise.then(() => index));
      Promise.race(racingPromises).then(resolve);
    });
    const result = await promises.splice(index, 1)[0];
    yield result;
  }
}

まとめ

本記事では、Promiseの配列を早い順でresolveするasync generatorに変換する方法を解説しました。
- Promiseの配列を作成する方法 - async generatorを作成し、Promiseを解決する方法 - async generatorを使用してPromiseを解決する方法 この記事を通して、Promiseとasync generatorを組み合わせた非同期処理の効率化について理解を深めることができたはずです。
今後は、Promiseと async generatorを組み合わせたパターンを、より実践的な例を交えて紹介したいと考えています。

参考資料

以下の参考資料をもとに本記事を執筆しました。 - MDN Web Docs - Promise - MDN Web Docs - async function - MDN Web Docs - Generator