0Pricing
JavaScript Academy · レッスン

Readable Streams

データをチャンク単位で読み取ります。

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

ストリームとは

Streams API は、すべてのデータをメモリに読み込むのではなく、チャンクが到着するたびにデータを段階的に処理します。これにより、大容量のダウンロード、動画、ライブフィードを効率的に扱えます。

ReadableStream

ReadableStream は、チャンク単位で読み取るデータソースです。ブラウザーでは、fetch のレスポンスやファイルの Blob などに公開されています。

ストリームを作成する

チャンクを enqueue し、完了を通知する start(controller) を持つ基盤ソースオブジェクトを使って作成します。

const stream = new ReadableStream({
  start(controller) {
    controller.enqueue("chunk 1");
    controller.enqueue("chunk 2");
    controller.close();
  }
});

リーダーを取得する

getReader() はストリームをロックし、リーダーを返します。ロック中は、ほかのコンシューマーが読み取ることはできません。

const reader = stream.getReader();

チャンクを読み取る

reader.read() は、{ value, done } に解決される Promise を返します。ストリームを最後まで読み終えると、done は true になります。

const { value, done } = await reader.read();
console.log(value, done);

読み取りループ

done が true になるまで read() を繰り返し、ストリーム全体を読み取ります。

const reader = stream.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("got", value);
}

ロックを解放する

reader.releaseLock() を呼び出してストリームのロックを解除すると、別のリーダーが引き継げるようになります。

reader.releaseLock();

pull メソッド

基盤ソースには pull(controller) を定義できます。これはコンシューマーが追加のデータを求めたときに呼び出され、必要になった時点でデータを遅延生成できます。

let i = 0;
new ReadableStream({
  pull(controller) {
    controller.enqueue(i++);
    if (i > 5) controller.close();
  }
});

非同期反復

最新の環境では、ReadableStream は非同期反復可能です。そのため、手動のループの代わりに for await...of を使えます。

for await (const chunk of stream) {
  console.log(chunk);
}

ストリームをキャンセルする

reader.cancel(reason) はストリームを途中で停止し、リソースを解放します。大容量のダウンロードを中止するときに重要です。

await reader.cancel("user navigated away");

tee: ストリームを分割する

tee() は、すべてのチャンクのコピーをそれぞれ受け取る2つのストリームを返します。データを2回読み取る場合（たとえばキャッシュと表示）に便利です。

const [a, b] = stream.tee();
// read a and b independently

クイックチェック

ReadableStream をテストします。

まとめ: ReadableStream

ReadableStream を作成し、リーダーを取得し、ループ内で read() を使ってチャンクを読み取り、ロックを解放し、pull でデータを遅延生成し、for await で反復し、tee() で分割しました。次は fetch レスポンスのストリーミングです。

よくある質問

「Readable Streams」レッスンは無料ですか？

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

「Readable Streams」で何を学びますか？

データをチャンク単位で読み取ります。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Readable Streams」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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