【ティーアールピーシー】

tRPC とは?

💡 型がサーバーからクライアントまで一気通貫!スキーマ不要のAPI革命
📌 このページのポイント
REST / GraphQL vs tRPC REST API エンドポイント定義 型定義を別途作成 OpenAPI / Swagger ⚠ 型の二重管理 GraphQL スキーマ定義(SDL) コード生成で型取得 柔軟なクエリ ⚠ スキーマ+codegen必要 tRPC スキーマ定義不要 型が自動で共有 コード生成なし ✓ エンドツーエンド型安全 tRPC の型共有の仕組み Server(router) 型推論 Type import Client(caller) TypeScript専用だからこそ実現できるスキーマレスな型安全
REST/GraphQL vs tRPC の比較イメージ
ひよこ ひよこ

APIを作るのにRESTGraphQLじゃダメなの?

ペンギン先生 ペンギン先生

ダメじゃないけど、TypeScriptのプロジェクトだと型の二重管理が面倒なんだ。REST APIだとサーバーとクライアントで別々に型定義が必要だし、GraphQLスキーマ定義とコード生成のステップがいるんだよ

ひよこ ひよこ

tRPCだとそれがいらないってこと?

ペンギン先生 ペンギン先生

そうなんだ。サーバー側でTypeScriptの関数を定義するだけで、クライアント側からその関数を呼ぶときに自動で型補完が効くよ。まるでサーバーの関数を直接呼んでいるような感覚で開発できるんだ

ひよこ ひよこ

どういう仕組みで型が共有されるの?

ペンギン先生 ペンギン先生

TypeScript型推論をそのまま活用しているんだ。サーバーとクライアントが同じTypeScriptプロジェクト(モノレポ)にあれば、importするだけで型情報が伝わる。実行時にはJSONHTTP通信しているよ

ひよこ ひよこ

じゃあTypeScript以外の言語では使えないの?

ペンギン先生 ペンギン先生

その通り、TypeScript専用なんだ。だからモバイルアプリや他言語のクライアントがある場合はRESTGraphQLの方が向いているね。逆に言えば、TypeScriptで統一されたプロジェクトでは最強の選択肢だよ

ひよこ ひよこ

実際にどんなプロジェクトで使われているの?

ペンギン先生 ペンギン先生

Next.jsと組み合わせたフルスタック開発でよく使われているよ。T3 Stackという有名な構成では、Next.js・tRPC・PrismaTailwind CSSをセットで使うのが定番になっているんだ。型安全が開発体験を劇的に変えてくれるよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「tRPC」って出てきたら「TypeScript専用のスキーマ不要型安全API」と思えればだいたいOK!
📖 おまけ:英語の意味
「TypeScript Remote Procedure Call」 = TypeScriptの遠隔手続き呼び出し
💬 RPCは「離れた場所にある関数を呼び出す」という意味で、TypeScriptに特化しているからtRPCなんだよ
← 用語集にもどる