diff options
Diffstat (limited to 'files/ja/web/api/writablestream')
| -rw-r--r-- | files/ja/web/api/writablestream/abort/index.html | 84 | ||||
| -rw-r--r-- | files/ja/web/api/writablestream/getwriter/index.html | 132 | ||||
| -rw-r--r-- | files/ja/web/api/writablestream/index.html | 153 | ||||
| -rw-r--r-- | files/ja/web/api/writablestream/locked/index.html | 70 | ||||
| -rw-r--r-- | files/ja/web/api/writablestream/writablestream/index.html | 161 |
5 files changed, 600 insertions, 0 deletions
diff --git a/files/ja/web/api/writablestream/abort/index.html b/files/ja/web/api/writablestream/abort/index.html new file mode 100644 index 0000000000..9b8a2ba900 --- /dev/null +++ b/files/ja/web/api/writablestream/abort/index.html @@ -0,0 +1,84 @@ +--- +title: WritableStream.abort() +slug: Web/API/WritableStream/abort +tags: + - API + - Experimental + - Method + - Reference + - Streams + - WritableStream + - abort +translation_of: Web/API/WritableStream/abort +--- +<div>{{draft}}{{SeeCompatTable}}{{APIRef("Streams")}}</div> + +<p class="summary"><span class="seoSummary">{{domxref("WritableStream")}} インターフェイスの <strong><code>abort()</code></strong> メソッドはストリームを中止し、プロデューサーがストリームに正常に書き込むことができなくなり、キューに入れられた書き込みが破棄されてすぐにエラー状態に移行することを通知します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>promise</em> = <em>writableStream</em>.abort(<em>reason</em>);</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("WritableStream")}} ではないか、ロックされています。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> writableStream <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">WritableStream</span><span class="punctuation token">(</span><span class="punctuation token">{</span> + <span class="function token">write</span><span class="punctuation token">(</span>chunk<span class="punctuation token">)</span> <span class="punctuation token">{</span> + ... + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="function token">close</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">...</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="function token">abort</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="punctuation token">{</span> + ... + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">,</span> queuingStrategy<span class="punctuation token">)</span><span class="punctuation token">;</span> + +... + +// 必要に応じて、後でストリームを中止します +writableStream.abort(); +</code> +</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","#ws-abort","abort()")}}</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.WritableStream.abort")}}</p> diff --git a/files/ja/web/api/writablestream/getwriter/index.html b/files/ja/web/api/writablestream/getwriter/index.html new file mode 100644 index 0000000000..5199e752d4 --- /dev/null +++ b/files/ja/web/api/writablestream/getwriter/index.html @@ -0,0 +1,132 @@ +--- +title: WritableStream.getWriter() +slug: Web/API/WritableStream/getWriter +tags: + - API + - Experimental + - Method + - Reference + - Streams + - WritableStream + - getWriter +translation_of: Web/API/WritableStream/getWriter +--- +<div>{{draft}}{{SeeCompatTable}}{{APIRef("Streams")}}</div> + +<p class="summary"><span class="seoSummary">{{domxref("WritableStream")}} インターフェイスの <strong><code>getWriter()</code></strong> メソッドは、{{domxref("WritableStreamDefaultWriter")}} の新しいインスタンスを返し、そのインスタンスにストリームをロックします。 ストリームがロックされている間、このライターが開放されるまで他のライターを取得することはできません。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>writer</em> = <em>writableStream</em>.getWriter();</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>{{domxref("WritableStreamDefaultWriter")}} オブジェクトのインスタンス。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt>TypeError</dt> + <dd>ライターを作成しようとしているストリームは {{domxref("WritableStream")}} ではありません。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次の例は、このインターフェイスのいくつかの機能を示しています。 カスタムのシンクと API 提供のキューイング戦略を使用した <code>WritableStream</code> の作成を示しています。 次に、<code>sendMessage()</code> という関数を呼び出し、新しく作成したストリームと文字列を渡します。 この関数内で、{{domxref("WritableStreamDefaultWriter")}} のインスタンスを返すストリームの <code>getWriter()</code> メソッドを呼び出します。 <code>forEach()</code> 呼び出しを使用して、文字列の各チャンクをストリームに書き込みます。 最後に、<code>write()</code> および <code>close()</code> は、チャンクとストリームの成功または失敗に対処するための promise を返します。</p> + +<ul> +</ul> + +<pre class="brush: js">const list = document.querySelector('ul'); + +function sendMessage(message, writableStream) { + // defaultWriter は WritableStreamDefaultWriter 型です + const defaultWriter = writableStream.getWriter(); + const encoder = new TextEncoder(); + const encoded = encoder.encode(message, { stream: true }); + encoded.forEach((chunk) => { + defaultWriter.ready + .then(() => { + return defaultWriter.write(chunk); + }) + .then(() => { + console.log("Chunk written to sink."); + }) + .catch((err) => { + console.log("Chunk error:", err); + }); + }); + // ライターを閉じる前にすべてのチャンクが + // 確実に書き込まれるように、ready を再度呼び出します。 + defaultWriter.ready + .then(() => { + defaultWriter.close(); + }) + .then(() => { + console.log("All chunks written"); + }) + .catch((err) => { + console.log("Stream error:", err); + }); +} + +const decoder = new TextDecoder("utf-8"); +const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 }); +let result = ""; +const writableStream = new WritableStream({ + // シンクの実装 + write(chunk) { + return new Promise((resolve, reject) => { + var buffer = new ArrayBuffer(2); + var view = new Uint16Array(buffer); + view[0] = chunk; + var decoded = decoder.decode(view, { stream: true }); + var listItem = document.createElement('li'); + listItem.textContent = "Chunk decoded: " + decoded; + list.appendChild(listItem); + result += decoded; + resolve(); + }); + }, + close() { + var listItem = document.createElement('li'); + listItem.textContent = "[MESSAGE RECEIVED] " + result; + list.appendChild(listItem); + }, + abort(err) { + console.log("Sink error:", err); + } +}, queuingStrategy); + +sendMessage("Hello, world.", writableStream);</pre> + +<p>完全なコードは、<a href="https://mdn.github.io/dom-examples/streams/simple-writer/">単純なライターの例</a>にあります。</p> + +<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","#ws-get-writer","getWriter()")}}</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.WritableStream.getWriter")}}</p> diff --git a/files/ja/web/api/writablestream/index.html b/files/ja/web/api/writablestream/index.html new file mode 100644 index 0000000000..acb08fefd0 --- /dev/null +++ b/files/ja/web/api/writablestream/index.html @@ -0,0 +1,153 @@ +--- +title: WritableStream +slug: Web/API/WritableStream +tags: + - API + - Experimental + - Interface + - Reference + - Streams + - WritableStream +translation_of: Web/API/WritableStream +--- +<p>{{SeeCompatTable}}{{APIRef("Streams")}}</p> + +<p><span class="seoSummary"><a href="/ja/docs/Web/API/Streams_API">Streams API</a> の <strong><code>WritableStream</code></strong> インターフェイスは、ストリーミングデータをシンクと呼ばれる宛先に書き込むための標準的な抽象化を提供します。 このオブジェクトには、バックプレッシャーとキューイングが組み込まれています。</span></p> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{domxref("WritableStream.WritableStream", "WritableStream()")}}</dt> + <dd>新しい <code>WritableStream</code> オブジェクトを作成します。</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt>{{domxref("WritableStream.locked")}} {{readonlyinline}}</dt> + <dd><code>WritableStream</code> がライターにロックされているかどうかを示すブール値。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt>{{domxref("WritableStream.abort()")}}</dt> + <dd>ストリームを中止し、プロデューサーがストリームに正常に書き込むことができなくなり、キューに入れられた書き込みが破棄されてすぐにエラー状態に移行することを通知します。</dd> + <dt>{{domxref("WritableStream.close()")}}</dt> + <dd>ストリームを閉じます。</dd> + <dt>{{domxref("WritableStream.getWriter()")}}</dt> + <dd>{{domxref("WritableStreamDefaultWriter")}} の新しいインスタンスを返し、そのインスタンスにストリームをロックします。 ストリームがロックされている間、このライターが開放されるまで他のライターを取得することはできません。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次の例は、このインターフェイスのいくつかの機能を示しています。 カスタムのシンクと API 提供のキューイング戦略を使用した <code>WritableStream</code> の作成を示しています。 次に、<code>sendMessage()</code> という関数を呼び出し、新しく作成したストリームと文字列を渡します。 この関数内で、{{domxref("WritableStreamDefaultWriter")}} のインスタンスを返すストリームの <code>getWriter()</code> メソッドを呼び出します。 <code>forEach()</code> 呼び出しを使用して、文字列の各チャンクをストリームに書き込みます。 最後に、<code>write()</code> および <code>close()</code> は、チャンクとストリームの成功または失敗に対処するための promise を返します。</p> + +<ul> +</ul> + +<pre class="brush: js">const list = document.querySelector('ul'); + +function sendMessage(message, writableStream) { + // defaultWriter は WritableStreamDefaultWriter 型です + const defaultWriter = writableStream.getWriter(); + const encoder = new TextEncoder(); + const encoded = encoder.encode(message, { stream: true }); + encoded.forEach((chunk) => { + defaultWriter.ready + .then(() => { + return defaultWriter.write(chunk); + }) + .then(() => { + console.log("Chunk written to sink."); + }) + .catch((err) => { + console.log("Chunk error:", err); + }); + }); + // ライターを閉じる前にすべてのチャンクが + // 確実に書き込まれるように、ready を再度呼び出します。 + defaultWriter.ready + .then(() => { + defaultWriter.close(); + }) + .then(() => { + console.log("All chunks written"); + }) + .catch((err) => { + console.log("Stream error:", err); + }); +} + +const decoder = new TextDecoder("utf-8"); +const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 }); +let result = ""; +const writableStream = new WritableStream({ + // シンクの実装 + write(chunk) { + return new Promise((resolve, reject) => { + var buffer = new ArrayBuffer(2); + var view = new Uint16Array(buffer); + view[0] = chunk; + var decoded = decoder.decode(view, { stream: true }); + var listItem = document.createElement('li'); + listItem.textContent = "Chunk decoded: " + decoded; + list.appendChild(listItem); + result += decoded; + resolve(); + }); + }, + close() { + var listItem = document.createElement('li'); + listItem.textContent = "[MESSAGE RECEIVED] " + result; + list.appendChild(listItem); + }, + abort(err) { + console.log("Sink error:", err); + } +}, queuingStrategy); + +sendMessage("Hello, world.", writableStream);</pre> + +<p>完全なコードは、<a href="https://mdn.github.io/dom-examples/streams/simple-writer/">単純なライターの例</a>にあります。</p> + +<h3 id="Backpressure" name="Backpressure">バックプレッシャー</h3> + +<p>API でのバックプレッシャーのサポート方法により、コードでの実装は明白ではありません。 バックプレッシャーがどのように実装されているかを確認するには、3つのことを探します。</p> + +<ul> + <li>カウント戦略の作成時に設定される <code>highWaterMark</code> プロパティ（行35）は、<code>WritableStream</code> インスタンスが1回の <code>write()</code> 操作で処理するデータの最大量を設定します。 この例では、<code>defaultWriter.write()</code> に送信できるデータの最大量です（11行目）。</li> + <li><code>defaultWriter.ready</code> プロパティは、シンク（<code>WritableStream</code> コンストラクターの最初のプロパティ）がデータの書き込みを完了すると解決するプロミスを返します。 データソースは、さらにデータを書き込む（11行目）か、<code>close()</code> （24行目）を呼び出すことができます。 <code>close()</code> の呼び出しが早すぎると、データの書き込みが妨げられる可能性があります。 このため、この例では <code>defaultWriter.ready</code> を2回呼び出しています（9行目と22行目）。</li> + <li>シンクの <code>write()</code> メソッドによって返される {{jsxref("Promise")}}（40行目）は、<code>WritableStream</code> とそのライターに、いつ <code>defaultWriter.ready</code> を解決するかを伝えます。</li> +</ul> + +<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','#ws-class','WritableStream')}}</td> + <td>{{Spec2('Streams')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.WritableStream")}}</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/writablestream/locked/index.html b/files/ja/web/api/writablestream/locked/index.html new file mode 100644 index 0000000000..643ae32c83 --- /dev/null +++ b/files/ja/web/api/writablestream/locked/index.html @@ -0,0 +1,70 @@ +--- +title: WritableStream.locked +slug: Web/API/WritableStream/locked +tags: + - API + - Experimental + - Property + - Reference + - Streams + - WritableStream + - locked +translation_of: Web/API/WritableStream/locked +--- +<div>{{draft}}{{SeeCompatTable}}{{APIRef("Streams")}}</div> + +<p class="summary"><span class="seoSummary">{{domxref("WritableStream")}} インターフェイスの <strong><code>locked</code></strong> 読み取り専用プロパティは、<code>WritableStream</code> がライターにロックされているかどうかを示すブール値を返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var><code>var <em>locked</em> = </code>writableStream</var>.locked;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>書き込み可能なストリームがロックされているかどうかを示す {{jsxref("Boolean")}}。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js"><code class="language-js"><span class="keyword token">const</span> writableStream <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">WritableStream</span><span class="punctuation token">(</span><span class="punctuation token">{</span> + <span class="function token">write</span><span class="punctuation token">(</span>chunk<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="function token">close</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="function token">abort</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">,</span> queuingStrategy<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span></code> + +const writer = writableStream.getWriter(); + +writableStream.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","#ws-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 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.WritableStream.locked")}}</p> diff --git a/files/ja/web/api/writablestream/writablestream/index.html b/files/ja/web/api/writablestream/writablestream/index.html new file mode 100644 index 0000000000..9a7d9470d9 --- /dev/null +++ b/files/ja/web/api/writablestream/writablestream/index.html @@ -0,0 +1,161 @@ +--- +title: WritableStream.WritableStream() +slug: Web/API/WritableStream/WritableStream +tags: + - API + - Constructor + - Experimental + - Reference + - Streams + - WritableStream +translation_of: Web/API/WritableStream/WritableStream +--- +<div>{{draft}}{{SeeCompatTable}}{{APIRef("Streams")}}</div> + +<p class="summary"><span class="seoSummary"><strong><code>WritableStream()</code></strong> コンストラクターは、新しい {{domxref("WritableStream")}} オブジェクトのインスタンスを作成します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>writableStream</em> = new WritableStream(<em>underlyingSink</em>[, <em>queuingStrategy</em>]);</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt>underlyingSink</dt> + <dd>構築されたストリームのインスタンスの振る舞いを定義するメソッドとプロパティを含むオブジェクト。 <code>underlyingSink</code> には以下を含めることができます。 + <dl> + <dt>start(controller) {{optional_inline}}</dt> + <dd>これは、オブジェクトが構築されるとすぐに呼び出されるメソッドです。 このメソッドの内容は開発者が定義し、基になるシンクへのアクセスを取得することを目的とする必要があります。 このプロセスを非同期で実行する場合、成功または失敗を通知する promise を返すことができます。 このメソッドに渡される <code>controller</code> パラメーターは、{{domxref("WritableStreamDefaultController")}} です。 開発者はこれを使用して、セットアップ中にストリームを制御できます。</dd> + <dt>write(chunk, controller) {{optional_inline}}</dt> + <dd>このメソッドは、開発者が定義し、新しいデータチャンク（<code>chunk</code> パラメーターで指定）を基になるシンクに書き込む準備ができたときに呼び出されます。 書き込み操作の成功または失敗を通知する promise を返すことができます。 このメソッドに渡される <code>controller</code> パラメーターは {{domxref("WritableStreamDefaultController")}} であり、開発者はこれを使用して、書き込み用に提出されるチャンクが増えるにつれてストリームを制御できます。 このメソッドは、以前の書き込みが成功した後にのみ呼び出され、ストリームが閉じられたり中止されたりした後は呼び出されません（以下を参照）。</dd> + <dt>close(controller) {{optional_inline}}</dt> + <dd>このメソッドは、開発者が定義し、アプリがストリームへのチャンクの書き込みを完了したことを通知した場合に呼び出されます。 内容は、基になるシンクへの書き込みを完了し、アクセスを解放するために必要なことをすべて行う必要があります。 このプロセスが非同期の場合、成功または失敗を通知する promise を返すことができます。 このメソッドは、キューに入れられたすべての書き込みが成功した後にのみ呼び出されます。 このメソッドに渡される <code>controller</code> パラメーターは {{domxref("WritableStreamDefaultController")}} であり、これを使用して書き込みの最後にストリームを制御できます。</dd> + <dt>abort(reason) {{optional_inline}}</dt> + <dd>このメソッドは、開発者が定義し、アプリがストリームを突然閉じてエラー状態にしたいという通知を受け取った場合に呼び出されます。 <code>close()</code> と同様に、保持しているリソースをクリーンアップできますが、書き込みがキューに入れられていても <code>abort()</code> が呼び出されます — これらのチャンクは破棄されます。 このプロセスが非同期の場合、成功または失敗を通知する promise を返すことができます。 <code>reason</code> パラメータには、ストリームが中止された理由を説明する {{domxref("DOMString")}} が含まれています。</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("WritableStream")}} オブジェクトのインスタンス。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次の例は、このインターフェイスのいくつかの機能を示しています。 カスタムのシンクと API 提供のキューイング戦略を使用した <code>WritableStream</code> の作成を示しています。 次に、<code>sendMessage()</code> という関数を呼び出し、新しく作成したストリームと文字列を渡します。 この関数内で、{{domxref("WritableStreamDefaultWriter")}} のインスタンスを返すストリームの <code>getWriter()</code> メソッドを呼び出します。 <code>forEach()</code> 呼び出しを使用して、文字列の各チャンクをストリームに書き込みます。 最後に、<code>write()</code> および <code>close()</code> は、チャンクとストリームの成功または失敗に対処するための promise を返します。</p> + +<ul> +</ul> + +<pre class="brush: js">const list = document.querySelector('ul'); + +function sendMessage(message, writableStream) { + // defaultWriter は WritableStreamDefaultWriter 型です + const defaultWriter = writableStream.getWriter(); + const encoder = new TextEncoder(); + const encoded = encoder.encode(message, { stream: true }); + encoded.forEach((chunk) => { + defaultWriter.ready + .then(() => { + return defaultWriter.write(chunk); + }) + .then(() => { + console.log("Chunk written to sink."); + }) + .catch((err) => { + console.log("Chunk error:", err); + }); + }); + // ライターを閉じる前にすべてのチャンクが + // 確実に書き込まれるように、ready を再度呼び出します。 + defaultWriter.ready + .then(() => { + defaultWriter.close(); + }) + .then(() => { + console.log("All chunks written"); + }) + .catch((err) => { + console.log("Stream error:", err); + }); +} + +const decoder = new TextDecoder("utf-8"); +const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 }); +let result = ""; +const writableStream = new WritableStream({ + // シンクの実装 + write(chunk) { + return new Promise((resolve, reject) => { + var buffer = new ArrayBuffer(2); + var view = new Uint16Array(buffer); + view[0] = chunk; + var decoded = decoder.decode(view, { stream: true }); + var listItem = document.createElement('li'); + listItem.textContent = "Chunk decoded: " + decoded; + list.appendChild(listItem); + result += decoded; + resolve(); + }); + }, + close() { + var listItem = document.createElement('li'); + listItem.textContent = "[MESSAGE RECEIVED] " + result; + list.appendChild(listItem); + }, + abort(err) { + console.log("Sink error:", err); + } +}, queuingStrategy); + +sendMessage("Hello, world.", writableStream);</pre> + +<p>完全なコードは、<a href="https://mdn.github.io/dom-examples/streams/simple-writer/">単純なライターの例</a>にあります。</p> + +<h3 id="Backpressure" name="Backpressure">バックプレッシャー</h3> + +<p>API でのバックプレッシャーのサポート方法により、コードでの実装は明白ではありません。 バックプレッシャーがどのように実装されているかを確認するには、3つのことを探します。</p> + +<ul> + <li>カウント戦略の作成時に設定される <code>highWaterMark</code> プロパティ（行35）は、<code>WritableStream</code> インスタンスが1回の <code>write()</code> 操作で処理するデータの最大量を設定します。 この例では、<code>defaultWriter.write()</code> に送信できるデータの最大量です（11行目）。</li> + <li><code>defaultWriter.ready</code> プロパティは、シンク（<code>WritableStream</code> コンストラクターの最初のプロパティ）がデータの書き込みを完了すると解決するプロミスを返します。 データソースは、さらにデータを書き込む（11行目）か、<code>close()</code> （24行目）を呼び出すことができます。 <code>close()</code> の呼び出しが早すぎると、データの書き込みが妨げられる可能性があります。 このため、この例では <code>defaultWriter.ready</code> を2回呼び出しています（9行目と22行目）。</li> + <li>シンクの <code>write()</code> メソッドによって返される {{jsxref("Promise")}}（40行目）は、<code>WritableStream</code> とそのライターに、いつ <code>defaultWriter.ready</code> を解決するかを伝えます。</li> +</ul> + +<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","#ws-constructor","WritableStream()")}}</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.WritableStream.WritableStream")}}</p> |