JavaScript非同期イてレータヘルパー「scan」：非同期の累計処理

非同期プログラミングは、特にネットワークリクエストやファイルシステム操作などのI/Oバウンドな処理を扱う現代のJavaScript開発の基礎です。ES2018で導入された非同期イテレータは、非同期データストリームを扱うための強力なメカニズムを提供します。「scan」ヘルパーは、RxJSのようなライブラリでよく見られ、スタンドアロンのユーティリティとしても利用可能になりつつあり、これらの非同期データストリームを処理するさらなる可能性を解き放ちます。

非同期イテレータの理解

「scan」に飛び込む前に、非同期イテレータが何であるかをおさらいしましょう。非同期イテレータは、非同期イテレータプロトコルに準拠したオブジェクトです。このプロトコルは、2つのプロパティを持つオブジェクトに解決されるプロミスを返す `next()` メソッドを定義します。そのプロパティとは `value`（シーケンスの次の値）と `done`（イテレータが終了したかどうかを示すブーリアン値）です。非同期イテレータは、時間とともに到着するデータや、取得に非同期操作を必要とするデータを扱う際に特に便利です。

以下に非同期イテレータの基本的な例を示します：

            
async function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

async function main() {
  const iterator = generateNumbers();

  let result = await iterator.next();
  console.log(result); // { value: 1, done: false }

  result = await iterator.next();
  console.log(result); // { value: 2, done: false }

  result = await iterator.next();
  console.log(result); // { value: 3, done: false }

  result = await iterator.next();
  console.log(result); // { value: undefined, done: true }
}

main();

「scan」ヘルパーの紹介

「scan」ヘルパー（`accumulate`や`reduce`としても知られています）は、アキュムレータ関数を各値に適用し、累計結果を出力することで非同期イテレータを変換します。これは配列の `reduce` メソッドに似ていますが、非同期でイテレータ上で動作します。

本質的に、「scan」は非同期イテレータ、アキュムレータ関数、そしてオプションの初期値を取ります。ソースイテレータから出力される各値に対して、アキュムレータ関数が前の累計値（または最初の反復の場合は初期値）とイテレータからの現在の値で呼び出されます。アキュムレータ関数の結果が次の累計値となり、それが結果の非同期イテレータによって出力されます。

構文とパラメータ

「scan」を使用するための一般的な構文は次のとおりです：

            
async function* scan(sourceIterator, accumulator, initialValue) {
  let accumulatedValue = initialValue;
  for await (const value of sourceIterator) {
    accumulatedValue = accumulator(accumulatedValue, value);
    yield accumulatedValue;
  }
}

`sourceIterator`：変換対象の非同期イテレータ。
`accumulator`：2つの引数（前の累計値とイテレータからの現在の値）を取る関数。新しい累計値を返す必要があります。
`initialValue`（オプション）：アキュムレータの初期値。提供されない場合、ソースイテレータの最初の値が初期値として使用され、アキュムレータ関数は2番目の値から呼び出されます。

ユースケースと例

「scan」ヘルパーは非常に多用途であり、非同期データストリームが関わる幅広いシナリオで使用できます。以下にいくつかの例を挙げます：

1. 累計の計算

取引金額を出力する非同期イテレータがあるとします。「scan」を使用して、これらの取引の累計を計算できます。

            
async function* generateTransactions() {
  yield 10;
  yield 20;
  yield 30;
}

async function main() {
  const transactions = generateTransactions();
  const runningTotals = scan(transactions, (acc, value) => acc + value, 0);

  for await (const total of runningTotals) {
    console.log(total); // Output: 10, 30, 60
  }
}

main();

この例では、`accumulator`関数は現在の取引金額を前の合計に加算するだけです。`initialValue`を0にすることで、累計がゼロから始まることを保証します。

2. データを配列に蓄積する

「scan」を使用して、非同期イテレータからのデータを配列に蓄積できます。これは、時間とともにデータを収集し、バッチで処理する場合に便利です。

            
async function* fetchData() {
  yield { id: 1, name: 'Alice' };
  yield { id: 2, name: 'Bob' };
  yield { id: 3, name: 'Charlie' };
}

async function main() {
  const dataStream = fetchData();
  const accumulatedData = scan(dataStream, (acc, value) => [...acc, value], []);

  for await (const data of accumulatedData) {
    console.log(data); // Output: [{id: 1, name: 'Alice'}], [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}], [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}]
  }
}

