0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Maku-Inc(MAKU)
in

LLM APIプロダクトのレスポンス遅延を克服！ストリーミング処理の実装ガイド

0
Last updated at Posted at 2026-10-25

LLM APIプロダクトのレスポンス遅延を克服！ストリーミング処理の実装ガイド

課題・背景

近年、ChatGPTをはじめとする大規模言語モデル（LLM）の進化は目覚ましく、多くのプロダクトにLLM APIが組み込まれるようになりました。しかし、この素晴らしい技術をプロダクトに導入する際、開発者が直面しやすい共通の課題があります。それは、「レスポンス遅延」です。

LLMは複雑な推論を行うため、その応答生成にはある程度の時間を要します。特に、長文のテキスト生成や複数のプロンプト処理を伴う場合、数秒から数十秒の遅延が発生することも珍しくありません。この遅延は、ユーザー体験（UX）に深刻な影響を与えます。例えば、以下のような問題が起こり得ます。

  • ユーザーの離脱: 応答を待つ間にユーザーはストレスを感じ、プロダクトの利用を諦めてしまう可能性があります。
  • UIのフリーズ: 同期的なAPI呼び出しでは、応答が返ってくるまでフロントエンドのUIがブロックされ、操作不能な状態に陥ることがあります。
  • サーバーリソースの非効率な利用: 長時間かかるリクエストの間、サーバーは接続を維持し続ける必要があり、他のリクエストを処理できないボトルネックとなる可能性があります。
  • タイムアウト問題: ロードバランサーやAPI Gateway、プロキシサーバーなど、インフラストラクチャ層で設定されたタイムアウト値を超過し、リクエストが強制終了されることがあります。これはSPOF（単一障害点）になりかねないため、インフラの冗長化や設定の見直しが必須となります。

これらの課題は、ユーザーに「待たされている」というネガティブな印象を与え、プロダクトの利用継続率や満足度を著しく低下させる要因となります。独学でLLMを使った開発を始めたばかりのエンジニアの方も、この「遅延」という現実的な壁に直面し、どう克服すれば良いか悩むことが多いでしょう。

実践・解決策

このレスポンス遅延という課題に対する最も効果的な解決策の一つが「ストリーミング処理」の実装です。LLM APIの多くは、応答全体が一度に返されるのを待つのではなく、生成されたテキストの断片を逐次（リアルタイムに）受け取るストリーミングモードをサポートしています。これにより、ユーザーはLLMが「考えている間」にも少しずつ応答が表示されていくため、体感的な待ち時間を大幅に短縮し、スムーズなUXを提供できます。

具体的な実装は、バックエンドとフロントエンドの両方で工夫が必要です。

1. バックエンドの実装 (Python with FastAPI & OpenAI API)

バックエンドでは、LLM APIのストリーミング機能を活用し、その結果をServer-Sent Events (SSE) としてクライアントに送信します。SSEはHTTPプロトコル上でサーバーからクライアントへ一方的にデータをプッシュする仕組みで、WebSocketよりも実装がシンプルであり、このユースケースに適しています。

2. バックエンドの実装 (Python with FastAPI & OpenAI API) 続き

FastAPIでSSEを利用するには、StreamingResponse と yield を組み合わせるのが一般的です。OpenAI APIのストリーミング機能を活用し、取得したチャンク（断片的な応答）をSSEのデータフォーマットに変換してクライアントに送信します。

# app.py
from fastapi import FastAPI, Request, HTTPException
from fastapi.responses import StreamingResponse
from fastapi.middleware.cors import CORSMiddleware
import openai
import os
import asyncio

app = FastAPI()

# 開発環境でのCORS設定例 (本番環境では許可するオリジンを限定してください)
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  # フロントエンドのURLを指定
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 環境変数からOpenAI APIキーを読み込む
# 現場ではAWS Secrets ManagerやHashiCorp Vaultなど、セキュアな方法で管理します
openai.api_key = os.getenv("OPENAI_API_KEY")

async def generate_llm_response(prompt: str):
    """
    OpenAI APIのストリーミング機能を使い、LLMの応答を生成するジェネレータ
    """
    if not openai.api_key:
        raise HTTPException(status_code=500, detail="OpenAI API Key not configured.")

    try:
        response_generator = await openai.ChatCompletion.acreate( # 非同期API呼び出し
            model="gpt-3.5-turbo",
            messages=[
                {"role": "system", "content": "You are a helpful assistant."},
                {"role": "user", "content": prompt}
            ],
            stream=True, # ここが重要！ストリーミングを有効にする
            temperature=0.7,
            max_tokens=500
        )

        async for chunk in response_generator:
            if chunk.choices and chunk.choices[0].delta and chunk.choices[0].delta.content:
                yield chunk.choices[0].delta.content
            # 適度な待機を入れることで、クライアント側での表示負荷を調整することも可能
            # await asyncio.sleep(0.01) # 必要に応じて
    except openai.error.OpenAIError as e:
        # 実際の運用では、エラーの詳細をロギングし、クライアントには汎用的なエラーメッセージを返す
        print(f"OpenAI API Error: {e}")
        yield f"ERROR: An error occurred with the AI model. Please try again later. ({e})"
    except Exception as e:
        print(f"Server Error: {e}")
        yield f"ERROR: An unexpected server error occurred. Please try again. ({e})"


