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

tRPC とは?

最終更新:
💡 サーバーのAPIの型を、呼び出す側でも使う

TypeScriptの型推論を使い、サーバーのAPIの入力・出力の型をクライアントでも利用できる仕組み。API用の型を別に生成する手間を減らせるが、実行時の入力検証や権限確認は別に必要になる。

📌 このページのポイント
tRPC:APIの型を共有する開発時:routerの型を利用サーバーrouterAppRouter型情報クライアント補完・型検査に使う/型は通信しない実行時:HTTPを使う例入力検証権限確認・処理呼び出しリクエストレスポンス型が合っても通信失敗は起こりうる
上段は型の参照・共有、下段は実際の通信を表す。型共有にAPIスキーマの別定義やコード生成は不要でも、実行時の入力検証や認証・権限確認は必要になる。
ひよこ ひよこ
サーバーの関数を直接動かせるの?
ペンギン先生 ペンギン先生
手元の関数のような書き心地で、サーバーの処理を呼べるよ。サーバーでprocedureを定義してrouterにまとめ、クライアントを用意するんだ。実際にはネットワーク通信があるので、通信の失敗や応答待ちも考える必要があるよ。
ひよこ ひよこ
型はどうやって伝わるの?
ペンギン先生 ペンギン先生
サーバーのrouterからAppRouterという型を取り出し、クライアント側でimport typeして使う方法があるよ。入力や戻り値の型が分かり、補完や型検査に使える。型だけのimportはビルド時に消えるので、サーバーの処理自体をブラウザーへ運ぶわけではないんだ。
ひよこ ひよこ
スキーマ不要なら入力検証もしなくていい?
ペンギン先生 ペンギン先生
型共有のために別のAPIスキーマを用意しなくてよい、という意味だよ。実行時に届く入力は信用せず、procedure.input()などで検証する。利用者の認証や操作権限の確認も、型が合っているだけでは済まないんだ。
ひよこ ひよこ
同じリポジトリに置かないと使えない?
ペンギン先生 ペンギン先生
同じ場所なら型を共有しやすいけれど、重要なのはクライアントがサーバーの型を参照できることだよ。型を共有していても、古いクライアントと新しいサーバーが通信する場合には互換性を考える必要がある。型検査だけで更新後の通信を保証することはできないよ。
ひよこ ひよこ
Next.jsのWebアプリ専用?
ペンギン先生 ペンギン先生
特定のフレームワーク専用ではなく、Node.jsや対応アダプター、通常のクライアントなどを使えるよ。選ぶときは、両側でTypeScriptの型を共有できるかを考えよう。他言語から広く使う公開APIなら、型以外にどんな契約を公開するかも検討するんだ。
ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「tRPC」って出てきたら「TypeScriptの型をサーバーとクライアントで共有するAPIの仕組み」と思えばだいたいOK!
📖 おまけ:英語の意味
「TypeScript Remote Procedure Call」 = TypeScriptの遠隔手続き呼び出し
💬 RPCは遠隔手続き呼び出しという意味だよ。tRPCでは、離れたサーバーの処理を呼ぶAPIにTypeScriptの型を活用するよ。

参考資料

← 用語集にもどる