JavaScript 可読ストリーム

1. JavaScript に ReadableStream をインストールする
2. .getReader() を使用した ReadableStream の例
3. Fetch API を使用した ReadableStream の例

ReadableStream は、ストリームのような方法でソースからデータを読み取ることができる JavaScript オブジェクトです。 多くの場合、ファイルやネットワーク ストリームなどの大量のデータを読み取るために使用され、Fetch API やブラウザーの Response オブジェクトなどの他の API と組み合わせて使用できます。

ReadableStream を作成するには、new ReadableStream() コンストラクターを使用できます。このコンストラクターは、ソースといくつかのオプションを引数として受け取ります。 次に、ストリームの .getReader() メソッドを使用して reader オブジェクトを取得できます。これを使用して、.read() や .cancel() などのメソッドを使用してストリームからデータを読み取ることができます。

ReadableStream を使用する主な利点の 1つは、ストリーム全体が完全にロードされるのを待つのではなく、読み取り中にデータを処理できることです。 これは、大規模なデータ セットを操作したり、低速のソースからデータを読み取ったりする場合に特に役立ちます。

全体として、ReadableStream は JavaScript でストリーミング データを操作するための強力なツールであり、Web アプリケーションを開発するときにツールキットに追加すると便利です。

JavaScript に ReadableStream をインストールする

ReadableStream コンストラクターは JavaScript コア API の一部ではありませんが、この機能を提供するライブラリを利用できます。 人気のあるライブラリの 1つは、readable-stream パッケージです。

Node.js プロジェクトで readable-stream パッケージを使用するには、次のコマンドを実行して npm を使用してインストールできます。

npm install readable-stream

次に、コードで Readable クラスをインポートし、それを使用して新しい ReadableStream オブジェクトを作成できます。

const {Readable} = require('readable-stream');

.getReader() を使用した ReadableStream の例

ReadableStream を作成し、.getReader() メソッドを使用してデータを読み取る例を次に示します。

この例では、start メソッドは setTimeout 関数を使用して、100 ミリ秒ごとに非同期で新しい値をストリームにプッシュします。

このコードは、0 で始まり 99 で終わる一連の数値を生成する ReadableStream を作成します。 ストリームは、ストリームがデータの読み取りを開始する準備が整うたびに呼び出される start メソッドを使用して作成されます。

.getReader() メソッドを使用して reader オブジェクトを取得し、async 関数で使用してストリームからデータを読み取ります。 .read() メソッドはループ内で繰り返し呼び出され、返されたオブジェクトの done プロパティが true になるとループが終了し、ストリームが閉じられたことを示します。

// const { Readable } = require("readable-stream");

const stream = new ReadableStream({
  start(controller) {
    let i = 0;
    function push() {
      controller.enqueue(i++);
      if (i < 100) {
        setTimeout(push, 100);
      } else {
        controller.close();
      }
    }
    push();
  },
});

const reader = stream.getReader();

(async function read() {
  while (true) {
    const {value, done} = await reader.read();
    if (done) {
      break;
    }
    console.log(value);
  }
})();

出力：

Fetch API を使用した ReadableStream の例

ReadableStream を使用する別の例を次に示します。今回は Fetch API を使用してリモート リソースからデータを読み取ります。

この例では、fetch 関数を使用してリモート リソースをリクエストし、Response オブジェクトを取得します。 Response オブジェクトには ReadableStream である body プロパティがあり、これを使用してレスポンスからデータを読み取ることができます。

次に、.getReader() メソッドを使用して reader オブジェクトを取得し、前の例と同じ async 関数を使用してストリームからデータを読み取ります。 今回読み込むデータは、サーバー上の≪file.txt≫ファイルの内容です。

const {Readable} = require('readable-stream');

(async function read() {
  const response = await fetch("http://example.com/file.txt");
  const stream = response.body;
  const reader = stream.getReader();

  while (true) {
    const { value, done } = await reader.read();
    if (done) {
      break;
    }
    console.log(value);
  }
})();

出力：