@app.post("/stream_chat/")
async def stream_chat(request: Request):
    """
    クライアントからのプロンプトを受け取り、SSEとしてLLMの応答をストリーミングする
    """
    data = await request.json()
    prompt = data.get("prompt")

    if not prompt:
        raise HTTPException(status_code=400, detail="Prompt is required.")

    async def event_generator():
        async for text_chunk in generate_llm_response(prompt):
            # SSEのデータフォーマットに合わせて整形
            # data: <データ>\n\n
            yield f"data: {text_chunk}\n\n"
        # ストリームの終了を示すために特別なイベントを送ることもできます
        # yield "event: end\ndata: [DONE]\n\n"

    return StreamingResponse(event_generator(), media_type="text/event-stream")

ポイント:

  • openai.ChatCompletion.acreate(stream=True): OpenAI APIをストリーミングモードで非同期呼び出しします。async for でチャンクを逐次処理できます。
  • StreamingResponse(event_generator(), media_type="text/event-stream"): FastAPIが提供するストリーミングレスポンスのクラスです。event_generator から yield される値を、media_type が text/event-stream であるSSEとしてクライアントに送信します。
  • yield f"data: {text_chunk}\n\n": 各チャンクをSSEのデータフォーマット（data: ...\n\n）に変換して返します。

3. フロントエンドの実装 (JavaScript with Fetch API)

フロントエンドでは、JavaScriptの EventSource API を使用してSSEストリームを受け取ります。このAPIは、サーバーからのイベントを継続的に監視し、新しいデータが届くたびにコールバック関数を実行してくれます。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LLM Streaming Chat</title>
    <style>
        body { font-family: sans-serif; max-width: 800px; margin: 20px auto; padding: 0 20px; }
        #chat-output { border: 1px solid #ccc; padding: 10px; min-height: 200px; max-height: 500px; overflow-y: auto; margin-bottom: 10px; background-color: #f9f9f9; }
        .user-message { text-align: right; color: blue; }
        .ai-message { text-align: left; color: green; }
        input[type="text"] { width: calc(100% - 100px); padding: 8px; }
        button { padding: 8px 15px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>LLM ストリーミングチャット</h1>
    <div id="chat-output"></div>
    <div>
        <input type="text" id="prompt-input" placeholder="AIに質問を入力してください..." />
        <button id="send-button">送信</button>
    </div>

    <script>
        const promptInput = document.getElementById('prompt-input');
        const sendButton = document.getElementById('send-button');
        const chatOutput = document.getElementById('chat-output');
        let currentEventSource = null; // 複数接続防止のため

        sendButton.addEventListener('click', async () => {
            const prompt = promptInput.value.trim();
            if (!prompt) return;

            // 既存のEventSourceがあれば閉じる
            if (currentEventSource) {
                currentEventSource.close();
                currentEventSource = null;
            }

            // ユーザーのメッセージをUIに追加
            addMessage('user', prompt);
            promptInput.value = '';
            promptInput.disabled = true; // 応答中は入力を無効化
            sendButton.disabled = true;

            // AIの応答用の要素を先に作成し、そこに追記していく
            const aiMessageElement = document.createElement('div');
            aiMessageElement.className = 'ai-message';
            aiMessageElement.textContent = ''; // 初期値は空
            chatOutput.appendChild(aiMessageElement);
            chatOutput.scrollTop = chatOutput.scrollHeight; // スクロール

            try {
                // EventSourceを利用してSSEに接続
                // Fetch APIでPOSTリクエストを送り、そのBodyをEventSourceで受ける方法が一般的ですが、
                // EventSource自体はGETリクエストしかサポートしていません。
                // そのため、POSTでプロンプトを送り、その結果をEventSourceで受けるには
                // バックエンドで一意のセッションIDなどを発行し、そのIDをGETリクエストに含める形になります。
                // 簡略化のため、ここではPOSTでプロンプトを送信し、その後Fetch APIでストリームを受け取る形式にします。
                // ※厳密なSSEストリーミングにはEventSourceが適していますが、
                // POSTリクエストのBodyからストリーミング応答を受け取る場合はFetch APIのReadableStreamを使用します。
                // ここではFetch APIを用いたReadableStreamの読み込みに修正します。

                const response = await fetch('http://localhost:8000/stream_chat/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ prompt: prompt }),
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                // ReadableStreamReaderを取得
                const reader = response.body.getReader();
                const decoder = new TextDecoder('utf-8');
                let buffer = ''; // 部分的なSSEデータを保持するためのバッファ

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) {
                        break;
                    }

                    // Received data is a Uint8Array, decode it to string
                    const chunk = decoder.decode(value, { stream: true });
                    buffer += chunk;

                    // SSEデータは `data: <message>\n\n` 形式なので、`\n\n` で区切る
                    const messages = buffer.split('\n\n');
                    buffer = messages.pop(); // 最後の要素は不完全な可能性があるためバッファに戻す

                    messages.forEach(message => {
                        if (message.startsWith('data: ')) {
                            const data = message.substring(6); // 'data: ' の部分を削除
                            if (data) {
                                aiMessageElement.textContent += data;
                                chatOutput.scrollTop = chatOutput.scrollHeight;
                            }
                    });
                }
            } catch (error) {
                console.error('Streaming error:', error);
                aiMessageElement.textContent += `\n\nエラーが発生しました: ${error.message}`;
            } finally {
                promptInput.disabled = false;
                sendButton.disabled = false;
                promptInput.focus();
                chatOutput.scrollTop = chatOutput.scrollHeight;
            }
        });

        function addMessage(sender, text) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `${sender}-message`;
            messageDiv.textContent = text;
            chatOutput.appendChild(messageDiv);
            chatOutput.scrollTop = chatOutput.scrollHeight;
        }
    </script>
