DocsPricingBlog
Contact Us
Log inSign up for FREE
Back to Tech Articles

Node.jsにおけるWeb Streams APIを用いたデータストリームのナビゲーション

Aug 07, 2025
# Misc

Ethan Miller

Product Engineer · Leapcell

This post is also available in English, 한국어, and Deutsch
Cover of "Node.jsにおけるWeb Streams APIを用いたデータストリームのナビゲーション"

今日のデータ駆動型世界では、パフォーマンスが高くスケーラブルなアプリケーションを構築するために、大量の情報を効率的に処理することが不可欠です。従来のアプローチ、つまり処理前にデータセット全体をメモリにロードするという方法は、数ギガバイトのファイル、リアルタイムデータフィード、またはシーケンシャル操作を扱う際には、すぐにボトルネックとなります。ここでデータストリーミングの力が役立ちます。アプリケーションは、一度にすべてを処理するのではなく、チャンクでデータを処理することにより、低いメモリフットプリントを維持し、レイテンシを削減し、応答性を向上させることができます。Node.jsは以前から独自のstreamモジュールを提供してきましたが、当初はブラウザ向けに設計されたWeb Streams APIの登場により、さまざまなJavaScript環境でストリーミングデータを一貫して処理するための、標準化された強力な代替手段がもたらされました。この記事では、Node.js内でWeb Streams APIを効果的に活用して、非常に効率的なデータ処理を実現する方法について詳しく説明します。

Web Streamsの理解

実装の詳細に入る前に、Web Streams APIのいくつかのコアコンセプトを明確にしましょう。Web Streams APIは、データのストリームを作成、合成、消費するためのインターフェースを定義します。ストリームには3つの基本的なタイプがあります。

  • ReadableStream: データのソースを表し、そこからデータを順次読み取ることができます。蛇口のように、連続した水の流れを受け取るために開くことができます。
  • WritableStream: データの宛先を表し、そこにデータを順次書き込むことができます。これは、水を注ぐことができる排水口のようなものです。
  • TransformStream: WritableStreamとReadableStreamの両方として機能します。データが通過する際に処理し、ある形式から別の形式に変換します。流れる水から水をきれいにろ過するフィルターを想像してください。

これらのストリームタイプは、「チャンク」と呼ばれるデータの単位で動作します。これは処理される情報の基本的な単位です。Web Streams APIの主な利点は、その流れるような、Promiseベースのインターフェースであり、特にasync/awaitと、最新の非同期JavaScriptパターンとシームレスに統合されることです。

Node.jsでWeb Streamsを使用する理由

Node.jsにはネイティブのstreamモジュールがありますが、Web Streams APIはいくつかの説得力のある利点を提供します。

  • 一貫性: ブラウザとNode.js環境の両方で、ストリーミングデータの統一されたAPIを提供し、フルスタックJavaScript開発者の開発を簡素化します。
  • 合成性: ストリームの簡単なチェーンとパイピングのために設計されており、最小限の労力で複雑なデータ変換パイプラインを可能にします。
  • バックプレッシャー処理: プロデューサーがコンシューマーを圧倒しないように、バックプレッシャーを管理するための組み込みメカニズムがあり、安定した効率的なパフォーマンスに不可欠です。
  • Async Iterators: ReadableStreamはネイティブにasync iterableであり、for await...ofループを使用したエレガントな消費を可能にします。

Node.jsでのWeb Streamsの実装

Node.jsコンテキストでの各Web Streamタイプの使用方法を、実践的な例とともに見ていきましょう。

1. ReadableStreamの作成

ReadableStreamは、データチャンクをプッシュできるReadableStreamDefaultControllerで構築できます。

import { ReadableStream } from 'node:stream/web'; // 'node:stream/web'からインポート

