Transform Streams
パイプラインを流れるデータを変換します。
「Transform Streams」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
TransformStream とは
TransformStream は、読み取り側と書き込み側の間に位置します。書き込まれたチャンクを変換して出力する、データをその場でマッピング、フィルタリング、再構成するパイプの段階です。
構造
2つの端があります。writable はデータを入力する側、readable は変換後のデータが出力される側です。
const ts = new TransformStream();
console.log(ts.writable, ts.readable);transform メソッド
transform(chunk, controller) 関数で動作を定義します。出力を生成するには controller.enqueue() を呼び出します。
const upper = new TransformStream({
transform(chunk, controller) {
controller.enqueue(chunk.toUpperCase());
}
});1つの入力から複数の出力
変換処理は、1つの入力に対して0個、1個、または複数のチャンクを出力できます。データの分割や展開に最適です。
const splitter = new TransformStream({
transform(line, controller) {
for (const word of line.split(" ")) controller.enqueue(word);
}
});TransformStream でフィルタリングする
除外したいチャンクを enqueue しなければよいだけです。
const onlyEven = new TransformStream({
transform(n, controller) {
if (n % 2 === 0) controller.enqueue(n);
}
});flush メソッド
flush(controller) は入力が終了したときに1回実行されます。バッファーに残ったデータや最後のチャンクを出力するのに適しています。
const ts = new TransformStream({
transform(c, ctrl) { ctrl.enqueue(c); },
flush(ctrl) { ctrl.enqueue("[END]"); }
});チャンクをまたいでバッファーする
クロージャー内で状態を保持すると、分割されたチャンクを結合できます。たとえば、任意のバイト境界から完全な行を組み立てられます。
let buffer = "";
new TransformStream({
transform(chunk, ctrl) {
buffer += chunk;
const parts = buffer.split("\n");
buffer = parts.pop();
for (const line of parts) ctrl.enqueue(line);
},
flush(ctrl) { if (buffer) ctrl.enqueue(buffer); }
});組み込みの変換ストリーム
プラットフォームには TextDecoderStream、TextEncoderStream、CompressionStream と DecompressionStream が用意されており、すぐに使える変換処理を提供します。
const gzip = new CompressionStream("gzip");
const compressed = inputStream.pipeThrough(gzip);pipeThrough で接続する
readable.pipeThrough(transform) はソースを変換処理に接続し、変換処理の readable 出力を返します。そのまま次の段階へ渡せます。
const out = sourceStream
.pipeThrough(new TextDecoderStream())
.pipeThrough(upper);非同期変換
transform は非同期にできます。その中で await を使い、チャンクごとに API を呼び出したり非同期処理を実行したりできます。ストリームは Promise の完了を待ちます。
new TransformStream({
async transform(chunk, ctrl) {
const result = await process(chunk);
ctrl.enqueue(result);
}
});エラーの伝播
transform 内で例外を投げるとストリームはエラーになり、下流のコンシューマーにエラーが伝わってパイプラインが停止します。
new TransformStream({
transform(chunk, ctrl) {
if (!valid(chunk)) throw new Error("bad chunk");
ctrl.enqueue(chunk);
}
});クイックチェック
TransformStreamをテストします。
復習：TransformStream
transformとflushを使って変換を作成し、チャンクのマッピング、フィルタリング、展開を行い、チャンクの境界をまたいでバッファリングし、CompressionStreamなどの組み込み機能を使い、pipeThroughでステージを接続しました。次は、バックプレッシャーとパイピングです。
よくある質問
「Transform Streams」レッスンは無料ですか？
はい。「Transform Streams」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「Transform Streams」で何を学びますか？
パイプラインを流れるデータを変換します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Transform Streams」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Readable Streams
- fetch レスポンスのストリーミング
- Transform Streams
- バックプレッシャーとパイプ処理