APIキーの取り方からWeb実装まで — OpenAI / Claude（Anthropic） / Amazon Bedrockを“手を動かす人”向けにやさしく解説

読了時間: 6 分

APIキーの取り方からWeb実装まで：OpenAI / Claude（Anthropic） / Amazon Bedrockを“手を動かす人”向けにやさしく解説

みなさん、今日は「生成AI APIを実務のWebアプリに組み込むときの全体像」を、はじめての方にもわかるように授業形式で解説します。対象は OpenAI、Anthropic Claude、Amazon Bedrock の三本柱です。キーの取得→認証→最小コード例→料金の考え方→運用のコツの順で進めます。

はじめに：APIキーと認証の全体像
共通の大原則（超重要）
OpenAI 編：キー取得・認証・最小コード・料金の見方
Anthropic Claude 編：キー取得・認証・最小コード・料金の見方
Amazon Bedrock 編：資格情報・署名（SigV4）・最小コード・料金の見方
Webアプリへの安全な組み込みパターン（Next.js/Nodeを例に）
料金のざっくり試算と思考法
セキュリティ・運用のベストプラクティス
まとめ

1. はじめに：APIキーと認証の全体像

まず言葉の整理です。

APIキー：サービス提供者（OpenAI 等）が発行する秘密の文字列。これをHTTPリクエストのヘッダに付けると「あなたは誰か」を識別でき、課金やレート制限（一定時間内に叩ける回数）にも紐づきます。
認証方式：

ベアラー（Bearer）トークン：Authorization: Bearer <API_KEY> で送る方式。OpenAI や Anthropic で使います。
AWS SigV4 署名：AWS はキーをそのまま送らず、アクセスキーID/シークレットから署名を計算してヘッダに付けます。Bedrock はこれ（SDKが自動でやってくれる）。([AWS ドキュメント][1])

例え話：
APIキーは「ホテルのルームキー」、SigV4は「入館証＋署名簿」。前者は提示で通れる、後者は「確かに本人が署名した」ことまで確かめるイメージです。

2. 共通の大原則（超重要）

APIキーはフロント（ブラウザ）に出さない！

公式も「キーをクライアントへ配布するな」と明記。必ず自前バックエンドを経由します。([OpenAI Help Center][2])

NG：Next.js の Client Component から直接 OpenAI を叩く
OK：/api/generate のようなサーバールートを作り、そこから各プロバイダにリクエスト

3. OpenAI 編

3-1. キーの取得

公式ダッシュボード（platform.openai.com）にログイン → API Keys 画面で発行。([OpenAI Platform][3])

3-2. 認証

HTTP ヘッダに Authorization: Bearer <OPENAI_API_KEY> を付けます。
公式クイックスタートやSDKの例が充実。([OpenAI Platform][4])

3-3. 最小コード（Node.js / Express の例）

※フロントからは /api/openai-chat を呼ぶだけ。サーバ側にキーを置きます。

// server.ts (Express)
import express from "express";
import fetch from "node-fetch";

const app = express();
app.use(express.json());

app.post("/api/openai-chat", async (req, res) => {
  const { messages } = req.body; // [{role:'user', content:'...'}] など

  const r = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Authorization": `Bearer undefined`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      model: "gpt-4.1",        // 例：モデルは要件に合わせて
      messages,
      temperature: 0.7,
    }),
  });

  const data = await r.json();
  res.json(data);
});

app.listen(3000);

3-4. 料金の見方

モデル別に「入力/出力トークン単価」が設定されています。最新表は公式「API Pricing」で必ず確認。([OpenAI][5])
Web検索ツール等の追加ツール課金もあるので、用途に応じて設計段階で見積もるのが安全です。([OpenAI][5])

ミニ知識：トークンは単語のカケラ単位。長いプロンプトや長い応答ほどコストが増えるので、プロンプト短縮・システムプロンプトの共通化・キャッシュが効きます。

4. Anthropic Claude（Claude API）編

4-1. キーの取得

Claude Console（console.anthropic.com）でAPIキーを発行。手順はサポート記事にも整理されています。([console.anthropic.com][6])

4-2. 認証

Authorization: Bearer <ANTHROPIC_API_KEY> と、anthropic-version ヘッダ（例：2023-06-01 等）を付けてPOST。