async function createNumberStream(limit) {
  let counter = 0;
  return new ReadableStream({
    async start(controller) {
      console.log('ReadableStream started');
      while (counter < limit) {
        // 非同期操作をシミュレート
        await new Promise(resolve => setTimeout(resolve, 50));
        controller.enqueue(counter++);
        console.log(`Enqueued: ${counter - 1}`);
      }
      controller.close();
      console.log('ReadableStream closed');
    },
    pull(controller) {
      // このメソッドは、ストリームがより多くのデータを要求するときに呼び出されます。
      // この例では、`start`で積極的にデータをプッシュします。
      //console.log('Pull requested');
    },
    cancel() {
      console.log('ReadableStream cancelled');
    }
  });
}

// ReadableStreamの消費
async function consumeStream() {
  const numberStream = await createNumberStream(5);
  console.log('--- Consuming Number Stream ---');
  for await (const chunk of numberStream) {
    console.log(`Received: ${chunk}`);
  }
  console.log('--- Consumption Complete ---');
}

consumeStream();

この例では、createNumberStreamが数値のシーケンスを生成します。startメソッドは、データ生成ロジックが存在する場所であり、controller.enqueue()を使用してデータをプッシュします。for await...ofループは、ストリームを消費するためのクリーンで慣用的な方法を提供します。

2. WritableStreamの作成

WritableStreamを使用すると、データを宛先に書き込むことができます。

import { WritableStream } from 'node:stream/web';

async function createLoggingWritableStream() {
  return new WritableStream({
    async start(controller) {
      console.log('WritableStream started');
    },
    async write(chunk, controller) {
      // 非同期書き込み操作をシミュレート
      await new Promise(resolve => setTimeout(resolve, 20));
      console.log(`Writing: ${chunk}`);
    },
    async close() {
      console.log('WritableStream closed');
    },
    async abort(reason) {
      console.error('WritableStream aborted', reason);
    }
  });
}

// WritableStreamの使用
async function writeToStream() {
  const loggingStream = await createLoggingWritableStream();
  const writer = loggingStream.getWriter();

  console.log('--- Writing Data ---');
  for (let i = 0; i < 5; i++) {
    await writer.write(`Data chunk ${i}`);
  }
  await writer.close();
  console.log('--- Writing Complete ---');
}

writeToStream();

ここでは、createLoggingWritableStreamは単に受信した各チャンクをログに記録します。getWriter()から取得したwriterオブジェクトを使用して、WritableStreamにデータをプッシュします。

3. TransformStreamの作成

TransformStreamは、パイプラインでのデータ変更の主力です。

import { ReadableStream, WritableStream, TransformStream } from 'node:stream/web';

// 数値をその二乗値に変換するTransformStream
function createDoublerTransformStream() {
  return new TransformStream({
    start(controller) {
      console.log('TransformStream started');
    },
    transform(chunk, controller) {
      console.log(`Transforming: ${chunk} -> ${chunk * 2}`);
      controller.enqueue(chunk * 2);
    },
    flush(controller) {
      console.log('TransformStream flushed (all input processed)');
    }
  });
}

// ストリームのチェーン: 未加工の数値 -> 二乗された数値 -> ログ記録
async function chainStreams() {
  const numberStream = new ReadableStream({
    start(controller) {
      for (let i = 1; i <= 3; i++) {
        controller.enqueue(i);
      }
      controller.close();
    }
  });

  const doubledStream = createDoublerTransformStream();

  const loggingStream = new WritableStream({
    write(chunk) {
      console.log(`Received final: ${chunk}`);
    },
  });

  console.log('--- Chaining Streams ---');
  await numberStream
    .pipeThrough(doubledStream) // Transform Streamを通過させる
    .pipeTo(loggingStream);     // Writable Streamにパイプする
  console.log('--- Chaining Complete ---');
}

chainStreams();

この例は、ストリームパイプラインの構成に不可欠なpipeThrough()とpipeTo()を示しています。pipeThrough()はTransformStreamを接続し、pipeTo()は最終的なReadableStreamをWritableStreamに接続します。

アプリケーションシナリオ

