【2026年版】ChatGPT・Claude API完全活用ガイド｜プログラマーのためのLLM統合実装を徹底解説

2026年、生成AIはソフトウェア開発の中核に組み込まれています。OpenAIのGPT-4o、AnthropicのClaude 3.7 Sonnet、GoogleのGemini 2.0など、優れたLLMが揃う中、開発者としてこれらのAPIをどう活用するかが重要なスキルとなっています。この記事では、ChatGPT・Claude APIの実践的な統合方法を詳しく解説します。

OpenAI GPT API の基本的な使い方

APIキーの取得と初期設定

OpenAI APIを使うには、まずOpenAIのサイトでアカウントを作成し、APIキーを発行します。APIキーは環境変数として管理し、コードにハードコードしないようにしましょう。

npm install openai

# .env.local
OPENAI_API_KEY=sk-your-api-key-here

基本的なチャット補完APIの呼び出し

import OpenAI from 'openai';

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

// 基本的なチャット補完
async function chat(userMessage: string): Promise<string> {
  const response = await client.chat.completions.create({
    model: 'gpt-4o',
    messages: [
      {
        role: 'system',
        content: 'あなたは優秀なソフトウェアエンジニアのアシスタントです。技術的な質問に日本語で答えてください。'
      },
      {
        role: 'user',
        content: userMessage
      }
    ],
    max_tokens: 2000,
    temperature: 0.7,
  });

  return response.choices[0].message.content ?? '';
}

// ストリーミングレスポンス
async function streamChat(userMessage: string) {
  const stream = await client.chat.completions.create({
    model: 'gpt-4o',
    messages: [{ role: 'user', content: userMessage }],
    stream: true,
  });

  for await (const chunk of stream) {
    const content = chunk.choices[0]?.delta?.content || '';
    process.stdout.write(content);
  }
}

Claude API（Anthropic）の活用

AnthropicのSDKセットアップ

npm install @anthropic-ai/sdk

# .env.local
ANTHROPIC_API_KEY=sk-ant-your-api-key-here

Claude APIの基本的な使い方

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

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

// メッセージの送信
async function askClaude(prompt: string): Promise<string> {
  const message = await client.messages.create({
    model: 'claude-3-7-sonnet-20250219',
    max_tokens: 4096,
    messages: [
      {
        role: 'user',
        content: prompt
      }
    ],
    system: 'あなたは熟練のソフトウェアエンジニアです。コードレビューや技術相談に的確なアドバイスを日本語で提供してください。'
  });

  const content = message.content[0];
  return content.type === 'text' ? content.text : '';
}

// ストリーミング
async function streamClaude(prompt: string) {
  const stream = await client.messages.stream({
    model: 'claude-3-7-sonnet-20250219',
    max_tokens: 4096,
    messages: [{ role: 'user', content: prompt }],
  });

  for await (const event of stream) {
    if (event.type === 'content_block_delta' && event.delta.type === 'text_delta') {
      process.stdout.write(event.delta.text);
    }
  }
}

実践的なユースケース：AIアシスタントの実装

Next.jsでのストリーミングチャットUI

// app/api/chat/route.ts
import { OpenAI } from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';

const openai = new OpenAI();

export async function POST(req: Request) {
  const { messages } = await req.json();

  const response = await openai.chat.completions.create({
    model: 'gpt-4o',
    stream: true,
    messages: [
      {
        role: 'system',
        content: 'あなたはTech Athletesのテクニカルアシスタントです。プログラミングと技術に関する質問に答えます。'
      },
      ...messages
    ],
  });

  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

// app/chat/page.tsx
'use client';
import { useChat } from 'ai/react';

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

  return (
    <div className="max-w-2xl mx-auto p-4">
      <div className="space-y-4 mb-4 h-[60vh] overflow-y-auto">
        {messages.map((m) => (
          <div key={m.id} className={`p-3 rounded ${m.role === 'user' ? 'bg-blue-100 ml-8' : 'bg-gray-100 mr-8'}`}>
            <p className="font-bold text-sm">{m.role === 'user' ? 'あなた' : 'AI'}</p>
            <p>{m.content}</p>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="質問を入力..."
          className="flex-1 border rounded p-2"
        />
        <button type="submit" disabled={isLoading} className="bg-blue-500 text-white px-4 py-2 rounded">
          送信
        </button>
      </form>
    </div>
  );
}

RAG（Retrieval-Augmented Generation）の実装

RAGは自社データと組み合わせてより精度の高い回答を生成する技術です。ベクトルデータベース（Pinecone、Chroma、pgvectorなど）に文書をエンベッディングして保存し、ユーザーの質問に関連する文書を取得してLLMに渡します。

import { OpenAI } from 'openai';
import { Pinecone } from '@pinecone-database/pinecone';

const openai = new OpenAI();
const pinecone = new Pinecone({ apiKey: process.env.PINECONE_API_KEY! });
const index = pinecone.Index('tech-knowledge-base');

// ドキュメントのエンベッディングと保存
async function embedAndStore(documents: string[], ids: string[]) {
  const embeddings = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: documents,
  });

  await index.upsert(
    embeddings.data.map((emb, i) => ({
      id: ids[i],
      values: emb.embedding,
      metadata: { text: documents[i] },
    }))
  );
}

// RAGクエリ
async function ragQuery(question: string): Promise<string> {
  // 質問をエンベッディング
  const queryEmbedding = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: question,
  });

  // 関連ドキュメントを検索
  const results = await index.query({
    vector: queryEmbedding.data[0].embedding,
    topK: 5,
    includeMetadata: true,
  });

  const context = results.matches
    .map(m => m.metadata?.text)
    .join('

');

  // コンテキストを使って回答生成
  const response = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages: [
      {
        role: 'system',
        content: `以下のコンテキストを参考に質問に答えてください:

${context}`
      },
      { role: 'user', content: question }
    ],
  });

  return response.choices[0].message.content ?? '';
}

LLM選択ガイド：用途別おすすめモデル（2026年版）

• 🏆 コーディング・技術タスク：Claude 3.7 Sonnet・GPT-4o（高い推論能力）
• ⚡ 高速レスポンスが必要：GPT-4o-mini・Claude 3.5 Haiku（低レイテンシ）
• 📊 データ分析・構造化出力：GPT-4o（Structured Outputs対応）
• 🌐 多言語対応：GPT-4o・Claude 3.5 Sonnet（日本語品質が高い）
• 💰 コスト最適化：GPT-4o-mini・Gemini 2.0 Flash（低コスト）

まとめ：AIを活用したアプリ開発で競争力を高めよう

LLM APIの活用はもはや先端技術ではなく、ソフトウェアエンジニアの基礎スキルになりつつあります。OpenAI・Claude・Geminiそれぞれの特性を理解し、用途に応じて使い分けることで、ユーザー体験を大きく向上させることができます。ぜひ実際にAPIキーを取得して、小さなプロジェクトから試してみてください。