From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/readablestream/cancel/index.html | 130 +++++++++++++++++++++ .../ja/web/api/readablestream/getreader/index.html | 102 ++++++++++++++++ files/ja/web/api/readablestream/index.html | 115 ++++++++++++++++++ files/ja/web/api/readablestream/locked/index.html | 59 ++++++++++ .../web/api/readablestream/pipethrough/index.html | 80 +++++++++++++ files/ja/web/api/readablestream/pipeto/index.html | 82 +++++++++++++ .../api/readablestream/readablestream/index.html | 122 +++++++++++++++++++ files/ja/web/api/readablestream/tee/index.html | 99 ++++++++++++++++ 8 files changed, 789 insertions(+) create mode 100644 files/ja/web/api/readablestream/cancel/index.html create mode 100644 files/ja/web/api/readablestream/getreader/index.html create mode 100644 files/ja/web/api/readablestream/index.html create mode 100644 files/ja/web/api/readablestream/locked/index.html create mode 100644 files/ja/web/api/readablestream/pipethrough/index.html create mode 100644 files/ja/web/api/readablestream/pipeto/index.html create mode 100644 files/ja/web/api/readablestream/readablestream/index.html create mode 100644 files/ja/web/api/readablestream/tee/index.html (limited to 'files/ja/web/api/readablestream') diff --git a/files/ja/web/api/readablestream/cancel/index.html b/files/ja/web/api/readablestream/cancel/index.html new file mode 100644 index 0000000000..3f3752e658 --- /dev/null +++ b/files/ja/web/api/readablestream/cancel/index.html @@ -0,0 +1,130 @@ +--- +title: ReadableStream.cancel() +slug: Web/API/ReadableStream/cancel +tags: + - API + - Method + - ReadableStream + - Reference + - Streams + - cancel +translation_of: Web/API/ReadableStream/cancel +--- +
{{APIRef("Streams")}}
+ +

{{domxref("ReadableStream")}} インターフェイスの cancel() メソッドは、関連付けられたストリームをキャンセルします。 提供された reason パラメーターは、基になるソースに与えられ、使用する場合と使用しない場合があります。

+ +

キャンセルは、ストリームを完全に終了し、読み取り待ちのチャンクがキューに入れられている場合でも、それ以上データを必要としない場合に使用します。 キャンセルが呼び出された後、そのデータは失われ、ストリームは読み取り不能になります。 これらのチャンクをまだ読み取り、ストリームを完全に取り除くわけではない場合は、{{domxref("ReadableStreamDefaultController.close()")}} を使用します。

+ +

構文

+ +
var promise = readableStream.cancel(reason);
+ +

パラメーター

+ +
+
reason
+
人間が読むことができるキャンセルの理由を提供する {{domxref("DOMString")}}。
+
+ +

戻り値

+ +

{{jsxref("Promise")}}。 reason パラメーターで指定された値で満たされます。

+ +

例外

+ +
+
TypeError
+
キャンセルしようとしているストリームは {{domxref("ReadableStream")}} ではないか、ロックされています。
+
+ +

例

+ +

Jake Archibald によるフェッチのキャンセルの例では、ストリームを使用して、チャンクごとに WHATWG HTML 仕様をフェッチします。 各チャンクで文字列 "service workers" を検索します。 検索用語が見つかると、cancel() を使用してストリームをキャンセルします — 仕事は終了しているため、ストリームは不要になります。

