Claude を React Native で使う実装ガイド — API キー漏洩を防ぐ 3 構成と公式 SDK の落とし穴

なぜ React Native + Claude の組み合わせが伸びているのか

React Native はコード 1 本で iOS / Android の両アプリを書ける Meta 製のクロスプラットフォームフレームワークで、2026 年現在でも Expo SDK の進化と The New Architecture (Fabric / TurboModules) の安定化により、スタートアップから Microsoft・Shopify まで採用が広がり続けています。

そこに Claude Opus 4.7 / Sonnet 4.6 / Haiku 4.5 という長文理解・コーディング・エージェント動作で頭ひとつ抜けたモデル群を組み合わせれば、ChatGPT クローンの域を超えた業務 SaaS のモバイル版が短期間で作れます。実際に Anthropic 公式の Claude モバイルアプリも React Native 系で構成されていると噂されており、SDK の互換性は実用域に達しています。

検索意図としては「公式の React Native SDK はあるのか」「@anthropic-ai/sdk をそのまま import して動くのか」「API キーをどこに置けばよいのか」の 3 点が大半。順に潰していきます。

Anthropic 公式 SDK の対応状況 — React Native は明示サポート外

Anthropic 公式の Client SDK 一覧 に並ぶのは Python / TypeScript / Java / Go / Ruby / C# / PHP / CLI の 8 系統で、React Native / Swift / Kotlin の公式 SDK は存在しません。TypeScript SDK のページにも「Node.js 20+ と browser support」とは書かれているものの、React Native は明示的なサポート対象に含まれていません。

つまり React Native 開発者は、次のいずれかを選ぶことになります。

1. @anthropic-ai/sdk を npm install して JS ランタイム上で動かす(動くが本番非推奨)
2. 自前のバックエンドに SDK を置き、モバイル側は fetch で叩く(推奨)
3. Cloudflare Workers / Vercel Edge / AWS Lambda などのエッジ関数を中継する(推奨)

「動く」と「本番投入できる」は別問題です。次節で API キー問題を整理します。

絶対やってはいけないこと — クライアントに API キーを置かない

@anthropic-ai/sdk をそのまま React Native で import して new Anthropic({ apiKey: '...' }) を書くと、ローカルでは確かに messages.create が成功します。しかし、これを App Store / Google Play に提出した瞬間に アプリバイナリを逆コンパイル(jadx / Hopper / strings コマンド程度)するだけで API キーが平文で抜かれます。.env や app.config.ts の値も最終的にはバンドルされて配布されるため、難読化ではほぼ防げません。

抜かれた API キーは Anthropic Console の請求対象です。攻撃者が Opus 4.7 を回し続ければ、1 晩で数百ドル〜数千ドルの請求書が届く可能性があります。Anthropic 公式ドキュメントも dangerouslyAllowBrowser フラグの存在を明示し、「サーバーレスファンクションでの利用以外、本番ではブラウザ実行を推奨しない」と警告しています。

これは React Native でも同じ前提で考えるべきです。API キーは絶対にアプリに同梱しない。これだけは厳守してください。

推奨構成 A — 自前バックエンド経由(王道)

最も普通の構成は、Node.js / Hono / Fastify / Express / NestJS などで Claude を叩く API を 1 本立て、React Native はそのエンドポイントだけ呼ぶというものです。

// server/src/routes/chat.ts
import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic(); // ANTHROPIC_API_KEY は server env のみ

export async function POST(req: Request) {
  const { messages } = await req.json();
  // 1. JWT などで認証
  // 2. ユーザーごとのレート制限
  // 3. 入力プロンプトのバリデーション
  const result = await client.messages.create({
    model: "claude-opus-4-7",
    max_tokens: 1024,
    messages,
  });
  return Response.json(result);
}