</body>
</html>

ポイント:

  • Fetch APIとReadableStream: EventSource はGETリクエストにしか対応しないため、POSTリクエストでストリーミングデータを受け取る場合は fetch APIと response.body.getReader() で取得できる ReadableStream を利用します。
  • TextDecoder: サーバーから送られてくるバイナリデータ（Uint8Array）を文字列にデコードします。{ stream: true } を指定することで、不完全なバイト列でも処理を継続できます。
  • SSEパースロジック: data: <メッセージ>\n\n の形式で送られてくるSSEデータを適切にパースし、aiMessageElement に textContent を追記していきます。\n\n でメッセージを区切り、部分的なデータはバッファリングする処理が重要です。
  • UI/UX: 応答中は入力フィールドとボタンを無効化し、ユーザーが誤って追加の入力を送信するのを防ぎます。新しい応答が追加されるたびにスクロール位置を調整し、最新のメッセージが見えるようにします。

注意点・ハマりどころ

LLMストリーミングはUX向上に貢献しますが、導入・運用にはいくつかの考慮事項があります。現場で遭遇しやすい課題と、その対策について解説します。

1. インフラ/ネットワーク視点

  • ロードバランサー (LB) との相性:
    • タイムアウト: SSEはHTTPのKeep-Aliveを長時間利用するため、LBやAPI Gatewayのアイドルタイムアウトが短すぎると、通信が意図せず切断されることがあります。LBの設定でアイドルタイムアウトを適切に（数分〜数十分など）延長する必要があります。
    • スティッキーセッション: SSE自体はステートレスなデータのプッシュですが、もしセッション管理を伴う場合は、同一クライアントからのリクエストを同じバックエンドサーバーにルーティングする「スティッキーセッション」が必要になることがあります。ただし、APIは可能な限りステートレスに保つのがベストプラクティスです。
  • サーバーリソースの消費:
    • ストリーミング接続は通常のHTTPリクエストのようにすぐに閉じず、データ送信が終わるまで長時間維持されます。これにより、バックエンドサーバーのプロセスやメモリが長時間占有され、大量の同時接続が発生した場合にサーバーリソースが逼迫しやすくなります。
    • 対策: サーバーのリソースモニタリングを強化し、必要に応じてAuto Scalingを導入してサーバー数を自動的に増減させる仕組みを検討しましょう。プロキシサーバー（Nginxなど）を挟んでコネクション管理を最適化することも有効です。
  • CDNキャッシュとの相性:
    • ストリーミングデータはリアルタイム性が重要であり、通常はキャッシュされません。CDNを導入している場合、ストリーミングエンドポイントはキャッシュ対象外と設定する必要があります。

