ReadableStream

Streams APIReadableStream インターフェイスは、バイトデータの読み取り可能なストリームを表します。 Fetch API は、Response オブジェクトの body プロパティを介して ReadableStream の具体的なインスタンスを提供します。

コンストラクター

ReadableStream()
指定されたハンドラーから読み取り可能なストリームのオブジェクトを作成して返します。

プロパティ

ReadableStream.locked 読取専用
locked ゲッターは、読み取り可能なストリームがリーダーにロックされている(英語)かどうかを返します。

メソッド

ReadableStream.cancel()
ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された reason 引数は、基になるソースに与えられ、使用する場合と使用しない場合があります。
ReadableStream.getReader()
リーダーを作成し、ストリームをロックします。 ストリームがロックされている間は、このリーダーが開放されるまで他のリーダーを取得できません。
ReadableStream.pipeThrough()
変換ストリームまたはその他の書き込み可能/読み取り可能なペアを介して、現在のストリームをパイプ接続するチェーン可能な方法を提供します。
ReadableStream.pipeTo()
現在の ReadableStream を特定の WritableStream にパイプし、パイピングプロセスが正常に完了したときに満たす promise を返します。 エラーが発生した場合は拒否します。
ReadableStream.tee()
tee メソッドは、この読み取り可能なストリームを tee し、結果の2つの分岐を含む2要素配列を新しい ReadableStream インスタンスとして返します。 これらの各ストリームは、同じ着信データを受信します。

次の例では、別のリソースからフェッチした HTML の断片をブラウザーにストリーミングするために、人工的な Response が作成されます。

これは Uint8Array と組み合わせた ReadableStream の使用方法を示しています。

fetch("https://www.example.org/").then((response) => {
  const reader = response.body.getReader();
  const stream = new ReadableStream({
    start(controller) {
      // 次の関数は各データチャンクを処理します
      function push() {
        // done は Boolean で、value は Uint8Array です
        reader.read().then(({ done, value }) => {
          // 読み取るデータはもうありませんか?
          if (done) {
            // データの送信が完了したことをブラウザーに伝えます
            controller.close();
            return;
          }

          // データを取得し、コントローラー経由でブラウザーに送信します
          controller.enqueue(value);
          push();
        });
      };
      
      push();
    }
  });

  return new Response(stream, { headers: { "Content-Type": "text/html" } });
});

仕様

仕様 状態 コメント
Streams
ReadableStream の定義
現行の標準 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ReadableStream
実験的
Chrome 完全対応 43Edge 完全対応 14Firefox 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 30Safari ? WebView Android 完全対応 43Chrome Android 完全対応 43Firefox Android 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 30Safari iOS ? Samsung Internet Android 完全対応 4.0
ReadableStream() constructor
実験的
Chrome 完全対応 43Edge 未対応 なしFirefox 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 30Safari ? WebView Android 完全対応 43Chrome Android 完全対応 43Firefox Android 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 30Safari iOS ? Samsung Internet Android 完全対応 4.0
cancel
実験的
Chrome 完全対応 43Edge 完全対応 14Firefox 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 30Safari ? WebView Android 完全対応 43Chrome Android 完全対応 43Firefox Android 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 30Safari iOS ? Samsung Internet Android 完全対応 4.0
getReader
実験的
Chrome 完全対応 43Edge 完全対応 14Firefox 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 30Safari ? WebView Android 完全対応 43Chrome Android 完全対応 43Firefox Android 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 30Safari iOS ? Samsung Internet Android 完全対応 4.0
locked
実験的
Chrome 完全対応 43Edge 完全対応 14Firefox 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 30Safari ? WebView Android 完全対応 43Chrome Android 完全対応 43Firefox Android 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 30Safari iOS ? Samsung Internet Android 完全対応 4.0
pipeThrough
実験的
Chrome 完全対応 59Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android 未対応 なしOpera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 7.0
pipeTo
実験的
Chrome 完全対応 59Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android 未対応 なしOpera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 7.0
tee
実験的
Chrome 完全対応 43Edge 未対応 なしFirefox 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 30Safari ? WebView Android 完全対応 43Chrome Android 完全対応 43Firefox Android 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 30Safari iOS ? Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

  • WHATWG Stream Visualiser: 読み取り可能なストリーム、書き込み可能なストリーム、および変換ストリームの基本的な視覚化。