ReadableStream
from Web Streams API
readerを通じてデータを非同期的に読み取る
データの供給側
pipe chainの終点として、WritableStreamに接続する
ReadableStream は、Web Streams APIの一部で、読み取り可能なデータストリームを表現するためのインターフェースです。主に、ネットワークリクエストから取得したデータや、ファイル操作、カスタムデータストリームの作成などに使用されます。2. 主な用途
ネットワーク通信: Fetch APIで得られるレスポンスボディ（
response.body ）は ReadableStream のインスタンス。ファイル操作: ファイルをストリームで少しずつ読み取る。
カスタムデータストリーム: 独自のデータ生成や操作をストリーム形式で行う。
3. ReadableStreamの構成要素
javascriptconst stream = new ReadableStream({
start(controller) {
// ストリームの初期化
},
pull(controller) {
// ストリームのデータ供給
},
cancel(reason) {
// ストリームがキャンセルされた場合の処理
}
});start(controller): ストリームが初期化されると呼び出されます。
controller を使ってストリームにデータを供給できます。pull(controller): ストリームがデータを要求する際に呼び出されます。
cancel(reason): ストリームがキャンセルされた場合のクリーンアップ処理。
controller はストリームの制御を行うオブジェクトで、以下のようなメソッドを提供します: enqueue(chunk) : ストリームにデータを追加します。 close() : ストリームを閉じます。 error(e) : ストリームをエラー状態にします。4. ストリームの消費
ストリームのデータは
ReadableStream から取得できます。1. 取得方法:
getReader を使用javascriptconst reader = stream.getReader();
reader.read().then(({ done, value }) => {
if (done) {
console.log('ストリームが終了しました');
} else {
console.log('データ:', value);
}
});
getReader() はストリームからデータを1つずつ取得するリーダーを返します。 read() は Promise を返し、データが読み取れると解決します。2. 取得方法: for await...of
ストリームを非同期イテレータとして扱うこともできます（非同期イテレータがサポートされている環境）。
javascriptconst reader = stream.getReader();
for await (const chunk of stream) {
console.log('データ:', chunk);
}
---
5. 実例: Fetchとの連携
javascriptfetch('https://example.com')
.then(response => response.body) // bodyはReadableStream
.then(stream => {
const reader = stream.getReader();
return reader.read();
})
.then(({ done, value }) => {
if (!done) {
console.log('データ:', new TextDecoder().decode(value));
}
});