main();

ここでは、`accumulator`関数はスプレッド演算子（`...`）を使用して、以前のすべての要素と現在の値を含む新しい配列を作成します。`initialValue`は空の配列です。

3. レートリミッターの実装

より複雑なユースケースは、レートリミッターの実装です。「scan」を使用して、特定の時間枠内に行われたリクエストの数を追跡し、レート制限を超えた場合は後続のリクエストを遅延させることができます。

            
async function* generateRequests() {
  // Simulate incoming requests
  yield Date.now();
  await new Promise(resolve => setTimeout(resolve, 200));
  yield Date.now();
  await new Promise(resolve => setTimeout(resolve, 100));
  yield Date.now();
}

async function main() {
  const requests = generateRequests();
  const rateLimitWindow = 1000; // 1 second
  const maxRequestsPerWindow = 2;

  async function* rateLimitedRequests(source, window, maxRequests) {
    let queue = [];
    for await (const requestTime of source) {
      queue.push(requestTime);
      queue = queue.filter(t => requestTime - t < window);

      if (queue.length > maxRequests) {
        const earliestRequest = queue[0];
        const delay = window - (requestTime - earliestRequest);
        console.log(`Rate limit exceeded. Delaying for ${delay}ms`);
        await new Promise(resolve => setTimeout(resolve, delay));
      }
      yield requestTime;
    }
  }

  const limited = rateLimitedRequests(requests, rateLimitWindow, maxRequestsPerWindow);

  for await (const requestTime of limited) {
    console.log(`Request processed at ${requestTime}`);
  }
}

main();

この例では、内部的に（`rateLimitedRequests`関数内で）`scan`を使用してリクエストタイムスタンプのキューを維持します。レート制限ウィンドウ内のリクエスト数が許容最大値を超えているかどうかをチェックします。超えている場合は、必要な遅延を計算し、リクエストをyieldする前に一時停止します。

4. リアルタイムデータアグリゲータの構築（グローバルな例）

様々な取引所からのリアルタイム株価を集約する必要があるグローバルな金融アプリケーションを考えてみましょう。非同期イテレータは、ニューヨーク証券取引所（NYSE）、ロンドン証券取引所（LSE）、東京証券取引所（TSE）などの取引所からの価格更新をストリーミングできます。「scan」を使用して、すべての取引所にわたる特定の株式の実行平均または高値/安値を維持することができます。

            
// Simulate streaming stock prices from different exchanges
async function* generateStockPrices() {
  yield { exchange: 'NYSE', symbol: 'AAPL', price: 170.50 };
  yield { exchange: 'LSE', symbol: 'AAPL', price: 170.75 };
  await new Promise(resolve => setTimeout(resolve, 50));
  yield { exchange: 'TSE', symbol: 'AAPL', price: 170.60 };
}

async function main() {
  const stockPrices = generateStockPrices();

  // Use scan to calculate a running average price
  const runningAverages = scan(
    stockPrices,
    (acc, priceUpdate) => {
      const { total, count } = acc;
      return { total: total + priceUpdate.price, count: count + 1 };
    },
    { total: 0, count: 0 }
  );

  for await (const averageData of runningAverages) {
    const averagePrice = averageData.total / averageData.count;
    console.log(`Running average price: ${averagePrice.toFixed(2)}`);
  }
}

main();

この例では、`accumulator`関数は価格の累計と受信した更新の数を計算します。最終的な平均価格は、これらの累計値から計算されます。これにより、異なるグローバル市場にわたる株価のリアルタイムビューが提供されます。

5. ウェブサイトのトラフィックをグローバルに分析する

世界中に設置されたサーバーからウェブサイトの訪問データストリームを受信するグローバルなウェブ分析プラットフォームを想像してみてください。各データポイントは、ウェブサイトを訪れたユーザーを表します。「scan」を使用することで、国ごとのページビューのトレンドをリアルタイムで分析できます。データが`{ country: "US", page: "homepage", timestamp: 1678886400 }`のような形式であるとします。

            
async function* generateWebsiteVisits() {
  yield { country: 'US', page: 'homepage', timestamp: Date.now() };
  yield { country: 'CA', page: 'product', timestamp: Date.now() };
  yield { country: 'UK', page: 'blog', timestamp: Date.now() };
  yield { country: 'US', page: 'product', timestamp: Date.now() };
}

