Gemini API: アプリとツール向けにJavaScriptでストリーミングテキストを実装する

Dev.to / 2026/4/12

💬 オピニオンDeveloper Stack & InfrastructureTools & Practical Usage

要点

  • この記事では、ストリーミングされたパートを順に反復処理することで、JavaScriptにおいてGoogleのGemini APIを使ってチャット形式のテキストをストリーミング表示する方法を説明します。これにより、応答性の高いUIを実現できます。
  • 部分的な失敗が起きたときにインターフェースが途中で固まらないようにするため、エラーと終了理由(finish reasons)を明示的に扱って、クライアント側の処理を堅牢にすることを強調しています。
  • セキュリティと運用に関する指針も示します。APIキーはクライアントのバンドルに入れず、サーバー環境変数に保持し、クラウドコンソールでクォータやレート制限を監視してください。
  • 開発者は、現在の公式な@google/generative-aiクイックスタート、または適切なVertex AIの手順から始めることを推奨します。さらに、モデル識別子の名称や利用可否は時間とともに変わり得るため、必ず再確認してください。

この投稿はAIの支援を受けて作成され、公開前に正確性が確認されました。

Gemini は開発者向けの Google のマルチモーダルモデル ファミリーです。アプリ開発者のために、Google は AI for developers(コンシューマーとAPIのアクセス パターン)および Google Cloud Vertex AI 経由のエンタープライズ向けの導線でガイドを公開しています。モデル名、地域、価格は変更されます。必ず、自分のアカウント種別に一致するページを読みましょう。

Streaming

チャット形式の UI は通常、サーバー送信または ストリーミングされたチャンクを消費します。公式の JavaScript クイックスタートでは、ストリーム部分を反復処理する方法を示しています。UI が部分的な失敗で停止してしまわないように、エラー終了理由 を明示的に処理してください。

Keys and quotas

API キーは秘密情報です。クライアントのバンドルではなく、サーバーの環境変数に保存してください。プロジェクトのクォータとレート制限は、クラウド コンソールで監視します。

Practical takeaway

@google/generative-ai のための Google の最新クイックスタート、または自社が使っている Vertex の導線から始めましょう。Google が古い名称を廃止するときは、モデル文字列を再確認してください。