はじめての API 呼び出し:チャット・ストリーミング

AI Navigate Original / 2026/5/16

共有:

要点

  • 3 基本:同期チャット・ストリーミング・マルチターンを実装
  • システムプロンプト追加、OpenAI/Vercel AI SDK も同パターン
  • エラー(429/401)処理、指数バックオフで再試行
  • トークンコスト追跡、複雑パターンは practice 章で

環境構築が済んだら、いよいよ AI に話しかけてみます。やることは驚くほど単純で、「メッセージを送り、返事を受け取る」だけ。本記事では、最初に覚えるべき 3 つの基本形(同期チャット・ストリーミング・マルチターン会話)を、Anthropic(Claude)・OpenAI・Vercel AI SDK の実コードで身につけます。最後にエラー処理・リトライ・コスト把握といった「動かし続けるための土台」まで触れます。

あなたの プログラム リクエスト(質問) AI モデル (API) レスポンス(応答) 回答テキスト

FIG.1 API 呼び出しは「リクエストを送り、レスポンスを受け取る」往復だけ

以下のコードは Node.js(TypeScript)を前提にしています。実行前に API キーを環境変数(例:ANTHROPIC_API_KEY / OPENAI_API_KEY)に設定しておけば、各 SDK は自動でそれを読み込みます。キーをコードに直書きしないのが鉄則です。

01同期チャット ── まず一往復

最初の一歩は「質問を送り、応答を全部受け取ってから表示する」最小パターンです。返事が出そろうのを待つので同期(一括)と呼びます。短い処理やバッチ向きで、コードがいちばん読みやすい形です。

import Anthropic from "@anthropic-ai/sdk";

// 環境変数 ANTHROPIC_API_KEY を自動で読む
const client = new Anthropic();

const res = await client.messages.create({
  model: "claude-sonnet-4-6",   // 用途に応じてモデルを選ぶ(後述)
  max_tokens: 1024,             // 応答の最大トークン数(必須)
  messages: [
    { role: "user", content: "TypeScript と JavaScript の違いを簡潔に教えて" },
  ],
});

console.log(res.content[0].text);   // 応答テキスト
console.log("usage:", res.usage);   // 入出力トークン数(コスト把握に使う)

ポイントは 3 つです。max_tokens は Anthropic では必須(応答の上限。料金の上振れ防止にもなる)。応答本文は res.content[0].text に入り、res.usage に使ったトークン数が返ります。後述のコスト把握はこの usage が起点です。

モデルはどう選ぶ?

同じ API でも、呼び出すモデル名で賢さ・速さ・料金が変わります。2026 年 6 月時点の Claude は主に次の 3 つです(モデルは更新が速いので、最新の正式名は必ず公式ドキュメントで確認してください)。

Haiku(軽量・高速)

claude-haiku-4-5。分類・要約・大量処理など、速度とコストを優先する用途に。

Sonnet(バランス)

claude-sonnet-4-6。日常的なチャットや開発の主力。迷ったらここから。

Opus(最高性能)

claude-opus-4-8。難しい推論・設計判断など、品質を最優先する場面で。

学習や試作の段階では Sonnet か Haiku で十分なことが多く、コストも抑えられます。「とりあえず一番賢いモデル」を全部に使うと、簡単な処理でも料金がかさみます。難所だけ Opus に上げる、という使い分けが現実的です。

02ストリーミング ── 1 文字ずつ届ける

同期チャットは「全部できてから一気に表示」なので、長い回答だと待ち時間が体感で長く感じます。ストリーミングは、生成された文字を少しずつ(チャンクごとに)受け取って、その場で画面に流していく方式。ChatGPT のように文字がタタタッと出てくる、あの挙動です。体感速度が大きく上がります。

同期(一括) 待つ… 全部到着 ストリーミング(逐次) 届くそばから表示

FIG.2 同期は「待って一括」、ストリーミングは「届くそばから逐次表示」

使い方は stream: true を付けて、返ってきたイベントを for await で 1 件ずつ読むだけです。テキストの増分は content_block_delta イベントに入ってきます。

続きを読むには無料登録が必要です

アカウントを作成すると、オリジナル記事の全文をお読みいただけます。