+ +
var searchTerm = "service workers";
+// 一致した結果の両側を表示する文字数
+var contextBefore = 30;
+var contextAfter = 30;
+var caseInsensitive = true;
+var url = 'https://html.spec.whatwg.org/';
+
+console.log(`'${searchTerm}' を '${url}' で検索`);
+
+fetch(url).then(response => {
+  console.log('ヘッダーを受信しました');
+
+  var decoder = new TextDecoder();
+  var reader = response.body.getReader();
+  var toMatch = caseInsensitive ? searchTerm.toLowerCase() : searchTerm;
+  var bufferSize = Math.max(toMatch.length - 1, contextBefore);
+
+  var bytesReceived = 0;
+  var buffer = '';
+  var matchFoundAt = -1;
+
+  return reader.read().then(function process(result) {
+    if (result.done) {
+      console.log('一致が見つかりませんでした');
+      return;
+    }
+
+    bytesReceived += result.value.length;
+    console.log(`これまでに ${bytesReceived} バイトのデータを受信しました`);
+
+    buffer += decoder.decode(result.value, {stream: true});
+
+    // 一致するものが既に見つかっており、コンテキストを収集していますか？
+    if (matchFoundAt === -1) {
+      matchFoundAt = (caseInsensitive ? buffer.toLowerCase() : buffer).indexOf(toMatch);
+    }
+
+    if (matchFoundAt === -1) {
+      buffer = buffer.slice(-bufferSize);
+    }
+    else if (buffer.slice(matchFoundAt + toMatch.length).length >= contextAfter) {
+      console.log("これが一致したものです:")
+      console.log(buffer.slice(
+        Math.max(0, matchFoundAt - contextBefore),
+        matchFoundAt + toMatch.length + contextAfter
+      ));
+      console.log("フェッチのキャンセル");
+      reader.cancel();
+      return;
+    }
+    else {
+      console.log('一致が見つかりましたが、さらにコンテキストが必要です…');
+    }
+
+    // 読み続けます
+    return reader.read().then(process);
+  });
+}).catch(err => {
+  console.log("何かがおかしかった。 詳細については、開発ツールを参照してください。 応答に CORS ヘッダーがありませんか？");
+  throw err;
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("Streams","#rs-cancel","cancel()")}}{{Spec2('Streams')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ReadableStream.cancel")}}

diff --git a/files/ja/web/api/readablestream/getreader/index.html b/files/ja/web/api/readablestream/getreader/index.html new file mode 100644 index 0000000000..d59680ecaf --- /dev/null +++ b/files/ja/web/api/readablestream/getreader/index.html @@ -0,0 +1,102 @@ +--- +title: ReadableStream.getReader() +slug: Web/API/ReadableStream/getReader +tags: + - API + - Method + - ReadableStream + - Reference + - Streams + - getReader +translation_of: Web/API/ReadableStream/getReader +--- +
{{APIRef("Streams")}}
+ +

{{domxref("ReadableStream")}} インターフェイスの getReader() メソッドはリーダーを作成し、それでストリームをロックします。 ストリームがロックされている間は、このリーダーが開放されるまで他のリーダーを取得できません。

+ +

構文

+ +
var reader = readableStream.getReader({mode});
+ +

パラメーター

+ +
+
{mode} {{optional_inline}}
+
プロパティ mode を含むオブジェクト。 mode は作成するリーダーのタイプを指定する {{domxref("DOMString")}} を値として受け取ります。 値は次のとおりです。 +
    +
  • "byob"。 これにより、読み取り可能なバイトストリームを読み取ることができる {{domxref("ReadableStreamBYOBReader")}} が作成されます（つまり、「独自のバッファーを持ち込む」読み取りを処理できます）。
    • +
  • undefined（またはまったく指定されていない — これがデフォルトです）。 これにより、ストリームから個々のチャンクを読み取ることができる {{domxref("ReadableStreamDefaultReader")}} が作成されます。
    • +
+
+
+ +

戻り値

+ +

mode 値に応じて、{{domxref("ReadableStreamDefaultReader")}} または {{domxref("ReadableStreamBYOBReader")}} オブジェクトのインスタンス。

+ +

例外

+ +
+
RangeError
+
指定された mode 値は "byob" または undefined ではありません。
+
TypeError
+
リーダーを作成しようとしているストリームは {{domxref("ReadableStream")}} ではありません。
+
+ +

例

+ +

次の簡単な例では、getReader() を使用して作成した {{domxref("ReadableStreamDefaultReader")}} を使用して、以前に作成したカスタムの ReadableStream を読み取ります（完全なコードについては、単純なランダムストリームの例を参照）。 各チャンクを順番に読み取り、ストリームの読み取りが完了するまで UI に出力します。 ストリームの読み取りが完了すると、再帰関数から戻り、ストリーム全体を UI の別の部分に出力します。

+ +
function fetchStream() {
+  const reader = stream.getReader();
+  let charsReceived = 0;
+
+  // read() は、値を受け取ったときに解決する promise を返します
+  reader.read().then(function processText({ done, value }) {
+    // 結果オブジェクトには2つのプロパティが含まれます。
+    // done  - ストリームがすべてのデータを既に提供している場合は true。
+    // value - 一部のデータ。 done が true の場合、常に undefined。
+    if (done) {
+      console.log("Stream complete");
+      para.textContent = value;
+      return;
+    }
+
+    // フェッチしたストリームの値は Uint8Array です
+    charsReceived += value.length;
+    const chunk = value;
+    let listItem = document.createElement('li');
+    listItem.textContent = 'Received ' + charsReceived + ' characters so far. Current chunk = ' + chunk;
+    list2.appendChild(listItem);
+
+    result += chunk;
+
+    // さらに読み、この関数を再度呼び出します
+    return reader.read().then(processText);
+  });
+}
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("Streams","#rs-get-reader","getReader()")}}{{Spec2('Streams')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ReadableStream.getReader")}}

diff --git a/files/ja/web/api/readablestream/index.html b/files/ja/web/api/readablestream/index.html new file mode 100644 index 0000000000..549b952312 --- /dev/null +++ b/files/ja/web/api/readablestream/index.html @@ -0,0 +1,115 @@ +--- +title: ReadableStream +slug: Web/API/ReadableStream +tags: + - API + - Fetch + - Fetch API + - Files + - HTTP + - Interface + - Networking + - ReadableStream + - Reference + - Streams + - data +translation_of: Web/API/ReadableStream +--- +

{{APIRef("Streams")}}

+ +

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

+ +

コンストラクター

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

プロパティ

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

メソッド

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

例

+ +

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

+ +

これは {{domxref("Uint8Array")}} と組み合わせた {{domxref("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" } });
+});
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Streams','#rs-class','ReadableStream')}}{{Spec2('Streams')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.ReadableStream")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/readablestream/locked/index.html b/files/ja/web/api/readablestream/locked/index.html new file mode 100644 index 0000000000..15786ccf58 --- /dev/null +++ b/files/ja/web/api/readablestream/locked/index.html @@ -0,0 +1,59 @@ +--- +title: ReadableStream.locked +slug: Web/API/ReadableStream/locked +tags: + - API + - Property + - ReadableStream + - Reference + - Streams + - locked +translation_of: Web/API/ReadableStream/locked +--- +
{{APIRef("Streams")}}
+ +