4-3. 最小コード（Node.js / Express）

app.post("/api/claude-chat", async (req, res) => {
  const { messages } = req.body; // [{role:'user', content:'...'}]

  const r = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: {
      "x-api-key": process.env.ANTHROPIC_API_KEY!, // 旧: Authorization の場合も
      "anthropic-version": "2023-06-01",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      model: "claude-3-5-sonnet-20240620", // 例
      max_tokens: 1024,
      messages,
    }),
  });

  res.json(await r.json());
});

4-4. 料金の見方

代表モデル Claude 3.5 Sonnet のAPI価格は入$3 / 出$15（100万トークン単位）。大きい文脈長（~200K）を使えるのが特徴。([Anthropic][7])
プラン（Free/Pro/Max/Team/Enterprise）や個人向けサブスクも公開されています（APIとは別レイヤですが意思決定の参考になります）。([Claude][8])
外部の価格比較ガイドも参考になります（最新は必ず公式で再確認してください）。([CloudZero][9])

例え話：
Claude は「長文に強い相談役」。長いマニュアルや議事録を丸ごと与えて要約・抽出する用途にフィットしやすい一方、出力トークン単価はモデルにより幅があります。

5. Amazon Bedrock 編

5-1. 資格情報（IAM）と署名（SigV4）

Bedrock をAPIで使うには、AWSアカウントの認証（IAMユーザー/ロール）が基本。SDKがSigV4 署名を自動化します。([AWS ドキュメント][1])
2025年時点ではBedrock専用のAPIキーも案内されています（IAMコンソール → ユーザー → Security credentials → “API keys for Amazon Bedrock”）。組織ポリシーに合わせて選択。([AWS ドキュメント][10])
IAM ユーザーのアクセスキーの作成手順（従来型）も公式に明記。([AWS ドキュメント][11])

5-2. 最小コード（Node.js / AWS SDK v3）

import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

const client = new BedrockRuntimeClient({
  region: "us-east-1", // モデルの提供リージョンと一致させる
  // 認証はデフォルトプロバイダ連鎖（環境変数、~/.aws/credentials、ロール等）
});

app.post("/api/bedrock-chat", async (req, res) => {
  const input = {
    modelId: "anthropic.claude-3-5-sonnet-20240620-v1:0", // 例：提供モデルは必ずコンソールで確認
    contentType: "application/json",
    accept: "application/json",
    body: JSON.stringify({
      anthropic_version: "2023-06-01",
      max_tokens: 1024,
      messages: [{ role: "user", content: [{ type: "text", text: req.body.prompt }] }],
    }),
  };
  const out = await client.send(new InvokeModelCommand(input));
  res.type("json").send(Buffer.from(out.body!).toString("utf-8"));
});

5-3. 料金の見方

モデル提供者ごとに「入出力トークン単価」が異なり、3つの購入形態（オンデマンド／バッチ／プロビジョンドスループット）を選べます。([Amazon Web Services, Inc.][12])
プロビジョンドは専用キャパシティを時間単価で確保（例：モデルユニットあたり$39.60/時…などの解説記事。実額はモデル×リージョンで変わるため必ず公式を再確認）。([Cloudforecast][13])

豆知識：
Bedrock は一つの統一API経由で複数ベンダのモデル（Anthropic、Meta、Cohere、Mistralなど）を選べるのが魅力。AWSのネットワーク・権限・監査に乗せやすいのも現場で効きます。

6. Webアプリへの安全な組み込みパターン（Next.js/Nodeを例に）

6-1. 推奨アーキテクチャ（最小構成）

