ストリーム API

ストリーミングでは、ネットワーク経由で受信するリソースを小さなチャンク（塊）に分割し、少しずつ処理します。これは、ウェブページに表示する資産を受け取るときに、ブラウザーがいずれにせよ行うことです。動画がバッファリングされて徐々に再生可能になり、画像が読み込まれるにつれて徐々に表示されることもあります。

しかし、これは以前は JavaScript で実現できませんでした。以前は、何らかの種類のリソース（動画、テキストファイルなど）を処理したい場合は、ファイル全体をダウンロードし、適切な形式にデシリアライズされるのを待ってから、完全に受信した後に全部まとめて処理する必要がありました。

ストリームが JavaScript で利用できるようになったことで、これがすべて変わりました。クライアント側で利用可能になると、バッファー、文字列、 blob などを生成せずに、JavaScript で少しずつ生データの処理を開始することができます。

さらに利点もあります。 ストリームの開始または終了の検出、ストリームの連鎖、エラー処理と必要に応じたストリームのキャンセル、ストリームの読み取り速度への対応が可能です。

ストリームの基本的な使用法は、応答をストリームとして利用可能にすることにかかっています。 例えば、成功したフェッチリクエストによって返されたレスポンスの本体は、ReadableStream として取り出すことができます。その後、ReadableStream.getReader() で作成したリーダーを使用して読み取ったり、ReadableStream.cancel() でキャンセルしたりすることができます。

より複雑な用途では、例えばサービスワーカー内でデータを処理するために、 ReadableStream() コンストラクターを使用して独自のストリームを作成することができます。

WritableStream を使用してストリームにデータを書き込むこともできます。

ReadableStream

読み取り可能なデータのストリームを表します。 Fetch API のレスポンスストリーム、または開発者定義のストリーム（独自の ReadableStream() コンストラクターなど）を処理するために使用できます。

ReadableStreamDefaultReader

ネットワークから提供されたストリームデータ（フェッチリクエストなど）を読み取るために使用できる既定のリーダーを表します。

ReadableStreamDefaultController

ReadableStream の状態と内部キューを制御できるコントローラーを表します。既定のコントローラーは、バイトストリーム向けではないストリーム用です。

WritableStream

シンク (sink) と呼ばれる宛先にストリーミングデータを書き込むための標準的な抽象化を提供します。このオブジェクトには、組み込みの背圧とキューイング機能があります。

WritableStreamDefaultWriter

データのチャンクを書き込み可能なストリームに書き込むために使用できる既定の書き込み可能なストリームのライターを表します。

WritableStreamDefaultController

WritableStream の状態を制御できるコントローラーを表します。 WritableStream を構築するとき、基になるシンクには、対応する WritableStreamDefaultController インスタンスが与えられて操作します。

TransformStream

一連の変換可能なデータを表します。

TransformStreamDefaultController (en-US)

変換ストリームに関連付けられた ReadableStream と WritableStream を操作するためのメソッドを提供します。

ByteLengthQueuingStrategy

ストリームを構築するときに使用できる組み込みのバイト長キューイング戦略 (byte length queuing strategy) を提供します。

CountQueuingStrategy

ストリームを構築するときに使用できる組み込みのチャンクカウントキューイング戦略 (chunk counting queuing strategy) を提供します。

Request

新しい Request オブジェクトが構築されると、その RequestInit 辞書の body プロパティで ReadableStream を渡すことができます。 次に、この Request を fetch() に渡して、ストリームのフェッチを開始することができます。

Response.body

成功したフェッチリクエストによって返されたレスポンスの本体で、既定で ReadableStream として取り出すことができ、リーダーを装着することができます。

ReadableStreamBYOBReader

開発者が提供するストリームデータの読み取りに使用できる BYOB（"bring your own buffer"、独自のバッファーを持ち込む）リーダー（独自の ReadableStream() コンストラクターなど）を表します。

ReadableByteStreamController

ReadableStream の状態と内部キューを制御するためのコントローラーを表します。 バイトストリームコントローラーは、バイトストリーム用のものです。

ReadableStreamBYOBRequest (en-US)

ReadableByteStreamController 内のプルインリクエストを表します。

ストリーム API のドキュメントに合わせてサンプルのディレクトリーを作成しました。 mdn/dom-examples/streams を参照してください。例として、次のものがあります。

• Simple stream pump（単純なストリームポンプ）: この例は、 ReadableStream を使用してそのデータを別のストリームに渡す方法を示しています。
• Grayscale a PNG（PNG のグレースケール化）: この例は、PNG の ReadableStream をグレースケールに変換する方法を示しています。
• Simple random stream（単純なランダムストリーム）: この例は、カスタムストリームを使用してランダムな文字列を生成し、それらをチャンクとしてキューに入れてから、再度読み取る方法を示しています。
• Simple tee example（単純な tee の例）: この例は、単純なランダムストリームの例を拡張したもので、ストリームを tee 化して、両方の結果のストリームの独立して読み取る方法を示しています。
• Simple writer（単純なライター）: この例では、書き込み可能なストリームに書き込み、ストリームをデコードして、コンテンツを UI に書き込む方法を示します。
• Unpack chunks of a PNG（PNG のチャンクをアンパックする）: この例は、PNG ファイルのデータを PNG のチャンクのストリームに変換することにより、 pipeThrough() を使用して ReadableStream を他のデータ型のストリームに変換する方法を示します。

他の開発者による例

• Progress Indicators with Streams, Service Workers, & Fetch

• ストリーム API の概念
• 読み取り可能なストリームの使用
• 読み取り可能な倍とストリームの使用 (en-US)
• 書き込み可能なストリームの使用