はじめに

Chrome 151 で Request・Response・Blob に textStream() メソッドが追加されました。

これまでバイトストリームをテキストとして読み取るには TextDecoderStream を経由するパイプ処理が必要でしたが、
textStream() を使うとその手順をそのままショートカットできます。
LLM のストリーミングレスポンスや大きなテキストファイルの逐次処理など、
テキストをストリームで扱う場面で役立ちます。

従来の書き方との比較

従来：TextDecoderStream を経由する

const response = await fetch('/api/stream');

const reader = response.body
  .pipeThrough(new TextDecoderStream())
  .getReader();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  console.log(value); // デコード済みテキスト
}

response.body はバイト列（Uint8Array）を流す ReadableStream のため
、テキストとして読み取るには TextDecoderStream でデコードする必要がありました。

Chrome 151 以降：textStream() を使う

const response = await fetch('/api/stream');

const reader = response.textStream().getReader();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  console.log(value); // デコード済みテキスト
}

textStream() は「バイトストリームを TextDecoderStream にパイプしたもの」と等価な ReadableStream<string> を返します。
pipeThrough(new TextDecoderStream()) がそのまま省略できます。

for await...of と組み合わせる

ReadableStream は非同期イテラブルなので、for await...of と組み合わせるとより簡潔に書けます。

const response = await fetch('/api/stream');

for await (const chunk of response.textStream()) {
  process(chunk);
}

実用例：LLM のストリーミングレスポンスを画面に表示

チャット UI などで LLM のレスポンスをリアルタイムに表示するユースケースに特に相性が良いです。

async function streamChat(message) {
  const response = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message }),
  });

  const output = document.getElementById('output');

  for await (const chunk of response.textStream()) {
    output.textContent += chunk;
  }
}

従来は TextDecoderStream と getReader() を組み合わせるボイラープレートが必要だったものが、textStream() + for await...of で完結します。

Blob でも使える

Response だけでなく Blob にも同じ textStream() が追加されています。

const blob = new Blob(
  ['1行目\n2行目\n3行目\n'],
  { type: 'text/plain' }
);

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

ファイル選択（<input type="file">）で取得した File オブジェクトは Blob のサブクラスなので、そのまま textStream() が使えます。

input.addEventListener('change', async (e) => {
  const file = e.target.files[0];

  for await (const chunk of file.textStream()) {
    processLine(chunk);
  }
});

まとめ

textStream() は小さな追加ですが、テキストストリームを扱うたびに書いていた pipeThrough(new TextDecoderStream()) のボイラープレートを一掃できます。
LLM レスポンスのストリーミング表示や大きなテキストファイルの逐次処理など、ストリームでテキストを扱う機会が増えている今、覚えておきたい API のひとつです。

参考

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。