tRPCをClaude Codeで実装する

tRPCの初期セットアップをClaude Codeに任せる

tRPCはTypeScriptの型をフロントエンドとバックエンドで共有できるRPCフレームワークです。設定ファイルの構成がやや複雑ですが、Claude Codeに一括でお願いすることができます。まずは次のようにプロンプトを入力してみましょう。

Next.js App RouterプロジェクトにtRPCをセットアップしてください。
@trpc/server, @trpc/client, @trpc/next, zod をインストールし、
src/server/trpc.ts にtRPCインスタンスと認証ミドルウェアを作成してください。

これだけで、initTRPCの初期化からコンテキスト型定義、ミドルウェアの雛形までを一気に生成してくれます。手作業でドキュメントを読みながら進めるより大幅に時間を節約できます。

※TypeScript: JavaScriptに型定義を追加した言語。型チェックによりバグを事前に発見しやすくなる。※コンテキスト: Claudeが一度に記憶・参照できる会話・コードの範囲。上限を超えると古い情報が失われる。※ミドルウェア: リクエストとレスポンスの処理の間に挟まるプログラム。認証チェックやログ記録などに使う。※プロンプト: AIへの指示文。Claude Codeへの指示の質がそのまま出力の質に影響する。

ルーターとプロシージャの設計を依頼する

セットアップが終わったら、具体的なルーターの実装をお願いしましょう。Claude Codeにはビジネスロジックの意図を伝えるのがコツです。

以下の要件でuserRouterを作成してください。
- getById: ユーザーIDでユーザーを取得するquery（認証必須）
- updateProfile: 名前とアバターURLを更新するmutation（zodでバリデーション）
- PrismaClientはコンテキスト経由で受け取る

するとClaude Codeは、Zodスキーマ・入力バリデーション・エラーハンドリングをセットにしたプロシージャを生成してくれます。型推論も正しく効いた状態で出力されるので、そのままクライアント側からtrpc.user.getById.useQuery()のように呼び出せます。

※リファクタリング: 外部から見た動作を変えずに、コードの内部構造を整理・改善すること。※スキーマ: データベースのテーブル構造や型定義のこと。

ミドルウェアのデバッグもClaude Codeで解決する

認証ミドルウェアで型エラーが出たときも、Claude Codeに直接貼り付けて聞くのが最速です。

// エラーが出たコードをそのまま貼る
const isAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.session?.user) {
    throw new TRPCError({ code: 'UNAUTHORIZED' });
  }
  return next({
    ctx: {
      user: ctx.session.user, // ← ここで型エラー
    },
  });
});

「このミドルウェアでctx.userの型がunknownになります。コンテキスト型を修正して型安全にしてください」と伝えると、createInnerTRPCContextの型定義からまとめて修正案を提示してくれます。型エラーの根本原因を追いかける時間を大きく削減できますので、積極的に活用しましょう。

※型安全: 変数や関数の型をコンパイル時にチェックし、型の不一致によるバグを防ぐ設計方針。