導入: なぜWritableStreamが重要なのか
Webアプリケーションで大きなファイルを生成したり、ネットワーク経由でデータを受け取ったりする際、メモリを大量に消費してブラウザが重くなってしまった経験はありませんか？従来のデータ処理では、全データをメモリに一度読み込んでから書き出す手法が一般的でしたが、これではメモリ不足（OOM）のリスクが高まります。WritableStream APIを使用することで、データを小さな塊（チャンク）に分割して順次処理できるようになり、メモリ効率を劇的に向上させることが可能です。
基礎知識: WritableStreamの仕組み
WritableStreamは、データを「書き込むための目的地」となるインターフェースです。
・チャンク（Chunk）: データの断片。ストリームを通じて流れる最小単位です。
・シンク（Sink）: 実際にデータを受け取り、書き込みを行う処理。
・バックプレッシャー（Backpressure）: 書き込み側の処理速度が読み込み側の速度に追いつかない場合、読み込み側に「少し待って」と信号を送る仕組みです。これにより、データが溢れるのを防ぎます。
実装/解決策: 基本的な使い方
WritableStreamを生成するには、コンストラクタに「書き込みロジック」を定義したオブジェクトを渡します。これには、各チャンクを処理するwrite()メソッドや、処理完了時に呼ばれるclose()メソッドなどが含まれます。
サンプルプログラム: コンソールで試すWritableStream
以下のコードは、受け取ったテキストデータを順次処理して最後に連結する単純な例です。
// 1. WritableStreamの生成
const writableStream = new WritableStream({
// データを書き込むたびに実行される関数
write(chunk, controller) {
console.log("チャンクを受信しました:", chunk);
// ここで実際の書き込み処理（ファイル保存や描画など）を行う
},
// 全ての書き込みが完了した時に実行される関数
close() {
console.log("全ての書き込みが完了しました。");
},
// エラー発生時の処理
abort(err) {
console.error("エラーが発生しました:", err);
}
});
// 2. ストリームへの書き込みを実行する
const writer = writableStream.getWriter();
writer.write("Hello, ");
writer.write("WritableStream!");
// 3. 書き込み終了を通知
writer.close();
応用・注意点: 現場で役立つアドバイス
実務でWritableStreamを使う際、最も重要なのはバックプレッシャーの制御です。writer.readyプロパティを使用すると、ストリームが次のデータを受け入れる準備ができているかを確認できます。
また、ブラウザ標準のFetch APIで取得したReadableStreamを、そのままpipeTo()メソッドを使ってWritableStreamに流し込むことも可能です。これにより、例えば「サーバーからダウンロードした巨大なファイルを、そのままローカルのファイルシステムへ書き込む」といった処理を、極めて少ないメモリ負荷で実現できます。
注意点として、古いブラウザや一部の環境では未サポートの場合があるため、利用する際はCan I useなどで対応状況を確認するか、必要に応じてポリフィルを検討してください。効率的なデータハンドリングのために、ぜひこのAPIを活用してみてください。