async function main() {
  const visitStream = generateWebsiteVisits();

  const pageViewCounts = scan(
    visitStream,
    (acc, visit) => {
      const { country } = visit;
      const newAcc = { ...acc };
      newAcc[country] = (newAcc[country] || 0) + 1;
      return newAcc;
    },
    {}
  );

  for await (const counts of pageViewCounts) {
    console.log('Page view counts by country:', counts);
  }
}

main();

ここでは、`accumulator`関数は各国ごとのカウンターを更新します。出力は、新しい訪問データが到着するたびに、各国ごとの累計ページビュー数を示します。

「scan」を使用する利点

「scan」ヘルパーは、非同期データストリームを扱う際にいくつかの利点を提供します：

宣言的なスタイル： 「scan」を使用すると、累計処理ロジックを宣言的かつ簡潔に表現でき、コードの可読性と保守性が向上します。
非同期処理： アキュムレータ関数内の非同期操作をシームレスに処理するため、I/Oバウンドなタスクを含む複雑なシナリオに適しています。
リアルタイム処理： 「scan」はデータストリームのリアルタイム処理を可能にし、変更が発生したときにそれに反応することができます。
構成可能性： 他の非同期イテレータヘルパーと簡単に組み合わせることで、複雑なデータ処理パイプラインを作成できます。

「scan」の実装（利用できない場合）

一部のライブラリは組み込みの「scan」ヘルパーを提供していますが、必要であれば簡単に独自に実装できます。以下に簡単な実装を示します：

            
async function* scan(sourceIterator, accumulator, initialValue) {
  let accumulatedValue = initialValue;
  let first = true;
  for await (const value of sourceIterator) {
    if (first && initialValue === undefined) {
      accumulatedValue = value;
      first = false;
    } else {
      accumulatedValue = accumulator(accumulatedValue, value);
    }
    yield accumulatedValue;
  }
}

この実装は、ソースイテレータを反復処理し、各値にアキュムレータ関数を適用して、累計結果をyieldします。`initialValue`が提供されない場合に、ソースイテレータの最初の値を初期値として使用するケースを処理します。

`reduce`との比較

「scan」と`reduce`を区別することが重要です。両方ともイテレータ上で動作し、アキュムレータ関数を使用しますが、その動作と出力は異なります。

`scan`は各反復処理で累計値を出力し、蓄積の実行履歴を提供します。
`reduce`は、イテレータ内のすべての要素を処理した後に最終的な累計値のみを出力します。

したがって、「scan」は蓄積の中間状態を追跡する必要があるシナリオに適しており、`reduce`は最終結果のみが必要な場合に適しています。

エラーハンドリング

非同期イテレータと「scan」を扱う際には、エラーを適切に処理することが重要です。エラーは、反復処理中またはアキュムレータ関数内で発生する可能性があります。`try...catch`ブロックを使用して、これらのエラーをキャッチして処理できます。

            
async function* generatePotentiallyFailingData() {
  yield 1;
  yield 2;
  throw new Error('Something went wrong!');
  yield 3;
}

async function main() {
  const dataStream = generatePotentiallyFailingData();

  try {
    const accumulatedData = scan(dataStream, (acc, value) => acc + value, 0);

    for await (const data of accumulatedData) {
      console.log(data);
    }
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

main();

この例では、`try...catch`ブロックが`generatePotentiallyFailingData`イテレータによってスローされたエラーをキャッチします。その後、エラーをログに記録したり、操作を再試行するなど、適切にエラーを処理できます。

結論

「scan」ヘルパーは、JavaScriptの非同期イテレータで非同期の累計処理を実行するための強力なツールです。これにより、複雑なデータ変換を宣言的かつ簡潔に表現し、非同期操作を適切に処理し、データストリームをリアルタイムで処理できます。その機能とユースケースを理解することで、「scan」を活用して、より堅牢で効率的な非同期アプリケーションを構築できます。累計の計算、配列へのデータ蓄積、レートリミッターの実装、リアルタイムデータアグリゲータの構築など、いずれの場合でも、「scan」はコードを簡素化し、全体的なパフォーマンスを向上させることができます。非同期データストリームの処理中に中間的な累計値にアクセスする必要がある場合は、エラーハンドリングを考慮し、`reduce`の代わりに「scan」を選択することを忘れないでください。RxJSのようなライブラリを探求することで、リアクティブプログラミングパラダイム内での「scan」の理解と実践的な応用をさらに深めることができます。