Node.jsのWeb Streams APIは、以下に特に強力です。

  • ファイル処理: CSV、ログ、または数ギガバイトのアーカイブの処理など、大規模なファイルをチャンクごとに読み書きし、メモリを使い果たさないようにします。
  • ネットワークプロキシ/ロードバランサー: リクエスト/レスポンス全体をバッファリングせずに、クライアントとサーバー間で効率的にデータを転送します。
  • リアルタイムデータ処理: WebSocketまたはメッセージキューからの着信データを処理し、変換を実行してから、下流のサービスにプッシュします。
  • データ圧縮/暗号化: ストリームベースの圧縮（例：Gzip）または暗号化をデータパイプライン内で直接実装します。
  • APIパイプライン: 1つのAPI呼び出しの出力が次のAPI呼び出しの入力となるように、複数のAPI呼び出しをチェーンし、すべてストリーミングデータを行いながら行います。

たとえば、大規模なCSVファイルをダウンロードし、そのコンテンツをフィルタリングしてから、フィルタリングされたデータを別のサービスにアップロードするシナリオを考えてみましょう。ストリームベースのアプローチは次のようになります。

import { ReadableStream, WritableStream, TransformStream } from 'node:stream/web';
import { createReadStream, createWriteStream } from 'node:fs';
import { pipeline } from 'node:stream/promises'; // ネイティブNode.jsストリーム用

// 例: 大規模ファイルから行をフィルタリングする
class LineFilterTransform extends TransformStream {
  constructor(keyword) {
    let buffer = '';
    super({
      transform(chunk, controller) {
        buffer += new TextDecoder().decode(chunk);
        const lines = buffer.split('\n');
        buffer = lines.pop(); // 最後（不完全）の行を保持

        for (const line of lines) {
          if (line.includes(keyword)) {
            controller.enqueue(new TextEncoder().encode(line + '\n'));
          }
        }
      },
      flush(controller) {
        if (buffer.length > 0 && buffer.includes(keyword)) {
          controller.enqueue(new TextEncoder().encode(buffer + '\n'));
        }
      }
    });
  }
}

// デモンストレーション用のダミー大規模ファイルを作成
// fs.writeFileSync('large_data.txt', Array(1000).fill('Hello world\nAnother line with Node.js\n').join(''));

async function processLargeFile() {
  const inputFile = createReadStream('large_data.txt'); // ネイティブNode.js Readable Stream
  const outputFile = createWriteStream('filtered_data.txt'); // ネイティブNode.js Writable Stream

  const webReadable = ReadableStream.from(inputFile); // ネイティブからWeb Streamへ変換
  const webWritable = new WritableStream({
    async write(chunk) {
      outputFile.write(chunk);
    },
    close() {
      outputFile.end();
    },
    abort(reason) {
      outputFile.destroy(reason);
    }
  });

  const filterStream = new LineFilterTransform('Node.js');

  console.log('--- Processing Large File ---');
  await webReadable
        .pipeThrough(filterStream)
        .pipeTo(webWritable);
  console.log('--- File Processing Complete ---');
  console.log('Filtered data written to filtered_data.txt');
}

// 実行前に 'large_data.txt' が存在し、一部のコンテンツが含まれていることを確認してください
// テストのためには、次のように作成できます。
// require('fs').writeFileSync('large_data.txt', Array(1000).fill('Hello world\nAnother line with Node.js\n').join(''));
processLargeFile().catch(console.error);

この例では、ReadableStream.from()とカスタムWritableStreamアダプターを使用して、ネイティブNode.jsストリームとWeb Streamsをブリッジする方法を示しており、強力なファイル処理パイプラインが可能になります。

結論

Web Streams APIは、JavaScriptでデータストリームを処理するためのモダンで効率的で標準化されたアプローチを提供し、Node.jsアプリケーションに大きなメリットをもたらします。ReadableStream、WritableStream、TransformStreamを採用することで、開発者はメモリ効率が高く、非常に合成可能なデータパイプラインを構築でき、情報の流れをエレガントに管理できます。Web Streams APIを活用することは、Node.jsでの非同期データ処理のパフォーマンスとアーキテクチャのクリーンさを新たなレベルに引き上げます。

Share this article

HackerNews

More Posts from Leapcell

Popular Posts