// mobile/src/api/chat.ts (React Native 側)
export async function chat(messages: Message[]) {
  const res = await fetch("https://api.example.com/chat", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${await getIdToken()}`,
    },
    body: JSON.stringify({ messages }),
  });
  return res.json();
}

メリットは API キー保護に加えて、ユーザー別の利用量ログ・課金・コンテキスト履歴の永続化・モデル切替のサーバー側制御が一括で実装できる点。Firebase Auth + Cloud Run、Supabase Auth + Edge Functions、Auth0 + 独自 Node サーバーなど、好みのスタックを選べます。

推奨構成 B — エッジ関数を中継(コールドスタート対策)

サーバーを常駐させずに済ませたい個人開発・MVP 段階なら、Cloudflare Workers / Vercel Edge Functions / AWS Lambda + API Gateway にロジックを 1 関数分だけ置くのが軽量です。

// cloudflare-worker/index.ts
import Anthropic from "@anthropic-ai/sdk";

export default {
  async fetch(req: Request, env: Env) {
    const client = new Anthropic({ apiKey: env.ANTHROPIC_API_KEY });
    const { messages } = await req.json();
    const result = await client.messages.create({
      model: "claude-haiku-4-5",
      max_tokens: 512,
      messages,
    });
    return Response.json(result);
  },
};

Cloudflare Workers なら US リージョン経由でも初回 50ms 程度、Vercel Edge / AWS Lambda@Edge も低遅延で動きます。地理的に近い PoP で実行されるため、モバイル回線でも体感速度が出るのが強みです。

注意点は Anthropic クライアントが Node.js API に依存している部分(process, fs など)を踏まないこと。Cloudflare Workers では nodejs_compat フラグを有効化するか、fetch で https://api.anthropic.com/v1/messages を直接叩く実装に切り替える方が安定します。

ストリーミング応答の扱い — React Native の罠

Claude の魅力はトークン単位で逐次返ってくるストリーミングですが、React Native 標準の fetch は chunked transfer の進行中の chunk を読みづらいという弱点があります。response.body.getReader() を素直に呼んでも iOS / Android 双方で挙動が安定しないという報告が複数のコミュニティスレッドで上がっています。

実装の選択肢は次の 3 つ。

• react-native-sse — Server-Sent Events を React Native 向けに実装したライブラリ。バックエンドが SSE を吐く構成と相性が良い。
• WebSocket 中継 — バックエンドで Claude のストリームを受け、WebSocket で React Native に再配信。柔軟性が最も高い。
• chunk バッファ + ポーリング — シンプルだが UX は劣る。MVP には十分。

公式 SDK の client.messages.stream({...}) は Node.js / Edge Function 側で動かし、その出力を SSE / WebSocket でモバイルに流す構成にしておけば、React Native 側の依存を最小にできます。

モデル選定 — モバイル UX を考えるなら Haiku 4.5 から

モバイルアプリで最重要なのは応答速度です。Opus 4.7 は最強ですが応答完了まで数秒〜十数秒かかることもあり、片手で待つには長い。初期実装は Haiku 4.5(高速・低コスト)で UX を固め、複雑タスクのみ Sonnet 4.6 / Opus 4.7 にフォールバックする 2 段構成が現実的です。

価格は変動するため Anthropic 公式の Pricing ページ で必ず確認してください。

ローカル開発の Tips — Expo Go と Bare Workflow

Expo Go で動かしているうちは fetch 一本でバックエンドを叩けば十分ですが、Native Module を伴う本格運用(秘密鍵の Secure Enclave 保存、Push 通知、Background Fetch など) に入る段階で Bare Workflow(prebuild)に移行することになります。

このタイミングで react-native-keychain を入れて JWT / Refresh Token を Secure Enclave / Keystore に格納し、Claude API への中継リクエストにはサーバー発行の短命トークンを使うようにしましょう。API キーそのものを端末に保存しないという原則は最後まで貫きます。

まとめ — 3 行で要約

• 公式 React Native SDK は無いが @anthropic-ai/sdk の TypeScript SDK をバックエンド側で使えば実用十分
• API キーをアプリにバンドルする選択肢は本番では絶対に取らない
• ストリーミングは SSE か WebSocket 中継、初期実装は Haiku 4.5 で UX 検証

参考資料: Anthropic Client SDKs 一覧 / anthropic-sdk-typescript リポジトリ / React Native 公式ドキュメント