0Pricing
AI SaaS Builder · レッスン

UIでのAIレスポンスのストリーミング

AIの出力をトークン単位でフロントエンドへストリーミングし、長い生成中も停止したように見えず、AI SaaSを高速で応答性の高いものにする方法を学びます。

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

ストリーミングがUXを改善する理由

完全な回答を10秒待つのは、壊れているように感じられます。ストリーミングを使うと、生成されたテキストが順次表示されるため、アプリが速く生き生きと感じられます。

ストリーミングの仕組み

モデルはtokensを少しずつ出力します。サーバーは各チャンクをブラウザーに転送し、ブラウザーは画面に追加します。

Server-Sent Events

SSEは、HTTP経由でサーバーからクライアントへ一方向にデータを送るシンプルなストリームで、トークンのストリーミングに適しています。

res.setHeader('Content-Type', 'text/event-stream')
res.write('data: Hello\n\n')
res.write('data:  world\n\n')

クライアントでストリームを利用する

Fetchのストリーミングリーダー（またはEventSource）を使ってチャンクを読み取り、到着するたびに状態を更新しましょう。

const reader = res.body.getReader()
while (true) {
  const { value, done } = await reader.read()
  if (done) break
  appendText(new TextDecoder().decode(value))
}

段階的にレンダリングする

チャンクを状態バッファーに追加してレンダリングします。UIを滑らかに保つため、トークンごとにページ全体を再レンダリングするのは避けてください。

setText(prev => prev + chunk)

入力中インジケーターを表示する

最初のトークンが到着する前に、処理が始まったことをユーザーに知らせるため、loading表示やカーソルアニメーションを表示しましょう。

キャンセルに対応する

ユーザーが長い生成処理を停止できるようにしましょう。リクエストを中断すれば、トークンと費用を節約できます。

const controller = new AbortController()
fetch('/generate', { signal: controller.signal })
// stop button:
controller.abort()

Markdownを安全にストリーミングする

不完全なMarkdownは、ストリーミングの途中で正しく表示されないことがあります。段階的にレンダリングしつつ、インジェクションを防ぐため、最終的なHTMLをサニタイズしてください。

ストリーム途中のエラー処理

ストリームは途中で失敗することがあります。壊れたストリームを検出し、途切れたテキストを残すのではなく、明確な再試行オプションを表示しましょう。

アクセシビリティに関する考慮事項

頻繁に更新されるテキストは、スクリーンリーダーを圧倒する可能性があります。polite なライブリージョンを使用し、すべてのトークンではなく完了時に通知してください。

<div aria-live="polite">{streamedText}</div>

ストリーミングを使わない場合

短く構造化された出力（単一の JSON オブジェクトなど）では、ストリーミングはメリットがほとんどない一方で複雑さが増します。長く、人間が読むテキストに限定して使用してください。

クイックチェック

ストリーミングに関する知識を確認しましょう。

まとめ

トークンストリーミングの仕組み、SSE による配信方法、クライアントでの受信、段階的な描画、入力中インジケーターの表示、キャンセルへの対応、ストリーミング途中のエラー処理、アクセシビリティの確保、そしてストリーミングを使う価値がない場合について学びました。

よくある質問

「UIでのAIレスポンスのストリーミング」レッスンは無料ですか？

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

「UIでのAIレスポンスのストリーミング」で何を学びますか？

AIの出力をトークン単位でフロントエンドへストリーミングし、長い生成中も停止したように見えず、AI SaaSを高速で応答性の高いものにする方法を学びます。 ブラウザで直接実行するハンズオンコードでAI SaaS Builderを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

AI SaaS Builderを始めるのに経験は必要ですか？

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

「UIでのAIレスポンスのストリーミング」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. SaaS向けフロントエンドフレームワーク
  2. AI出力の可視化
  3. ユーザー体験（UX）のベストプラクティス
  4. UIでのAIレスポンスのストリーミング
← AI SaaS Builderに戻る