WritableStream
writerを通じて任意の宛先にデータを書き込む
GPT-4.icon
1. 基本的な概念
WritableStreamはデータの書き込みを非同期で処理する仕組みを提供します。データはチャンク（小さな断片）単位で書き込まれ、内部でバッファリングされます。
3. WritableStreamの構成要素
WritableStreamを構築するには以下のように記述します:
code:javascript
const writableStream = new WritableStream({
start(controller) {
// ストリームの初期化（オプション）
console.log('WritableStreamが初期化されました');
},
write(chunk, controller) {
// データチャンクが書き込まれるたびに呼び出されます
console.log('書き込まれたデータ:', chunk);
},
close(controller) {
// ストリームが閉じられると呼び出されます
console.log('ストリームが閉じられました');
},
abort(reason) {
// ストリームが中止された場合に呼び出されます
console.error('ストリームが中止されました:', reason);
}
});
start(controller): ストリームが初期化されたときに呼び出されます。ここでバッファを設定するなどの処理が可能です。
write(chunk, controller): 書き込み時にデータ（チャンク）を受け取り処理します。
close(controller): ストリームが閉じられたときにクリーンアップ処理を行います。
abort(reason): ストリームが中止された場合のエラーハンドリング。
4. ストリームへの書き込み
ストリームにデータを書き込むには、WritableStreamDefaultWriterを使用します。
書き込みの基本例
code:javascript
const writer = writableStream.getWriter();
writer.write('Hello, world!');
writer.write('Another chunk of data');
writer.close(); // 書き込み終了
write(chunk): チャンクをストリームに書き込みます。
close(): 書き込みを終了します。
abort(reason): 書き込みを中止します。
---
5. WritableStreamのユースケース
1. ファイル書き込み
WritableStreamを使って、ブラウザのFile APIでファイルにデータを書き込む例:
code:javascript
const fileHandle = await window.showSaveFilePicker();
const writable = await fileHandle.createWritable();
const stream = new WritableStream({
write(chunk) {
return writable.write(chunk);
},
close() {
return writable.close();
}
});
const writer = stream.getWriter();
writer.write('ファイルに書き込むデータ');
writer.close();
2. データ変換
データを変換して別のストリームに渡す例:
code:javascript
const transformStream = new WritableStream({
write(chunk) {
console.log('受け取ったデータ:', chunk);
const transformed = chunk.toUpperCase(); // データを大文字に変換
// 別のストリームに渡す処理をここに記述
}
});
const writer = transformStream.getWriter();
writer.write('hello');
writer.write('world');
writer.close();
---
3. ネットワーク送信
Fetch APIのRequestボディとしてストリームを送信:
code:javascript
const writableStream = new WritableStream({
write(chunk) {
console.log('送信データ:', chunk);
}
});
method: 'POST',
body: writableStream
});
7. ReadableStreamとの組み合わせ
ReadableStreamとWritableStreamはパイプラインとして接続することができます。これにより、データを読み取り、変換し、書き込む一連の処理をシンプルに表現できます。
例: ストリームのパイプ
code:javascript
const readableStream = new ReadableStream({
start(controller) {
controller.enqueue('chunk1');
controller.enqueue('chunk2');
controller.close();
}
});
const writableStream = new WritableStream({
write(chunk) {
console.log('書き込まれたデータ:', chunk);
}
});
readableStream.pipeTo(writableStream);