1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
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>
|