[Browser] --fetch--> [/api/* (自前バックエンド)] --SDK/HTTPS--> [OpenAI/Claude/Bedrock]
                         ↑ .env に各種キー／AWS認証

ブラウザから自前のAPIだけを呼ぶ。外部AI APIはサーバ側から。
デプロイ先（Vercel/AWS/ECS 等）で環境変数としてキー/認証情報を注入。
監視・レート制限・キャッシュ・ロギングは自前APIに集約。

6-2. Next.js App Router の例（Edge/Node どちらでも）

// app/api/generate/route.ts
import { NextRequest } from "next/server";

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

  switch (provider) {
    case "openai":
      // …上記 OpenAI の fetch をここに
      break;
    case "claude":
      // …上記 Anthropic の fetch をここに
      break;
    case "bedrock":
      // …上記 Bedrock SDK 呼び出しをここに
      break;
  }

  return new Response(JSON.stringify({}), { headers: { "Content-Type": "application/json" } });
}

フロントでは fetch("/api/generate", { method:"POST", body: JSON.stringify({...}) }) のみ。
認証情報は一切クライアントへ出しません（再強調）。([OpenAI Help Center][2])

7. 料金のざっくり試算と思考法

7-1. 基本式

コスト ≒（入力トークン数 × 入力単価）＋（出力トークン数 × 出力単価）
会話型なら「1往復の平均トークン × 想定回数/月」で見積もり。

7-2. 具体的な目安（モデルは必ず最新価格表で再確認）

OpenAI：モデルごとに単価が異なります。最新の公式価格表を参照してください（Web検索やツール課金の追加料金も明記）。([OpenAI][5])
Anthropic：例として Claude 3.5 Sonnet は入$3 / 出$15 / 100万トークン。長文処理に強い。([Anthropic][7])
Amazon Bedrock：モデル×リージョンで単価が異なり、オンデマンド/バッチ/プロビジョンドの選択で費用構造が変わります。([Amazon Web Services, Inc.][12])

補助ツール：価格計算サイト（例：Helicone など）で入力/出力トークンを入れて見比べると早いです（ただし最終判断は公式価格表で）。([Helicone.ai][14])

8. セキュリティ・運用のベストプラクティス

キーをクライアントに出さない（三度目の強調）。公式ガイドにも明示。([OpenAI Help Center][2])
環境変数で管理：.env をGit管理外に。デプロイ先のシークレット管理（Vercel/AWS Secrets Manager/GHA Secrets等）を使う。
レート制限：IP・ユーザー単位で自前APIにスロットリングを。万一の漏えい・濫用に備えて「キー再発行」も運用手順に。
ログと個人情報：プロンプト/出力を安易にフル保存しない。PIIマスキングや要約ログを。
コストガード：

モデルは“十分に安い最小構成”で検証 → 必要に応じて格上げ
入力はテンプレ最適化、出力は上限トークン必須
キャッシュ（同一プロンプトの再利用）、ツール使用時の課金も別途管理（OpenAIのWeb検索ツール等）。([OpenAI][5])

クラウドの権限（Bedrock）：最小権限（Least Privilege）でIAMを設計。SigV4やロール運用をSDKに任せる。([AWS ドキュメント][1])

9. まとめ

要点

OpenAI/Anthropic はベアラーキー、Bedrock はAWS認証（SigV4 or Bedrock APIキー）。([AWS ドキュメント][1])
キーはサーバ側のみ。Next.js/Express の /api/* で一段中継すれば安全かつ拡張しやすい。([OpenAI Help Center][2])
料金は入出力トークン単価の掛け算＋必要なら追加ツール。公式価格表の確認を習慣化。([OpenAI][5])

どれを選ぶ？（超ざっくり）

OpenAI：モデル・エコシステムが広く、実装例が豊富。
Claude：長文に強く、要約・リサーチ・コードレビューで効果的。([Anthropic][7])
Bedrock：AWSの権限・監査に統合しやすく、複数モデルを一窓口から使いたい企業に向く。([Amazon Web Services, Inc.][12])

付録：参考リンク（公式中心）

OpenAI：API Pricing / Quickstart / API Keys（最新価格・実装） ([OpenAI][5])
Anthropic：Claude 3.5 Sonnet 価格 / Console / APIアクセス手順（キー発行） ([Anthropic][7])
AWS：SigV4 / Bedrock 料金 / Bedrock APIキー / IAMアクセスキー作成 ([AWS ドキュメント][1])

おまけ：最小フロント（React）例

フロントは自前APIだけ呼びます。

tsx

// example.tsx
const onAsk = async () => {
  const res = await fetch("/api/openai-chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ messages: [{ role: "user", content: "こんにちは" }] }),
  });
  const data = await res.json();
  console.log(data);
};