{{domxref("ReadableStream")}} インターフェイスの locked 読み取り専用プロパティは、読み取り可能なストリームがリーダーにロックされているかどうかを返します。

+ +

構文

+ +
var locked = readableStream.locked;
+ +

値

+ +

読み取り可能なストリームがロックされているかどうかを示す {{jsxref("Boolean")}}。

+ +

例

+ +
const stream = new ReadableStream({
+  ...
+});
+
+const reader = stream.getReader();
+
+stream.locked
+// ストリームがリーダーにロックされているため、true を返すべきです
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("Streams","#rs-locked","locked")}}{{Spec2('Streams')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ReadableStream.locked")}}

diff --git a/files/ja/web/api/readablestream/pipethrough/index.html b/files/ja/web/api/readablestream/pipethrough/index.html new file mode 100644 index 0000000000..de1d89e4bb --- /dev/null +++ b/files/ja/web/api/readablestream/pipethrough/index.html @@ -0,0 +1,80 @@ +--- +title: ReadableStream.pipeThrough() +slug: Web/API/ReadableStream/pipeThrough +tags: + - API + - Experimental + - Method + - ReadableStream + - Reference + - Streams + - pipeThrough +translation_of: Web/API/ReadableStream/pipeThrough +--- +
{{SeeCompatTable}}{{APIRef("Streams")}}
+ +

{{domxref("ReadableStream")}} インターフェイスの pipeThrough() メソッドは、変換ストリームまたはその他の書き込み可能/読み取り可能なペアを介して現在のストリームをパイプするチェーン可能な方法を提供します。

+ +

ストリームをパイプすると、通常、パイプしている間はストリームがロックされ、他のリーダーがロックできなくなります。

+ +

構文

+ +
var transformedStream = readableStream.pipeThrough(transformStream[, options]);
+ +

パラメーター

+ +
+
transformStream
+
読み取り可能なストリームと書き込み可能なストリームで構成され、データをある形式から別の形式に変換する {{domxref("TransformStream")}}（または構造 {writable, readable} のオブジェクト）。 書き込み可能なストリーム（writable stream）に書き込まれたデータは、読み取り可能なストリーム（readable stream）によって何らかの変換された状態で読み取ることができます。 例えば、{{domxref("TextDecoder")}} ではバイトが書き込まれ、そこから文字列が読み取られ、動画デコーダーではエンコードされたバイトが書き込まれ、非圧縮動画フレームが読み取られます。
+
options {{optional_inline}}
+
書き込み可能なストリーム（writable stream）にパイプするときに使用するオプション。 {{domxref("ReadableStream.pipeTo","pipeTo")}}(writable, options) のような呼び出しで使用されます。
+
+ +

戻り値

+ +

transformStream の readable 側。

+ +

例外

+ +
+
TypeError
+
transformStream の writable および/または readable プロパティは未定義です。
+
+ +

例

+ +

次の例（ライブ実行中の完全なコードについては PNG のチャンクをアンパック、ソースコードについては png-transform-stream を参照）では、画像が取得され、そのボディが {{domxref("ReadableStream")}} として取得されます。 次に、読み取り可能なストリームのコンテンツをログに記録し、pipeThrough() を使用して、グレースケールバージョンのストリームを作成する新しい関数に送信し、新しいストリームのコンテンツもログに記録します。

+ +
// 元の画像をフェッチ
+fetch('png-logo.png')
+// その body を ReadableStream として取得
+.then(response => response.body)
+.then(rs => logReadableStream('Fetch Response Stream', rs))
+// 元の画像からグレースケール PNG ストリームを作成
+.then(body => body.pipeThrough(new PNGTransformStream()))
+.then(rs => logReadableStream('PNG Chunk Stream', rs))
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("Streams","#rs-pipe-through","pipeThrough()")}}{{Spec2('Streams')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ReadableStream.pipeThrough")}}

diff --git a/files/ja/web/api/readablestream/pipeto/index.html b/files/ja/web/api/readablestream/pipeto/index.html new file mode 100644 index 0000000000..eb2fc343db --- /dev/null +++ b/files/ja/web/api/readablestream/pipeto/index.html @@ -0,0 +1,82 @@ +--- +title: ReadableStream.pipeTo() +slug: Web/API/ReadableStream/pipeTo +tags: + - API + - Experimental + - Method + - ReadableStream + - Reference + - Streams + - pipeTo +translation_of: Web/API/ReadableStream/pipeTo +--- +
{{SeeCompatTable}}{{APIRef("Streams")}}
+ +

{{domxref("ReadableStream")}} インターフェイスの pipeTo() メソッドは、現在の ReadableStream を与えられた {{domxref("WritableStream")}} にパイプし、パイプのプロセスが正常に完了した場合は満たされ、エラーが発生した場合は拒否する promise を返します。

+ +

ストリームをパイプすると、通常、パイプしている間はストリームがロックされ、他のリーダーがロックできなくなります。

+ +

構文

+ +
var promise = readableStream.pipeTo(destination[, options]);
+ +

パラメーター

+ +
+
destination
+
{{domxref("ReadableStream")}} の最終的な宛先として機能する {{domxref("WritableStream")}}。
+
options {{optional_inline}}
+
ストリームのキャンセル、クローズ、または中止をいつ防止するかを定義できるプロパティを含むオプションのオブジェクト（すべて任意）。 オプションは次のとおりです。 +
    +
  1. preventClose: これが true に設定されている場合、ソースの ReadableStream を閉じても、宛先の WritableStream は閉じられません。 このメソッドは、宛先を閉じるときにエラーが発生しない限り、このプロセスが完了すると満たされる promise を返します。
    2. +
  2. preventAbort: これが true に設定されている場合、ソースの ReadableStream のエラーは宛先の WritableStream を中止しません。 このメソッドは、ソースのエラー、または宛先の中止中に発生したエラーで拒否される promise を返します。
    3. +
  3. preventCancel: これが true に設定されている場合、宛先の WritableStream のエラーはソースの ReadableStream をキャンセルしなくなります。 この場合、メソッドは、ソースのエラー、またはソースのキャンセル中に発生したエラーで拒否される promise を返します。 さらに、宛先の書き込み可能なストリームが閉じた状態または閉じようとしている状態で開始した場合、ソースの読み取り可能なストリームはキャンセルされなくなります。 この場合、メソッドは、閉じたストリームへのパイプが失敗したことを示すエラー、またはソースのキャンセル中に発生したエラーで拒否される promise を返します。
    4. +
+
+
+ +

戻り値

+ +

パイプのプロセスが完了したときに解決する {{jsxref("Promise")}}。

+ +

例外

+ +
+
TypeError
+
writableStream および/または readableStream オブジェクトは、書き込み可能なストリーム/読み取り可能なストリームではないか、ストリームの一方または両方がロックされています。
+
+ +

例

+ +
// 元の画像をフェッチ
+fetch('png-logo.png')
+// その body を ReadableStream として取得
+.then(response => response.body)
+.then(body => body.pipeThrough(new PNGTransformStream()))
+.then(rs => rs.pipeTo(new FinalDestinationStream()))
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("Streams","#rs-pipe-to","pipeTo()")}}{{Spec2('Streams')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ReadableStream.pipeTo")}}

diff --git a/files/ja/web/api/readablestream/readablestream/index.html b/files/ja/web/api/readablestream/readablestream/index.html new file mode 100644 index 0000000000..b00e5e146b --- /dev/null +++ b/files/ja/web/api/readablestream/readablestream/index.html @@ -0,0 +1,122 @@ +--- +title: ReadableStream.ReadableStream() +slug: Web/API/ReadableStream/ReadableStream +tags: + - API + - Constructor + - ReadableStream + - Reference +translation_of: Web/API/ReadableStream/ReadableStream +--- +
{{APIRef("Streams")}}
+ +

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

+ +

構文

+ +
var readableStream = new ReadableStream(underlyingSource[, queuingStrategy]);
+ +

パラメーター

+ +
+
underlyingSource
+
構築されたストリームのインスタンスの動作を定義するメソッドとプロパティを含むオブジェクト。 underlyingSource には次のものを含めることができます。 +
+
start(controller)
+
これは、オブジェクトが構築されるとすぐに呼び出されるメソッドです。 このメソッドの内容は開発者が定義し、ストリームのソースへのアクセスを取得し、ストリーム機能を設定するために必要な他のすべての操作を行う必要があります。 このプロセスを非同期で実行する場合、成功または失敗を通知する promise を返すことができます。 このメソッドに渡される controller パラメーターは、type プロパティの値に応じて、{{domxref("ReadableStreamDefaultController")}} または {{domxref("ReadableByteStreamController")}} です。 開発者はこれを使用して、セットアップ中にストリームを制御できます。
+
pull(controller) {{optional_inline}}
+
このメソッドは、開発者が定義し、ストリームの内部チャンクのキューがいっぱいになっていない場合、最高水準点に達するまで繰り返し呼び出されます。 pull() が promise を返す場合、その promise が満たされるまで再び呼び出されません。 promise が拒否された場合、ストリームはエラーになります。 このメソッドに渡される controller パラメーターは、type プロパティの値に応じて、{{domxref("ReadableStreamDefaultController")}} または {{domxref("ReadableByteStreamController")}} です。 開発者は、これを使用して、より多くのチャンクがフェッチされるときにストリームを制御できます。
+
cancel(reason) {{optional_inline}}
+
このメソッドは、開発者が定義し、ストリームがキャンセルされることをアプリが通知した場合に呼び出されます（例えば、{{domxref("ReadableStream.cancel()")}} が呼び出された場合）。 内容は、ストリームのソースへのアクセスを解放するために必要なことを行う必要があります。 このプロセスが非同期の場合、成功または失敗を通知する promise を返すことができます。 reason パラメータには、ストリームがキャンセルされた理由を説明する {{domxref("DOMString")}} が含まれています。
+
type {{optional_inline}}
+
このプロパティは、どのタイプの読み取り可能なストリームが処理されるかを制御します。 "bytes" に設定された値が含まれている場合、渡されるコントローラーオブジェクトは、BYOB（独自のバッファーを持ち込む）/バイトストリームを処理できる {{domxref("ReadableByteStreamController")}} になります。 含まれていない場合、渡されるコントローラーは {{domxref("ReadableStreamDefaultController")}} になります。
+
autoAllocateChunkSize {{optional_inline}}
+
バイトストリームの場合、開発者は autoAllocateChunkSize に正の整数値を設定して、ストリームの自動割り当て機能をオンにできます。 これをオンにすると、ストリームの実装は、指定された整数のサイズで {{jsxref("ArrayBuffer")}} を自動的に割り当て、コンシューマーがデフォルトのリーダーも使用できるようになります。
+
+
+
queuingStrategy {{optional_inline}}
+
オプションでストリームのキューイング戦略を定義するオブジェクト。 これには次の2つのパラメーターが必要です。 +
+
highWaterMark
+
負でない整数 — これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義します。
+
size(chunk)
+
パラメーター chunk を含むメソッド — これは、各チャンクに使用するサイズをバイト単位で示します。
+
+ +
+

注: 独自のカスタム queuingStrategy を定義するか、このオブジェクト値に {{domxref("ByteLengthQueuingStrategy")}} または {{domxref("CountQueuingStrategy")}} のインスタンスを使用できます。 queuingStrategy が指定されていない場合、使用されるデフォルトは、最高水準点が 1 の CountQueuingStrategy と同じです。

+
+
+
+ +

戻り値

+ +

{{domxref("ReadableStream")}} オブジェクトのインスタンス。

+ +

例外

+ +
+
RangeError
+
指定された type 値は、 "bytes" でも undefined でもありません。
+
+ +

例

+ +

次の単純な例では、コンストラクターを使用してカスタムの ReadableStream を作成します（完全なコードについては、単純なランダムストリームの例を参照）。 start() 関数は、1秒ごとにランダムなテキスト文字列を生成し、それをストリームのキューに入れます。 {{domxref("ReadableStream.cancel()")}} が何らかの理由で呼び出された場合、生成を停止するために cancel() 関数も提供します。

+ +

ボタンを押すと、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。

+ +
const stream = new ReadableStream({
+  start(controller) {
+    interval = setInterval(() => {
+      let string = randomChars();
+
+      // ストリームに文字列を追加
+      controller.enqueue(string);
+
+      // それを画面に表示
+      let listItem = document.createElement('li');
+      listItem.textContent = string;
+      list1.appendChild(listItem);
+    }, 1000);
+
+    button.addEventListener('click', function() {
+      clearInterval(interval);
+      fetchStream();
+      controller.close();
+    })
+  },
+  pull(controller) {
+    // この例では実際には pull は必要ありません
+  },
+  cancel() {
+    // リーダーがキャンセルされた場合に呼び出されるため、
+    // 文字列の生成を停止する必要があります
+    clearInterval(interval);
+  }
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("Streams","#rs-constructor","ReadableStream()")}}{{Spec2('Streams')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ReadableStream.ReadableStream")}}

diff --git a/files/ja/web/api/readablestream/tee/index.html b/files/ja/web/api/readablestream/tee/index.html new file mode 100644 index 0000000000..5c81e27ed0 --- /dev/null +++ b/files/ja/web/api/readablestream/tee/index.html @@ -0,0 +1,99 @@ +--- +title: ReadableStream.tee() +slug: Web/API/ReadableStream/tee +tags: + - API + - Method + - ReadableStream + - Reference + - Streams + - tee +translation_of: Web/API/ReadableStream/tee +--- +
{{APIRef("Streams")}}
+ +

{{domxref("ReadableStream")}} インターフェイスの tee() メソッドは、現在の読み取り可能なストリームをティーイングし、結果の2つの分岐を新しい {{domxref("ReadableStream")}} インスタンスとして含む2要素配列を返します。

+ +

これは、2つのリーダーがストリームを同時に、おそらく異なる速度で読み取ることができるようにする場合に便利です。 例えば、サーバーから応答を取得してブラウザーにストリームしたいが、ServiceWorker キャッシュにもストリームしたい場合は、ServiceWorker でこれを行うことができます。 応答のボディを複数回使用することはできないため、これを行うには2つのコピーが必要です。

+ +

ストリームをキャンセルするには、結果の両方の分岐をキャンセルする必要があります。 ストリームをティーイングすると、通常、その間はストリームがロックされ、他のリーダーがロックできなくなります。

+ +

構文

+ +
var teedStreams = readableStream.tee();
+ +

パラメーター

+ +

なし。

+ +

戻り値

+ +

2つの {{domxref("ReadableStream")}} インスタンスを含む {{jsxref("Array")}}。

+ +

例外

+ +
+
TypeError
+
ソースストリームは ReadableStream ではありません。
+
+ +

例

+ +

次の簡単な例では、以前に作成したストリームをティーイングした結果の両方のストリーム（生成された配列の2つのメンバーに含まれる）を、2つのストリームからデータを読み取り、各ストリームのチャンクを UI の異なる部分に順番に印刷する関数に渡します。 完全なコードについては、単純な tee の例を参照してください。

+ +
function teeStream() {
+  const teedOff = stream.tee();
+  fetchStream(teedOff[0], list2);
+  fetchStream(teedOff[1], list3);
+}
+
+function fetchStream(stream, list) {
+  const reader = stream.getReader();
+  let charsReceived = 0;
+
+  // read() は、値を受け取ったときに解決する promise を返します
+  reader.read().then(function processText({ done, value }) {
+    // 結果オブジェクトには2つのプロパティが含まれます。
+    // done  - ストリームがすべてのデータを既に提供している場合は true。
+    // value - 一部のデータ。 done が true の場合、常に undefined。
+    if (done) {
+      console.log("Stream complete");
+      return;
+    }
+
+    // フェッチしたストリームの値は Uint8Array です
+    charsReceived += value.length;
+    const chunk = value;
+    let listItem = document.createElement('li');
+    listItem.textContent = 'Read ' + charsReceived + ' characters so far. Current chunk = ' + chunk;
+    list.appendChild(listItem);
+
+    // さらに読み、この関数を再度呼び出します
+    return reader.read().then(processText);
+  });
+}
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("Streams","#rs-tee","tee()")}}{{Spec2('Streams')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ReadableStream.tee")}}

-- cgit v1.2.3-54-g00ecf