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/writablestream/abort/index.html | 84 +++++++++++ .../ja/web/api/writablestream/getwriter/index.html | 132 +++++++++++++++++ files/ja/web/api/writablestream/index.html | 153 ++++++++++++++++++++ files/ja/web/api/writablestream/locked/index.html | 70 +++++++++ .../api/writablestream/writablestream/index.html | 161 +++++++++++++++++++++ 5 files changed, 600 insertions(+) create mode 100644 files/ja/web/api/writablestream/abort/index.html create mode 100644 files/ja/web/api/writablestream/getwriter/index.html create mode 100644 files/ja/web/api/writablestream/index.html create mode 100644 files/ja/web/api/writablestream/locked/index.html create mode 100644 files/ja/web/api/writablestream/writablestream/index.html (limited to 'files/ja/web/api/writablestream') 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 +--- +
{{draft}}{{SeeCompatTable}}{{APIRef("Streams")}}
+ +

{{domxref("WritableStream")}} インターフェイスの abort() メソッドはストリームを中止し、プロデューサーがストリームに正常に書き込むことができなくなり、キューに入れられた書き込みが破棄されてすぐにエラー状態に移行することを通知します。

+ +

構文

+ +
var promise = writableStream.abort(reason);
+ +

パラメーター

+ +
+
reason
+
人間が読むことができる中止の理由を提供する {{domxref("DOMString")}}。
+
+ +

戻り値

+ +

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

+ +

例外

+ +
+
TypeError
+
中止しようとしているストリームは {{domxref("WritableStream")}} ではないか、ロックされています。
+
+ +

例

+ +
const writableStream = new WritableStream({
+  write(chunk) {
+    ...
+  },
+  close() {
+    ...
+  },
+  abort(err) {
+    ...
+  }
+}, queuingStrategy);
+
+...
+
+// 必要に応じて、後でストリームを中止します
+writableStream.abort();
+
+
+ +

仕様

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

ブラウザーの互換性

+ + + +

{{Compat("api.WritableStream.abort")}}

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 +--- +
{{draft}}{{SeeCompatTable}}{{APIRef("Streams")}}
+ +

{{domxref("WritableStream")}} インターフェイスの getWriter() メソッドは、{{domxref("WritableStreamDefaultWriter")}} の新しいインスタンスを返し、そのインスタンスにストリームをロックします。 ストリームがロックされている間、このライターが開放されるまで他のライターを取得することはできません。

+ +

構文

+ +
var writer = writableStream.getWriter();
+ +

パラメーター

+ +

なし。

+ +

戻り値

+ +

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

+ +

例外

+ +
+
TypeError
+
ライターを作成しようとしているストリームは {{domxref("WritableStream")}} ではありません。
+
+ +

例

+ +

次の例は、このインターフェイスのいくつかの機能を示しています。 カスタムのシンクと API 提供のキューイング戦略を使用した WritableStream の作成を示しています。 次に、sendMessage() という関数を呼び出し、新しく作成したストリームと文字列を渡します。 この関数内で、{{domxref("WritableStreamDefaultWriter")}} のインスタンスを返すストリームの getWriter() メソッドを呼び出します。 forEach() 呼び出しを使用して、文字列の各チャンクをストリームに書き込みます。 最後に、write() および close() は、チャンクとストリームの成功または失敗に対処するための promise を返します。

+ + + +
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);
+ +

完全なコードは、単純なライターの例にあります。

+ +

仕様

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

ブラウザーの互換性

+ + + +

{{Compat("api.WritableStream.getWriter")}}

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 +--- +

{{SeeCompatTable}}{{APIRef("Streams")}}

+ +

Streams API の WritableStream インターフェイスは、ストリーミングデータをシンクと呼ばれる宛先に書き込むための標準的な抽象化を提供します。 このオブジェクトには、バックプレッシャーとキューイングが組み込まれています。

+ +

コンストラクター

+ +
+
{{domxref("WritableStream.WritableStream", "WritableStream()")}}
+
新しい WritableStream オブジェクトを作成します。
+
+ +

プロパティ

+ +
+
{{domxref("WritableStream.locked")}} {{readonlyinline}}
+
WritableStream がライターにロックされているかどうかを示すブール値。
+
+ +

メソッド

+ +
+
{{domxref("WritableStream.abort()")}}
+
ストリームを中止し、プロデューサーがストリームに正常に書き込むことができなくなり、キューに入れられた書き込みが破棄されてすぐにエラー状態に移行することを通知します。
+
{{domxref("WritableStream.close()")}}
+
ストリームを閉じます。
+
{{domxref("WritableStream.getWriter()")}}
+
{{domxref("WritableStreamDefaultWriter")}} の新しいインスタンスを返し、そのインスタンスにストリームをロックします。 ストリームがロックされている間、このライターが開放されるまで他のライターを取得することはできません。
+
+ +

例

+ +

次の例は、このインターフェイスのいくつかの機能を示しています。 カスタムのシンクと API 提供のキューイング戦略を使用した WritableStream の作成を示しています。 次に、sendMessage() という関数を呼び出し、新しく作成したストリームと文字列を渡します。 この関数内で、{{domxref("WritableStreamDefaultWriter")}} のインスタンスを返すストリームの getWriter() メソッドを呼び出します。 forEach() 呼び出しを使用して、文字列の各チャンクをストリームに書き込みます。 最後に、write() および close() は、チャンクとストリームの成功または失敗に対処するための promise を返します。

+ + + +
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);
+ +

完全なコードは、単純なライターの例にあります。

