initial commit

8 files changed, 789 insertions, 0 deletions

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
+---
+<div>{{APIRef("Streams")}}</div>
+
+<p class="summary">{{domxref("ReadableStream")}} インターフェイスの <strong><code>cancel()</code></strong> メソッドは、関連付けられたストリームをキャンセルします。 提供された <code>reason</code> パラメーターは、基になるソースに与えられ、使用する場合と使用しない場合があります。</p>
+
+<p>キャンセルは、ストリームを完全に終了し、読み取り待ちのチャンクがキューに入れられている場合でも、それ以上データを必要としない場合に使用します。 キャンセルが呼び出された後、そのデータは失われ、ストリームは読み取り不能になります。 これらのチャンクをまだ読み取り、ストリームを完全に取り除くわけではない場合は、{{domxref("ReadableStreamDefaultController.close()")}} を使用します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>promise</em> = <em>readableStream</em>.cancel(reason);</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt>reason</dt>
+ <dd>人間が読むことができるキャンセルの理由を提供する {{domxref("DOMString")}}。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>{{jsxref("Promise")}}。 <code>reason</code> パラメーターで指定された値で満たされます。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt>TypeError</dt>
+ <dd>キャンセルしようとしているストリームは {{domxref("ReadableStream")}} ではないか、ロックされています。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>Jake Archibald による<a href="https://jsbin.com/gameboy/edit?js,console">フェッチのキャンセル</a>の例では、ストリームを使用して、チャンクごとに WHATWG HTML 仕様をフェッチします。 各チャンクで文字列 "service workers" を検索します。 検索用語が見つかると、<code>cancel()</code> を使用してストリームをキャンセルします — 仕事は終了しているため、ストリームは不要になります。</p>
+
+<pre class="brush: js">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 =&gt; {
+  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 &gt;= 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 =&gt; {
+  console.log("何かがおかしかった。 詳細については、開発ツールを参照してください。 応答に CORS ヘッダーがありませんか？");
+  throw err;
+});</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Streams","#rs-cancel","cancel()")}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.ReadableStream.cancel")}}</p>
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
+---
+<div>{{APIRef("Streams")}}</div>
+
+<p class="summary"><span class="seoSummary">{{domxref("ReadableStream")}} インターフェイスの <strong><code>getReader()</code></strong> メソッドはリーダーを作成し、それでストリームをロックします。 ストリームがロックされている間は、このリーダーが開放されるまで他のリーダーを取得できません。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>reader</em> = <em>readableStream</em>.getReader(<em>{mode}</em>);</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt>{mode} {{optional_inline}}</dt>
+ <dd>プロパティ <code>mode</code> を含むオブジェクト。 <code>mode</code> は作成するリーダーのタイプを指定する {{domxref("DOMString")}} を値として受け取ります。 値は次のとおりです。
+ <ul>
+  <li><code>"byob"</code>。 これにより、読み取り可能なバイトストリームを読み取ることができる {{domxref("ReadableStreamBYOBReader")}} が作成されます（つまり、「独自のバッファーを持ち込む」読み取りを処理できます）。</li>
+  <li><code>undefined</code>（またはまったく指定されていない — これがデフォルトです）。 これにより、ストリームから個々のチャンクを読み取ることができる {{domxref("ReadableStreamDefaultReader")}} が作成されます。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p><code>mode</code> 値に応じて、{{domxref("ReadableStreamDefaultReader")}} または {{domxref("ReadableStreamBYOBReader")}} オブジェクトのインスタンス。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt>RangeError</dt>
+ <dd>指定された <code>mode</code> 値は <code>"byob"</code> または <code>undefined</code> ではありません。</dd>
+ <dt>TypeError</dt>
+ <dd>リーダーを作成しようとしているストリームは {{domxref("ReadableStream")}} ではありません。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>次の簡単な例では、<code>getReader()</code> を使用して作成した {{domxref("ReadableStreamDefaultReader")}} を使用して、以前に作成したカスタムの <code>ReadableStream</code> を読み取ります（完全なコードについては、<a href="https://mdn.github.io/dom-examples/streams/simple-random-stream/">単純なランダムストリームの例</a>を参照）。 各チャンクを順番に読み取り、ストリームの読み取りが完了するまで UI に出力します。 ストリームの読み取りが完了すると、再帰関数から戻り、ストリーム全体を UI の別の部分に出力します。</p>
+
+<pre class="brush: js">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);
+  });
+}</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Streams","#rs-get-reader","getReader()")}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.ReadableStream.getReader")}}</p>
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
+---
+<p>{{APIRef("Streams")}}</p>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/API/Streams_API">Streams API</a> の <code>ReadableStream</code> インターフェイスは、バイトデータの読み取り可能なストリームを表します。 <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> は、{{domxref("Response")}} オブジェクトの {{domxref("Body.body", "body")}} プロパティを介して <code>ReadableStream</code> の具体的なインスタンスを提供します。</span></p>
+
+<h2 id="Constructor" name="Constructor">コンストラクター</h2>
+
+<dl>
+ <dt>{{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}</dt>
+ <dd>指定されたハンドラーから読み取り可能なストリームのオブジェクトを作成して返します。</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<dl>
+ <dt>{{domxref("ReadableStream.locked")}} {{readonlyInline}}</dt>
+ <dd><code>locked</code> ゲッターは、読み取り可能なストリームが<a href="https://streams.spec.whatwg.org/#locked-to-a-reader">リーダーにロックされている</a>（英語）かどうかを返します。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<dl>
+ <dt>{{domxref("ReadableStream.cancel()")}}</dt>
+ <dd>ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された <code>reason</code> 引数は、基になるソースに与えられ、使用する場合と使用しない場合があります。</dd>
+ <dt>{{domxref("ReadableStream.getReader()")}}</dt>
+ <dd>リーダーを作成し、ストリームをロックします。 ストリームがロックされている間は、このリーダーが開放されるまで他のリーダーを取得できません。</dd>
+ <dt>{{domxref("ReadableStream.pipeThrough()")}}</dt>
+ <dd>変換ストリームまたはその他の書き込み可能/読み取り可能なペアを介して、現在のストリームをパイプ接続するチェーン可能な方法を提供します。</dd>
+ <dt>{{domxref("ReadableStream.pipeTo()")}}</dt>
+ <dd>現在の <code>ReadableStream</code> を特定の {{domxref("WritableStream")}} にパイプし、パイピングプロセスが正常に完了したときに満たす promise を返します。 エラーが発生した場合は拒否します。</dd>
+ <dt>{{domxref("ReadableStream.tee()")}}</dt>
+ <dd><code>tee</code> メソッドは、この読み取り可能なストリームを <a href="https://streams.spec.whatwg.org/#tee-a-readable-stream" id="ref-for-tee-a-readable-stream②">tee</a> し、結果の2つの分岐を含む2要素配列を新しい {{domxref("ReadableStream")}} インスタンスとして返します。 これらの各ストリームは、同じ着信データを受信します。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>次の例では、別のリソースからフェッチした HTML の断片をブラウザーにストリーミングするために、人工的な {{domxref("Response")}} が作成されます。</p>
+
+<p>これは {{domxref("Uint8Array")}} と組み合わせた {{domxref("ReadableStream")}} の使用方法を示しています。</p>
+
+<pre class="brush: js">fetch("https://www.example.org/").then((response) =&gt; {
+  const reader = response.body.getReader();
+  const stream = new ReadableStream({
+    start(controller) {
+      // 次の関数は各データチャンクを処理します
+      function push() {
+        // done は Boolean で、value は Uint8Array です
+        reader.read().then(({ done, value }) =&gt; {
+          // 読み取るデータはもうありませんか？
+          if (done) {
+            // データの送信が完了したことをブラウザーに伝えます
+            controller.close();
+            return;
+          }
+
+          // データを取得し、コントローラー経由でブラウザーに送信します
+          controller.enqueue(value);
+          push();
+        });
+      };
+
+      push();
+    }
+  });
+
+  return new Response(stream, { headers: { "Content-Type": "text/html" } });
+});
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Streams','#rs-class','ReadableStream')}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.ReadableStream")}}</p>
+</div>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="https://whatwg-stream-visualizer.glitch.me/">WHATWG Stream Visualiser</a>: 読み取り可能なストリーム、書き込み可能なストリーム、および変換ストリームの基本的な視覚化。</li>
+</ul>
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
+---
+<div>{{APIRef("Streams")}}</div>
+
+<p class="summary"><span class="seoSummary">{{domxref("ReadableStream")}} インターフェイスの <strong><code>locked</code></strong> 読み取り専用プロパティは、読み取り可能なストリームが<a href="https://streams.spec.whatwg.org/#lock" id="ref-for-locked-to-a-reader②">リーダーにロックされている</a>かどうかを返します。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><var><code>var <em>locked</em> = </code>readableStream</var>.locked;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>読み取り可能なストリームがロックされているかどうかを示す {{jsxref("Boolean")}}。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js">const stream = new ReadableStream({
+  ...
+});
+
+const reader = stream.getReader();
+
+stream.locked
+// ストリームがリーダーにロックされているため、true を返すべきです</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Streams","#rs-locked","locked")}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.ReadableStream.locked")}}</p>
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
+---
+<div>{{SeeCompatTable}}{{APIRef("Streams")}}</div>
+
+<p class="summary"><span class="seoSummary">{{domxref("ReadableStream")}} インターフェイスの <strong><code>pipeThrough()</code></strong> メソッドは、変換ストリームまたはその他の書き込み可能/読み取り可能なペアを介して現在のストリームをパイプするチェーン可能な方法を提供します。</span></p>
+
+<p>ストリームをパイプすると、通常、パイプしている間はストリームがロックされ、他のリーダーがロックできなくなります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>transformedStream</em> = <em>readableStream</em>.pipeThrough(<em>transformStream</em>[, <em>options</em>]);</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt>transformStream</dt>
+ <dd>読み取り可能なストリームと書き込み可能なストリームで構成され、データをある形式から別の形式に変換する {{domxref("TransformStream")}}（または構造 <code>{writable, readable}</code> のオブジェクト）。 書き込み可能なストリーム（<code>writable</code> stream）に書き込まれたデータは、読み取り可能なストリーム（<code>readable</code> stream）によって何らかの変換された状態で読み取ることができます。 例えば、{{domxref("TextDecoder")}} ではバイトが書き込まれ、そこから文字列が読み取られ、動画デコーダーではエンコードされたバイトが書き込まれ、非圧縮動画フレームが読み取られます。</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>書き込み可能なストリーム（<code>writable</code> stream）にパイプするときに使用するオプション。 {{domxref("ReadableStream.pipeTo","pipeTo")}}<code>(writable, options)</code> のような呼び出しで使用されます。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p><code>transformStream</code> の <code>readable</code> 側。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt>TypeError</dt>
+ <dd><code>transformStream</code> の <code>writable</code> および/または <code>readable</code> プロパティは未定義です。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>次の例（ライブ実行中の完全なコードについては <a href="https://mdn.github.io/dom-examples/streams/png-transform-stream/">PNG のチャンクをアンパック</a>、ソースコードについては <a href="https://github.com/mdn/dom-examples/tree/master/streams/png-transform-stream">png-transform-stream</a> を参照）では、画像が取得され、そのボディが {{domxref("ReadableStream")}} として取得されます。 次に、読み取り可能なストリームのコンテンツをログに記録し、<code>pipeThrough()</code> を使用して、グレースケールバージョンのストリームを作成する新しい関数に送信し、新しいストリームのコンテンツもログに記録します。</p>
+
+<pre class="brush: js">// 元の画像をフェッチ
+fetch('png-logo.png')
+// その body を ReadableStream として取得
+.then(response =&gt; response.body)
+.then(rs =&gt; logReadableStream('Fetch Response Stream', rs))
+// 元の画像からグレースケール PNG ストリームを作成
+.then(body =&gt; body.pipeThrough(new PNGTransformStream()))
+.then(rs =&gt; logReadableStream('PNG Chunk Stream', rs))</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Streams","#rs-pipe-through","pipeThrough()")}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.ReadableStream.pipeThrough")}}</p>
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
+---
+<div>{{SeeCompatTable}}{{APIRef("Streams")}}</div>
+
+<p class="summary"><span class="seoSummary">{{domxref("ReadableStream")}} インターフェイスの <strong><code>pipeTo()</code></strong> メソッドは、現在の <code>ReadableStream</code> を<span class="tlid-translation translation" lang="ja"><span title="">与えられた</span></span> {{domxref("WritableStream")}} にパイプし、パイプのプロセスが正常に完了した場合は満たされ、エラーが発生した場合は拒否する promise を返します。</span></p>
+
+<p>ストリームをパイプすると、通常、パイプしている間はストリームがロックされ、他のリーダーがロックできなくなります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>promise</em> = <em>readableStream</em>.pipeTo(<em>destination</em>[, <em>options</em>]);</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt>destination</dt>
+ <dd>{{domxref("ReadableStream")}} の最終的な宛先として機能する {{domxref("WritableStream")}}。</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>ストリームのキャンセル、クローズ、または中止をいつ防止するかを定義できるプロパティを含むオプションのオブジェクト（すべて任意）。 オプションは次のとおりです。
+ <ol>
+  <li><code>preventClose</code>: これが <code>true</code> に設定されている場合、ソースの <code>ReadableStream</code> を閉じても、宛先の <code>WritableStream</code> は閉じられません。 このメソッドは、宛先を閉じるときにエラーが発生しない限り、このプロセスが完了すると満たされる promise を返します。</li>
+  <li><code>preventAbort</code>: これが <code>true</code> に設定されている場合、ソースの <code>ReadableStream</code> のエラーは宛先の <code>WritableStream</code> を中止しません。 このメソッドは、ソースのエラー、または宛先の中止中に発生したエラーで拒否される promise を返します。</li>
+  <li><code>preventCancel</code>: これが <code>true</code> に設定されている場合、宛先の <code>WritableStream</code> のエラーはソースの <code>ReadableStream</code> をキャンセルしなくなります。 この場合、メソッドは、ソースのエラー、またはソースのキャンセル中に発生したエラーで拒否される promise を返します。 さらに、宛先の書き込み可能なストリームが閉じた状態または閉じようとしている状態で開始した場合、ソースの読み取り可能なストリームはキャンセルされなくなります。 この場合、メソッドは、閉じたストリームへのパイプが失敗したことを示すエラー、またはソースのキャンセル中に発生したエラーで拒否される promise を返します。</li>
+ </ol>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>パイプのプロセスが完了したときに解決する {{jsxref("Promise")}}。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt>TypeError</dt>
+ <dd><code>writableStream</code> および/または <code>readableStream</code> オブジェクトは、書き込み可能なストリーム/読み取り可能なストリームではないか、ストリームの一方または両方がロックされています。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js">// 元の画像をフェッチ
+fetch('png-logo.png')
+// その body を ReadableStream として取得
+.then(response =&gt; response.body)
+.then(body =&gt; body.pipeThrough(new PNGTransformStream()))
+.then(rs =&gt; rs.pipeTo(new FinalDestinationStream()))</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Streams","#rs-pipe-to","pipeTo()")}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.ReadableStream.pipeTo")}}</p>
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
+---
+<div>{{APIRef("Streams")}}</div>
+
+<p class="summary"><span class="seoSummary"><strong><code>ReadableStream()</code></strong> コンストラクターは、指定されたハンドラーから読み取り可能なストリームのオブジェクトを作成して返します。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>readableStream</em> = new ReadableStream(<em>underlyingSource</em>[, <em>queuingStrategy</em>]);</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt>underlyingSource</dt>
+ <dd>構築されたストリームのインスタンスの動作を定義するメソッドとプロパティを含むオブジェクト。 <code>underlyingSource</code> には次のものを含めることができます。
+ <dl>
+  <dt>start(controller)</dt>
+  <dd>これは、オブジェクトが構築されるとすぐに呼び出されるメソッドです。 このメソッドの内容は開発者が定義し、ストリームのソースへのアクセスを取得し、ストリーム機能を設定するために必要な他のすべての操作を行う必要があります。 このプロセスを非同期で実行する場合、成功または失敗を通知する promise を返すことができます。 このメソッドに渡される <code>controller</code> パラメーターは、<code>type</code> プロパティの値に応じて、{{domxref("ReadableStreamDefaultController")}} または {{domxref("ReadableByteStreamController")}} です。 開発者はこれを使用して、セットアップ中にストリームを制御できます。</dd>
+  <dt>pull(controller) {{optional_inline}}</dt>
+  <dd>このメソッドは、開発者が定義し、ストリームの内部チャンクのキューがいっぱいになっていない場合、最高水準点に達するまで繰り返し呼び出されます。 <code>pull()</code> が promise を返す場合、その promise が満たされるまで再び呼び出されません。 promise が拒否された場合、ストリームはエラーになります。 このメソッドに渡される <code>controller</code> パラメーターは、<code>type</code> プロパティの値に応じて、{{domxref("ReadableStreamDefaultController")}} または {{domxref("ReadableByteStreamController")}} です。 開発者は、これを使用して、より多くのチャンクがフェッチされるときにストリームを制御できます。</dd>
+  <dt>cancel(reason) {{optional_inline}}</dt>
+  <dd>このメソッドは、開発者が定義し、ストリームがキャンセルされることをアプリが通知した場合に呼び出されます（例えば、{{domxref("ReadableStream.cancel()")}} が呼び出された場合）。 内容は、ストリームのソースへのアクセスを解放するために必要なことを行う必要があります。 このプロセスが非同期の場合、成功または失敗を通知する promise を返すことができます。 <code>reason</code> パラメータには、ストリームがキャンセルされた理由を説明する {{domxref("DOMString")}} が含まれています。</dd>
+  <dt>type {{optional_inline}}</dt>
+  <dd>このプロパティは、どのタイプの読み取り可能なストリームが処理されるかを制御します。 <code>"bytes"</code> に設定された値が含まれている場合、渡されるコントローラーオブジェクトは、BYOB（独自のバッファーを持ち込む）/バイトストリームを処理できる {{domxref("ReadableByteStreamController")}} になります。 含まれていない場合、渡されるコントローラーは {{domxref("ReadableStreamDefaultController")}} になります。</dd>
+  <dt>autoAllocateChunkSize {{optional_inline}}</dt>
+  <dd>バイトストリームの場合、開発者は <code>autoAllocateChunkSize</code> に正の整数値を設定して、ストリームの自動割り当て機能をオンにできます。 これをオンにすると、ストリームの実装は、指定された整数のサイズで {{jsxref("ArrayBuffer")}} を自動的に割り当て、コンシューマーがデフォルトのリーダーも使用できるようになります。</dd>
+ </dl>
+ </dd>
+ <dt>queuingStrategy {{optional_inline}}</dt>
+ <dd>オプションでストリームのキューイング戦略を定義するオブジェクト。 これには次の2つのパラメーターが必要です。
+ <dl>
+  <dt>highWaterMark</dt>
+  <dd>負でない整数 — これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義します。</dd>
+  <dt>size(chunk)</dt>
+  <dd>パラメーター <code>chunk</code> を含むメソッド — これは、各チャンクに使用するサイズをバイト単位で示します。</dd>
+ </dl>
+
+ <div class="note">
+ <p><strong>注</strong>: 独自のカスタム <code>queuingStrategy</code> を定義するか、このオブジェクト値に {{domxref("ByteLengthQueuingStrategy")}} または {{domxref("CountQueuingStrategy")}} のインスタンスを使用できます。 <code>queuingStrategy</code> が指定されていない場合、使用されるデフォルトは、最高水準点が 1 の <code>CountQueuingStrategy</code> と同じです。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>{{domxref("ReadableStream")}} オブジェクトのインスタンス。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt>RangeError</dt>
+ <dd>指定された <code>type</code> 値は、 <code>"bytes"</code> でも <code>undefined</code> でもありません。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>次の単純な例では、コンストラクターを使用してカスタムの <code>ReadableStream</code> を作成します（完全なコードについては、<a href="https://mdn.github.io/dom-examples/streams/simple-random-stream/">単純なランダムストリームの例</a>を参照）。 <code>start()</code> 関数は、1秒ごとにランダムなテキスト文字列を生成し、それをストリームのキューに入れます。 {{domxref("ReadableStream.cancel()")}} が何らかの理由で呼び出された場合、生成を停止するために <code>cancel()</code> 関数も提供します。</p>
+
+<p>ボタンを押すと、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。</p>
+
+<pre class="brush: js">const stream = new ReadableStream({
+  start(controller) {
+    interval = setInterval(() =&gt; {
+      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);
+  }
+});</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Streams","#rs-constructor","ReadableStream()")}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.ReadableStream.ReadableStream")}}</p>
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
+---
+<div>{{APIRef("Streams")}}</div>
+
+<p class="summary"><span class="seoSummary">{{domxref("ReadableStream")}} インターフェイスの <strong><code>tee()</code></strong> メソッドは、現在の読み取り可能なストリームを<a href="https://streams.spec.whatwg.org/#tee-a-readable-stream">ティーイング</a>し、結果の2つの分岐を新しい {{domxref("ReadableStream")}} インスタンスとして含む2要素配列を返します。</span></p>
+
+<p>これは、2つのリーダーがストリームを同時に、おそらく異なる速度で読み取ることができるようにする場合に便利です。 例えば、サーバーから応答を取得してブラウザーにストリームしたいが、ServiceWorker キャッシュにもストリームしたい場合は、ServiceWorker でこれを行うことができます。 応答のボディを複数回使用することはできないため、これを行うには2つのコピーが必要です。</p>
+
+<p>ストリームをキャンセルするには、結果の両方の分岐をキャンセルする必要があります。 ストリームをティーイングすると、通常、その間はストリームがロックされ、他のリーダーがロックできなくなります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>teedStreams</em> = <em>readableStream</em>.tee();</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<p>なし。</p>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>2つの {{domxref("ReadableStream")}} インスタンスを含む {{jsxref("Array")}}。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt>TypeError</dt>
+ <dd>ソースストリームは <code>ReadableStream</code> ではありません。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>次の簡単な例では、以前に作成したストリームをティーイングした結果の両方のストリーム（生成された配列の2つのメンバーに含まれる）を、2つのストリームからデータを読み取り、各ストリームのチャンクを UI の異なる部分に順番に印刷する関数に渡します。 完全なコードについては、<a href="https://mdn.github.io/dom-examples/streams/simple-tee-example/">単純な tee の例</a>を参照してください。</p>
+
+<pre class="brush: js">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);
+  });
+}</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Streams","#rs-tee","tee()")}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.ReadableStream.tee")}}</p>