Streams | Frontend Practical Guide

Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`ByteLengthQueuingStrategy`	52	16	65	10.1	52	10.3
`ByteLengthQueuingStrategy` ByteLengthQueuingStrategy() コンストラクターは、ByteLengthQueuingStrategy オブジェクトのインスタンスを作成して返します。	52	16	65	10.1	52	10.3
`highWaterMark` ByteLengthQueuingStrategy.highWaterMark は読み取り専用プロパティで、背圧が適用される前に内部キューに格納することができる総バイト数を返します。	52	16	65	10.1	52	10.3
`size` size() は ByteLengthQueuingStrategy インターフェイスのメソッドで、指定されたチャンクの byteLength プロパティを返します。	52	16	65	10.1	52	10.3
`CountQueuingStrategy` CountQueuingStrategy はストリーム API のインターフェイスで、ストリームの構築時に使用できる組み込みのチャンクカウントキューイング戦略を提供します。	52	16	65	10.1	52	10.3
`CountQueuingStrategy` CountQueuingStrategy() コンストラクターは、CountQueuingStrategy オブジェクトのインスタンスを作成して返します。	52	16	65	10.1	52	10.3
`highWaterMark` CountQueuingStrategy.highWaterMark は読み取り専用プロパティで、背圧が適用される前の内部キューに含まれているチャンクの総数です。	52	16	65	10.1	52	10.3
`size` size() は CountQueuingStrategy インターフェイスのメソッドで、常に 1 を返します。従って、合計キューサイズはキュー内のチャンク数を数えたものになります。	52	16	65	10.1	52	10.3
`ReadableStream` ReadableStream はストリーム API のインターフェイスで、バイトデータの読み取り可能なストリームを表します。 Fetch API は、 ReadableStream の具体的なインスタンスをResponse オブジェクトの Response.body プロパティを介して提供します。	43	14	65	10.1	43	10.3
`cancel` cancel() は ReadableStream インターフェイスのメソッドで、ストリームがキャンセルされたときに解決する Promise を返します。	43	14	65	10.1	43	10.3
`getReader` getReader() は ReadableStream インターフェイスのメソッドで、リーダーを作成し、それでストリームをロックします。ストリームがロックされている間は、このリーダーが解放されるまで他のリーダーを取得できません。	43	14	65	10.1	43	10.3
`locked` locked は ReadableStream インターフェイスの読み取り専用プロパティで、読み取り可能なストリームがリーダーにロックされているかどうかを返します。	52	14	65	10.1	52	10.3
`pipeThrough` pipeThrough() は ReadableStream インターフェイスのメソッドで、変換ストリームまたはその他の書き込み可能/読み取り可能なペアを介して現在のストリームを接続する連鎖可能な方法を提供します。	59	79	102	10.1	59	10.3
`pipeTo` pipeTo() は ReadableStream インターフェイスのメソッドで、現在の ReadableStream を与えられた WritableStream にパイプ接続します。返される Promise は、パイプのプロセスが正常に完了した場合は履行され、エラーが発生した場合は拒否されます。	59	79	100	10.1	59	10.3
`ReadableStream` ReadableStream() コンストラクターは、指定されたハンドラーから読み取り可能なストリームのオブジェクトを作成して返します。	52	79	65	10.1	52	10.3
`tee` ReadableStream インターフェイスの tee() メソッドは、現在の読み取り可能なストリームを分配し、結果の 2 つの分岐を新しい ReadableStream インスタンスとして含む 2 つの要素の配列を返します。	52	79	65	10.1	52	10.3
`ReadableStreamDefaultController` ReadableStreamDefaultController はストリーム API のインターフェイスで、ReadableStream の状態と内部キューを制御できるコントローラーを表します。既定のコントローラーは、バイトストリームではないストリーム用のものです。	52	79	65	10	52	10
`close` close() は ReadableStreamDefaultController インターフェイスのメソッドで、関連するストリームを閉じます。	52	79	65	10	52	10
`desiredSize` desiredSize は ReadableStreamDefaultController インターフェイスの読み取り専用プロパティで、ストリームの内部キューを満たすために必要な希望サイズを返します。	52	79	65	10	52	10
`enqueue` enqueue() は ReadableStreamDefaultController インターフェイスのメソッドで、受け取ったのチャンクを関連するストリームのキューに入れます。	52	79	65	10	52	10
`error` error() は ReadableStreamDefaultController インターフェイスのメソッドで、関連づけられたストリームとの今後のやり取りをエラーにします。	52	79	65	10	52	10
`ReadableStreamDefaultReader` ReadableStreamDefaultReader はストリーム API のインターフェイスで、ネットワークから提供されたストリームデータ（フェッチリクエストなど）を読み取るために使用できる既定のリーダーを表します。	43	79	65	10	43	10
`cancel` cancel() は ReadableStreamDefaultReader インターフェイスのメソッドで、ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。提供された reason 引数は、基になるソースに与えられ、使用する場合もしない場合もあります。	43	79	65	10	43	10
`closed` closed は ReadableStreamDefaultReader インターフェイスの読み取り専用プロパティで、ストリームが閉じられた場合、またはリーダーのロックが解除された場合に履行され、ストリームがエラーの場合に拒否されるプロミス (Promise) を返します。このプロパティを使用すると、ストリーミング処理の終わりに応答するコードを書くことができます。	43	79	65	10	43	10
`read` read() は ReadableStreamDefaultReader インターフェイスのメソッドで、ストリームの内部キュー内の次のチャンクへのアクセスを提供するプロミスを返します。	43	79	65	10	43	10
`ReadableStreamDefaultReader` ReadableStreamDefaultReader() コンストラクターは、ReadableStreamDefaultReader オブジェクトのインスタンスを作成して返します。	78	79	100	10	78	10
`releaseLock` releaseLock() は ReadableStreamDefaultReader インターフェイスのメソッドで、ストリームのリーダーのロックを解除します。	43	79	65	10	43	10
`releaseLock (reject pending read request)` `releaseLock()` は保留中の読み取りリクエストを拒否します	105	105	102	17	105	17
`TransformStream` TransformStream はストリーム API のインターフェイスで、変換ストリームの概念であるパイプチェーンの具体的な実装を表します。	67	79	102	14.1	67	14.5
`readable` readable は TransformStream インターフェイスの読み取り専用プロパティで、この TransformStream が制御する ReadableStream インスタンスを返します。	67	79	102	14.1	67	14.5
`TransformStream` TransformStream() コンストラクターは、新しい TransformStream オブジェクトを作成します。このオブジェクトは、書き込み可能な端点を表す WritableStream と、読み取り可能な端点を表す ReadableStream の 2 つのストリームを表します。	67	79	102	14.1	67	14.5
`writable` writable は TransformStream インターフェイスの読み取り専用プロパティで、この TransformStream が制御する WritableStream インスタンスを返します。	67	79	102	14.1	67	14.5
`TransformStreamDefaultController` TransformStreamDefaultController` はストリーム API のインターフェイスで、関連する ReadableStream と WritableStream を操作するメソッドを提供します。	67	79	102	14.1	67	14.5
`desiredSize` desiredSize は TransformStreamDefaultController インターフェイスの読み取り専用プロパティで、関連付けられた ReadableStream のキューを埋めるのに必要なサイズを返します。	67	79	102	14.1	67	14.5
`enqueue` enqueue() は TransformStreamDefaultController インターフェイスのメソッドで、このストリームの読み取り可能側にある指定されたチャンクをキューに入れます。	67	79	102	14.1	67	14.5
`error` error() は TransformStreamDefaultController インターフェイスのメソッドで、両側のストリームをエラーにします。これ以上何か操作をすると、指定されたエラーメッセージとともに失敗するようになり、キュー内のチャンクは破棄されます。	67	79	102	14.1	67	14.5
`terminate` terminate() は TransformStreamDefaultController インターフェイスのメソッドで、このストリームの読み取り可能側を閉じ、書き込み可能側をエラーにします。	67	79	102	14.1	67	14.5
`WritableStream` WritableStream はストリーム API のインターフェイスで、ストリーミングデータをシンクと呼ばれる宛先に書き込むための標準的な抽象化を提供します。このオブジェクトには、背圧とキューイングが組み込まれています。	59	16	100	14.1	59	14.5
`abort` abort() は WritableStream インターフェイスのメソッドで、ストリーミングを中止し、プロデューサーがストリームに正常に書き込むことができなくなり、キューに入れられた書き込みが破棄されてすぐにエラー状態に移行することを通知します。	59	16	100	14.1	59	14.5
`close` close() は WritableStream インターフェイスのメソッドで、関連付けられたストリームを閉じます。このメソッドが呼び出される前に書き込まれたチャンクはすべて、返されたプロミスが履行される前に送信されます。	81	81	100	14.1	81	14.5
`getWriter` getWriter() は WritableStream インターフェイスのメソッドで、WritableStreamDefaultWriter の新しいインスタンスを返し、そのインスタンスにストリームをロックします。ストリームがロックされている間、このライターが解放されるまで他のライターを取得することはできません。	59	16	100	14.1	59	14.5
`locked` locked は WritableStream インターフェイスの読み取り専用プロパティは、 WritableStream がライターにロックされているかどうかを示す論理値を返します。	59	16	100	14.1	59	14.5
`WritableStream` WritableStream() コンストラクターは、新しい WritableStream オブジェクトのインスタンスを作成します。	59	16	100	14.1	59	14.5
`WritableStreamDefaultController` WritableStreamDefaultController はストリーム API のインターフェイスで、WritableStream の状態を制御できるコントローラーを表します。 WritableStream を構築する場合、基になるシンクには、操作のために対応する WritableStreamDefaultController インスタンスが与えられます。	59	16	100	14.1	59	14.5
`error` WritableStreamDefaultController インターフェイスの error() メソッドにより、関連するストリームとの今後のやり取りがエラーになります。	59	16	100	14.1	59	14.5
`signal` signal は WritableStreamDefaultController インターフェイスの読み取り専用プロパティで、このコントローラーに関連付けられた AbortSignal を返します。	98	98	100	16.4	98	16.4
`WritableStreamDefaultWriter` WritableStreamDefaultWriter はストリーム API のインターフェイスで、 WritableStream.getWriter() によって返されるオブジェクトであり、作成されるとライターを WritableStream にロックし、他のストリームが基になるシンクに書き込めないようにします。	59	16	100	14.1	59	14.5
`abort` abort() は WritableStreamDefaultWriter インターフェイスのメソッドで、ストリームを中止し、プロデューサーがストリームに正常に書き込むことができなくなり、キューに書き込まれた書き込みを破棄してすぐにエラー状態に移行することを通知します。	59	16	100	14.1	59	14.5
`close` close() は WritableStreamDefaultWriter インターフェイスのメソッドで、関連する書き込み可能なストリームを閉じます。	59	16	100	14.1	59	14.5
`closed` closed は WritableStreamDefaultWriter インターフェイスの読み取り専用プロパティで、ストリームが閉じられた場合、またはライターのロックが解除された場合に満たし、ストリームがエラーの場合に拒否する Promise を返します。	59	16	100	14.1	59	14.5
`desiredSize` desiredSize は WritableStreamDefaultWriter インターフェイスの読み取り専用プロパティで、ストリームの内部キューを埋めるために必要な希望サイズを返します。	59	16	100	14.1	59	14.5
`ready` ready は WritableStreamDefaultWriter インターフェイスの読み取り専用プロパティで、ストリームの内部キューの目的のサイズが非正から正に移行したときに解決する Promise を返し、背圧が適用されなくなったことを通知します。	59	16	100	14.1	59	14.5
`releaseLock` releaseLock() は WritableStreamDefaultWriter インターフェイスのメソッドで、対応するストリームのライターのロックを解除します。ロックを解除すると、ライターはアクティブではなくなります。ロックを解除したときに関連するストリームにエラーが発生した場合、ライターはこれ以降同じようにエラーが発生したように見えます。そうでない場合、ライターは閉じられたように見えます。	59	16	100	14.1	59	14.5
`WritableStreamDefaultWriter` WritableStreamDefaultWriter() コンストラクターは、新しい WritableStreamDefaultWriter オブジェクトのインスタンスを作成します。	78	79	100	14.1	78	14.5
`write` write() は WritableStreamDefaultWriter インターフェイスのメソッドで、渡されたデータのチャンクを WritableStream とその基になるシンクに書き込み、その後、書き込み操作の成功または失敗を示すために解決される Promise を返します。	59	16	100	14.1	59	14.5

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const queueingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1024 });

const readableStream = new ReadableStream(
  {
    start(controller) {
      // …
    },
    pull(controller) {
      // …
    },
    cancel(err) {
      console.log("stream error:", err);
    },
  },
  queueingStrategy,
);

const size = queueingStrategy.size(chunk);

実務での使いどころ

Streams の活用

ByteLengthQueuingStrategy はストリーム API のインターフェイスで、ストリームを構築するときに使用できる組み込みのバイト長キューイング戦略を提供します。

注意点

古いブラウザでは対応していない場合がある。

実装メモ

一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

対応ブラウザ

基本構文

実務での使いどころ

Streams の活用

注意点

実装メモ

参考リンク