API設計

tRPC てぃーあーるぴーしー

TypeScriptRPCエンドツーエンド型安全Next.jsREST APIスキーマレス

tRPCについて教えて

簡単に言うとこんな感じ！

TypeScriptで作ったサーバーの関数を、まるで手元にある関数を呼ぶみたいにフロントエンドから使える仕組みだよ！「APIの定義書（スキーマ）を別途書かなくていい」「型のズレでバグが起きにくい」ってのが最大のポイントなんだ！

tRPCとは

tRPC（TypeScript Remote Procedure Call） は、TypeScriptで書かれたフロントエンドとバックエンドの間で、型安全（タイプセーフ）なAPI通信を実現するためのライブラリです。通常のWeb API開発では「サーバー側でAPIを定義 → クライアント側で呼び出す」という流れの中で、型の不一致やドキュメントの陳腐化といった問題が起きがちですが、tRPCはそうした課題をエレガントに解決します。

従来のREST APIやGraphQLと異なるのは、別途スキーマファイルやコード生成ツールを必要としない点です。サーバー側のTypeScriptの型定義がそのままクライアント側にも共有されるため、「バックエンドが返すデータ形式を変えたのに、フロントエンドが古い形式のまま動いていてバグが起きた」という事態を防げます。

主にNext.js・RemixなどのフルスタックTypeScriptアプリケーションで採用されており、特に「フロントもバックも同じTypeScriptで書くチーム」にとっては開発効率を大きく向上させるツールです。

tRPCの仕組みと構造

tRPCが解決する問題

従来の課題	tRPCでの解決策
REST APIの型定義をフロントとバックで二重管理	サーバーの型がそのままクライアントに共有される
スキーマ（OpenAPI等）を別途書く手間	スキーマファイル不要。TypeScriptの型が「スキーマ」になる
APIの変更がフロントに伝わらずバグ発生	型が変わると即座にコンパイルエラーで検知できる
GraphQLのコード生成ツールの複雑さ	ビルドステップ不要。コード生成なし

tRPCの基本的な構成要素

┌──────────────────────────────────────────┐
│             TypeScriptプロジェクト        │
│                                          │
│  ┌──────────────┐    ┌────────────────┐  │
│  │  サーバー側   │    │ クライアント側  │  │
│  │              │    │                │  │
│  │  Router定義  │───▶│ 型が自動で共有 │  │
│  │  手続きの実装 │    │ 関数として呼出 │  │
│  └──────────────┘    └────────────────┘  │
│         ↑                   ↑            │
│      Zod等で             推論された型     │
│      バリデーション       でオートコンプリ│
└──────────────────────────────────────────┘

tRPCの2種類の手続き（Procedure）

tRPCでは「手続き（Procedure）」という単位でAPIを定義します。RESTでいう「エンドポイント」にあたるものです。

手続きの種類	役割	RESTでの相当
query	データの取得（副作用なし）	GET
mutation	データの作成・更新・削除	POST / PUT / DELETE
subscription	リアルタイムデータの購読	WebSocket

覚え方：「型が橋を渡る」

tRPCのポイントは 「TypeScriptの型がサーバーとクライアントの橋になる」 イメージです。わざわざ「橋の設計図（スキーマ）」を別途書かなくても、TypeScriptが自動的に橋を架けてくれる、と覚えましょう。

歴史と背景

2021年 — Alex / KATT（Alex Johansson）がtRPCをOSSとして公開。「TypeScriptのフルスタックアプリで型安全なAPIを最もシンプルに実現したい」という動機から生まれた
2021〜2022年 — Next.jsコミュニティを中心に急速に普及。create-t3-app（T3スタックと呼ばれるNext.js+tRPC+Prismaの構成）が人気を集める
2022年 — tRPC v10リリース。APIの抜本的な再設計が行われ、より直感的な記法に。ミドルウェア・コンテキスト管理も強化
2023年〜現在 — GraphQLの代替として語られる場面も増加。特にスタートアップやスモールチームでのフルスタック開発で定番ツールの一つに

tRPCが生まれた背景には、GraphQLは強力だがセットアップとスキーマ管理が重いという課題感があります。「同じTypeScriptチームなら、スキーマ言語を別に学ばなくていい方法があるはずだ」という発想から生まれました。

tRPC・REST・GraphQLの比較

tRPCが向かないケース

tRPCはTypeScript専用のため、以下のような状況では他の選択肢が適切です。

外部の開発者向けにAPIを公開する場合（REST + OpenAPIの方が汎用的）
フロントエンドとバックエンドが別の言語（JavaバックエンドにTypeScriptフロントなど）
モバイルアプリ（Swift/Kotlin）との通信（tRPCクライアントが使えない）
複雑な検索クエリや柔軟なデータ取得が必要な場合（GraphQLの方が強力）

T3スタックとは

tRPCと一緒によく語られる「T3スタック」は、以下の組み合わせを指す人気の構成です。

T3スタック
├── Next.js      ── フルスタックフレームワーク
├── TypeScript   ── 型安全な言語
├── tRPC         ── 型安全なAPI通信
├── Prisma       ── 型安全なDBアクセス（ORM）
├── Tailwind CSS ── CSSフレームワーク
└── NextAuth.js  ── 認証

create-t3-app というCLIツール一発でこの構成のプロジェクトが立ち上がるため、スタートアップやハッカソンでも広く使われています。

規格・仕様	内容
RFC 7230	HTTP/1.1 メッセージ構文（tRPCが内部で使用するHTTPの基盤仕様）
RFC 8259	JSON データ交換フォーマット（tRPCのデフォルトシリアライズ形式）