WritableStream
from Web Streams API
writerを通じて任意の宛先にデータを書き込む
1. 基本的な概念
WritableStream はデータの書き込みを非同期で処理する仕組みを提供します。データはチャンク（小さな断片）単位で書き込まれ、内部でバッファリングされます。3. WritableStreamの構成要素
WritableStream を構築するには以下のように記述します:javascriptconst 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 を使用します。書き込みの基本例
javascriptconst 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でファイルにデータを書き込む例:javascriptconst 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. データ変換
データを変換して別のストリームに渡す例:
javascriptconst 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 ボディとしてストリームを送信:javascriptconst writableStream = new WritableStream({
write(chunk) {
console.log('送信データ:', chunk);
}
});
fetch('https://example.com/upload', {
method: 'POST',
body: writableStream
});7. ReadableStreamとの組み合わせ
ReadableStream と WritableStream はパイプラインとして接続することができます。これにより、データを読み取り、変換し、書き込む一連の処理をシンプルに表現できます。例: ストリームのパイプ
javascriptconst 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);