0Pricing
JavaScript Academy · レッスン

バックプレッシャーとパイプ処理

pipeTo と pipeThrough でデータの流れを制御します。

「バックプレッシャーとパイプ処理」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

バックプレッシャーの問題

プロデューサーがコンシューマーの処理速度を上回る速さでデータを生成すると、メモリがいっぱいになります。バックプレッシャーとは、処理の遅いコンシューマーが処理の速いプロデューサーに速度を落とすよう伝える仕組みです。

WritableStream

WritableStreamは、チャンクを書き込む宛先です。そのシンクメソッドであるwrite(chunk)は非同期にでき、次のチャンクを受け取る準備ができたことを通知できます。

const sink = new WritableStream({
  write(chunk) {
    console.log("writing", chunk);
  }
});

Writerの取得

getWriter()は書き込み可能ストリームをロックし、write()、close()、readyプロミスを持つWriterを返します。

const writer = sink.getWriter();
await writer.write("hello");
await writer.close();

readyシグナル

書き込む前にwriter.readyをawaitします。ストリームがさらにデータを受け入れられる状態になると解決されます。これが、実際にバックプレッシャーが働いている状態です。

await writer.ready;
await writer.write(chunk);

pipeTo

readable.pipeTo(writable)はソースと宛先を接続し、バックプレッシャーを自動的に管理します。パイピングが完了すると解決されるプロミスを返します。

await readableStream.pipeTo(writableStream);
console.log("done piping");

pipeThrough

pipeThrough(transform)はソースとシンクの間に変換処理を挿入し、変換後のReadableStreamを返します。いくつかを連結してパイプラインを構築できます。

sourceStream
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(parser)
  .pipeTo(consumer);

ハイウォーターマーク

キューイング戦略のhighWaterMarkは、バックプレッシャーが発生するまでにキューへ入れられるチャンク数を設定します。スループットとメモリ使用量のバランスが取れるよう調整します。

new ReadableStream(source, new CountQueuingStrategy({ highWaterMark: 4 }));

desiredSize

コントローラーのdesiredSizeは、キューにどれだけ空きがあるかをプロデューサーに伝えます。0以下になったら、エンキューを停止します。

pull(controller) {
  while (controller.desiredSize > 0) {
    controller.enqueue(nextChunk());
  }
}

パイプの中断

{ signal }をpipeToに渡すと、AbortControllerを使ってパイプライン全体を中断できます。

const ctrl = new AbortController();
readable.pipeTo(writable, { signal: ctrl.signal });
ctrl.abort();

パイプのオプション

pipeToでは、preventClose、preventAbort、preventCancelを指定して、両端の間でエラーや完了をどのように伝播させるかを制御できます。

readable.pipeTo(writable, { preventClose: true });

完全なパイプライン

すべてを組み合わせると、バイト列を取得し、デコードし、変換してからシンクに書き込む処理を、自動的なフロー制御ですべて実行できます。

const res = await fetch("/data");
await res.body
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(lineSplitter)
  .pipeTo(uiSink);

クイックチェック

バックプレッシャーをテストします。

復習：バックプレッシャーとパイピング

WritableStreamとWriterについて学び、バックプレッシャーのためにreadyをawaitし、pipeToとpipeThroughでストリームを接続し、highWaterMarkを調整してdesiredSizeを確認し、パイプラインを中断しました。これでStreams APIの学習は完了です。

よくある質問

「バックプレッシャーとパイプ処理」レッスンは無料ですか？

はい。「バックプレッシャーとパイプ処理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「バックプレッシャーとパイプ処理」で何を学びますか？

pipeTo と pipeThrough でデータの流れを制御します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「バックプレッシャーとパイプ処理」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Readable Streams
  2. fetch レスポンスのストリーミング
  3. Transform Streams
  4. バックプレッシャーとパイプ処理
← JavaScript Academyに戻る