+ +

バックプレッシャー

+ +

API でのバックプレッシャーのサポート方法により、コードでの実装は明白ではありません。 バックプレッシャーがどのように実装されているかを確認するには、3つのことを探します。

+ + + +

仕様

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

ブラウザーの互換性

+ +
+ + +

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

+
+ +

関連情報

+ + 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 +--- +
{{draft}}{{SeeCompatTable}}{{APIRef("Streams")}}
+ +

{{domxref("WritableStream")}} インターフェイスの locked 読み取り専用プロパティは、WritableStream がライターにロックされているかどうかを示すブール値を返します。

+ +

構文

+ +
var locked = writableStream.locked;
+ +

値

+ +

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

+ +

例

+ +
const writableStream = new WritableStream({
+  write(chunk) {
+    ...
+  },
+  close() {
+    ...
+  },
+  abort(err) {
+    ...
+  }
+}, queuingStrategy);
+
+...
+
+const writer = writableStream.getWriter();
+
+writableStream.locked
+// ストリームがライターにロックされているため、true を返すべきです
+ +

仕様

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

ブラウザーの互換性

+ + + +

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

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 +--- +
{{draft}}{{SeeCompatTable}}{{APIRef("Streams")}}
+ +

WritableStream() コンストラクターは、新しい {{domxref("WritableStream")}} オブジェクトのインスタンスを作成します。

+ +

構文

+ +
var writableStream = new WritableStream(underlyingSink[, queuingStrategy]);
+ +

パラメーター

+ +
+
underlyingSink
+
構築されたストリームのインスタンスの振る舞いを定義するメソッドとプロパティを含むオブジェクト。 underlyingSink には以下を含めることができます。 +
+
start(controller) {{optional_inline}}
+
これは、オブジェクトが構築されるとすぐに呼び出されるメソッドです。 このメソッドの内容は開発者が定義し、基になるシンクへのアクセスを取得することを目的とする必要があります。 このプロセスを非同期で実行する場合、成功または失敗を通知する promise を返すことができます。 このメソッドに渡される controller パラメーターは、{{domxref("WritableStreamDefaultController")}} です。 開発者はこれを使用して、セットアップ中にストリームを制御できます。
+
write(chunk, controller) {{optional_inline}}
+
このメソッドは、開発者が定義し、新しいデータチャンク（chunk パラメーターで指定）を基になるシンクに書き込む準備ができたときに呼び出されます。 書き込み操作の成功または失敗を通知する promise を返すことができます。 このメソッドに渡される controller パラメーターは {{domxref("WritableStreamDefaultController")}} であり、開発者はこれを使用して、書き込み用に提出されるチャンクが増えるにつれてストリームを制御できます。 このメソッドは、以前の書き込みが成功した後にのみ呼び出され、ストリームが閉じられたり中止されたりした後は呼び出されません（以下を参照）。
+
close(controller) {{optional_inline}}
+
このメソッドは、開発者が定義し、アプリがストリームへのチャンクの書き込みを完了したことを通知した場合に呼び出されます。 内容は、基になるシンクへの書き込みを完了し、アクセスを解放するために必要なことをすべて行う必要があります。 このプロセスが非同期の場合、成功または失敗を通知する promise を返すことができます。 このメソッドは、キューに入れられたすべての書き込みが成功した後にのみ呼び出されます。 このメソッドに渡される controller パラメーターは {{domxref("WritableStreamDefaultController")}} であり、これを使用して書き込みの最後にストリームを制御できます。
+
abort(reason) {{optional_inline}}
+
このメソッドは、開発者が定義し、アプリがストリームを突然閉じてエラー状態にしたいという通知を受け取った場合に呼び出されます。 close() と同様に、保持しているリソースをクリーンアップできますが、書き込みがキューに入れられていても abort() が呼び出されます — これらのチャンクは破棄されます。 このプロセスが非同期の場合、成功または失敗を通知する promise を返すことができます。 reason パラメータには、ストリームが中止された理由を説明する {{domxref("DOMString")}} が含まれています。
+
+
+
queuingStrategy {{optional_inline}}
+
オプションでストリームのキューイング戦略を定義するオブジェクト。 これには次の2つのパラメーターが必要です。 +
+
highWaterMark
+
負でない整数 — これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義します。
+
size(chunk)
+
パラメータ chunk を含むメソッド — これは、各チャンクに使用するサイズをバイト単位で示します。
+
+ +
+

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

+
+
+
+ +

戻り値

+ +

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

+ +

例

+ +

次の例は、このインターフェイスのいくつかの機能を示しています。 カスタムのシンクと API 提供のキューイング戦略を使用した WritableStream の作成を示しています。 次に、sendMessage() という関数を呼び出し、新しく作成したストリームと文字列を渡します。 この関数内で、{{domxref("WritableStreamDefaultWriter")}} のインスタンスを返すストリームの getWriter() メソッドを呼び出します。 forEach() 呼び出しを使用して、文字列の各チャンクをストリームに書き込みます。 最後に、write() および close() は、チャンクとストリームの成功または失敗に対処するための promise を返します。

+ + + +
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);
+ +

完全なコードは、単純なライターの例にあります。

+ +

バックプレッシャー

+ +

API でのバックプレッシャーのサポート方法により、コードでの実装は明白ではありません。 バックプレッシャーがどのように実装されているかを確認するには、3つのことを探します。

+ + + +

仕様

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

ブラウザーの互換性

+ + + +

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

-- cgit v1.2.3-54-g00ecf