2. セキュリティ視点

  • 認証・認可の徹底:
    • ストリーミングエンドポイントへのアクセスも、通常のAPIと同様に認証・認可を厳格に行う必要があります。未認証のユーザーや権限のないユーザーがLLMにアクセスできないように、JWTやセッションクッキーなどの認証メカニズムを適切に適用してください。最小権限の原則に基づき、必要な権限のみを付与します。
  • レートリミット:
    • 過度なリクエストやDDoS攻撃からサービスを保護するため、ストリーミングエンドポイントにもレートリミットを適用することが重要です。特に、LLM APIは利用量に応じた課金体系がほとんどであるため、不正利用によるコスト増大を防ぐためにも必須です。IPアドレス、ユーザーID、APIキーなどを基準に制限をかけましょう。
  • CORS (Cross-Origin Resource Sharing) 設定:
    • フロントエンドとバックエンドが異なるオリジンで動作する場合、CORSの設定が必須です。本番環境では allow_origins を具体的なフロントエンドのURLに限定し、allow_methods や allow_headers も必要最小限に設定してください。* の使用は開発時のみに留めましょう。

3. Web開発/DB視点

  • クライアント側の再接続ロジック:
    • ネットワーク瞬断やサーバーの再起動など、予期せぬ切断が発生した場合に備え、クライアント側（JavaScript）で自動的に再接続を試みるロジックを実装することが重要です。EventSource は自動再接続機能を持っていますが、fetch APIの場合は手動で実装する必要があります（指数バックオフなど）。
  • メッセージの整合性とエラーハンドリング:
    • LLMからの応答が途中で中断したり、エラーメッセージが返されたりした場合に、クライアント側でどのように表示し、ユーザーに伝えるかを設計する必要があります。部分的な応答の途中でストリームが切れた場合に、ユーザーに不完全な情報を見せない工夫も必要です。
    • バックエンド側では、OpenAI APIからのエラーをキャッチし、適切な形式でクライアントに伝えるようにします。

4. ソフトスキル視点

  • チームへの共有と運用負荷:
    • ストリーミング導入はUXを大幅に向上させますが、バックエンド・フロントエンドの実装が複雑化し、運用のモニタリング項目も増えます。ストリーミングのメリット・デメリット、発生しうる課題、およびそれに伴う運用負荷増大について、事前にチーム内でしっかり共有し、合意形成を行うことが重要です。
  • モニタリングの強化:
    • 通常のAPIと異なり、SSE接続は長時間維持されるため、接続数、接続時間、データ転送量、エラー率などの専用メトリクスを収集し、監視ダッシュボードで可視化することが不可欠です。これにより、システムの状態をリアルタイムで把握し、問題発生時に迅速に対応できるようになります。GrafanaやDatadogなどのモニタリングツールを活用しましょう。
  • 独学者の学習への繋げ方:
    • LLMストリーミングは、単にチャットボットを実装するだけでなく、リアルタイム通信の基礎（SSEとWebSocketの違い、HTTP/1.1 vs HTTP/2/3のストリーミング特性など）を学ぶ良い機会になります。様々なバックエンド（Node.js, Goなど）やフレームワークでの実装例を比較し、知識を深めてみてください。

まとめ

本記事では、LLMのストリーミング応答をWebアプリケーションに組み込むための実践的な方法について、バックエンド（FastAPI + OpenAI API）とフロントエンド（JavaScript with Fetch API）の両面から解説しました。

ストリーミング応答を導入することで、ユーザーはLLMが思考している間も逐次的に応答を受け取ることができ、体感的な待ち時間を大幅に短縮し、対話のテンポを向上させることができます。これは、チャットボットや対話型AIアプリケーションにおいて、ユーザーエンゲージメントを向上させる上で非常に強力な武器となります。

しかし、その導入にはインフラ、セキュリティ、Web開発の各視点からの注意が必要です。ロードバランサーのタイムアウト設定、サーバーリソースの管理、厳格な認証・認可、そしてクライアント側の堅牢なエラーハンドリングと再接続ロジックは、安定したサービス提供のために不可欠です。また、チームへの共有と継続的なモニタリングを通じて、技術的な課題を乗り越えていく現場の姿勢も重要になります。

独学でAIエンジニアを目指す皆さんにとって、このような実践的な実装経験は、単なる機能実装に留まらず、システム全体の設計、運用、そしてユーザー体験への深い理解へと繋がるでしょう。ぜひ、このストリーミング実装を通じて、よりインタラクティブでユーザーフレンドリーなAIアプリケーション開発に挑戦してみてください。

エンジニアのスキルシェアプラットフォーム「DokuPro」

教えたい人と学びたい人を繋ぐDokuProでは、新規登録（先生・生徒）を募集中です。
詳細はこちら: https://dokupro.dev/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?