ストリーミング

なぜ学ぶか： ChatGPTやClaudeの「文字がタラタラ流れてくる」あの体験。あれはストリーミングという仕組みです。全文を待たずに、生成されたそばから届けます。実際の処理は同じでも『待たされ感』が激減する — AI機能の体感品質を大きく左右する、UXの要です。

ストリーミング＝生成しながら少しずつ届ける

応答全体の完成を待たず、生成されるたびに順次送ります。ユーザーは最初の文字をすぐ見られます。

なぜ効くのか＝体感速度

総生成時間は同じでも『何も出ない待ち時間』が消えます。特に長い応答で差が大きく、UXへの投資対効果が高いです。

長い応答では実質必須

長時間かかるリクエストは、ストリーミングにしないと通信がタイムアウトする恐れがあります。長文生成では事実上の必須です。

サーバー中継の原則は変わらない

ストリーミングでもRoute Handler経由。ブラウザにキーを出さないまま、サーバーからブラウザへストリームを橋渡しします。

コード例

import Anthropic from "@anthropic-ai/sdk";
const client = new Anthropic();

// ストリーミング: 生成されたそばからテキストを受け取る
const stream = client.messages.stream({
  model: "claude-opus-4-8",
  max_tokens: 1024,
  messages: [{ role: "user", content: "短い詩を書いて。" }],
});

// 差分（デルタ）が届くたびに表示 → 文字が流れてくる体験
stream.on("text", (delta) => {
  process.stdout.write(delta);
});

// 完成品がまとめて欲しいときはこれ
const final = await stream.finalMessage();
console.log("\n完了。使用トークン:", final.usage.output_tokens);

stream.on("text", ...)で届いた差分をそのまま出すと「タラタラ流れる」UIになります。総時間は同じでも、待たされ感が消えるのがストリーミングの価値です。

ステップ 1 / 2

← カリキュラム一覧へ戻る

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。