tRPC超基本
はじめに
最近、公私ともに tRPC を使う機会が増えました。
一旦、tRPC の基本をまとめておきたいと思い、記事にしました。
※ 本記事は tRPCv11以上のtRPC ドキュメントを参考にしています。
tRPC とは
tRPC(TypeScript Remote Procedure Call) はAPI エンドポイントを型付けし、その型をクライアントとサーバーで共有することで型安全に API を構築するための TypeScript のライブラリです。
tRPC は REST と GraphQL の概念を組み合わせて作られているようです。
クライアント・サーバー間で型を共有することで
- API の型安全性の向上
- エディタの補完機能等による開発効率向上
といったメリットが得られます。
以下は実際にエディタ上の補完機能が効いている様子です。
※ Deno 環境下
server.tsのinput()メソッド内のプロパティが変わると、client.tsのquery()メソッド内がエラーとなり、また、修正時には補完が効いている様子がわかります。
tRPC と RPC
RPC とは、Remote Procedure Call の略で、あるプログラムから別のネットワーク上の別コンピュータにある関数等々を呼び出すための規約・プロトコルのことです。
tRPC は『TypeScript Remote Procedure Call』という名前の通り、RPC の実装の一つで、TypeScript 用に実装されたものです。
tRPC の HTTP RPC 仕様
tRPC のベースプロトコルはHTTPとなっています。
例として、tRPC のメソッドは以下のように HTTP メソッドにマッピングされ、リクエスト・レスポンス処理が行われます。
| tRPC のメソッド | HTTP メソッド |
|---|---|
query() |
GET |
mutation() |
POST |
また、tRPC は基本的にはJSON-RPC 2.0に準拠しています。
JSON-RPC 2.0 とは『データ形式として JSON を使用した RPC』です。
そのため、レスポンスデータ等は JSON 形式で返されます。
tRPC とモノレポ
tRPC は Monorepo（モノレポ）用に設計されているため、モノレポで真価を発揮します。
Monorepo（モノレポ）は『プロダクトの全コードを単一のモノリシックなリポジトリで管理する開発手法』です。
ただ、tRPC プロジェクトをモノレポにすることは必須ではなく、サーバー側コードを npm パッケージ化し、クライアント側でそのパッケージを使用するといった対処方法もあるようです。
私自身も過去、tRPC を使用して個人開発を行った際に Git Submodule を使って、クライアントとサーバーのコードを分離＆管理したことがあります。
（ただ、取り回しはめんどくさかったです。）
tRPC の使用例
前提として、tRCP はその特性上、クライアントとサーバーともに TypeScript で開発されるプロジェクトにのみ選択肢となる技術スタックです。
そのため、tRPC を採用する場合、チーム内に TypeScript の知見があることが望ましいでしょう。
以下は（私の独断と偏見による）使用例紹介です。
小規模な Web アプリケーション
tRPC は TypeScript をベースとした
- クライアント側に Next.js
- サーバー側に Express + tRPC
といった構成で開発する小規模な Web アプリケーションの技術スタックとして使うのが良いのではないかと思います。
小規模であれば、プロジェクトをモノレポで構成する＆管理するのは難しくないと思いますし、tRPC の型安全性を活かしつつ、エディタのコード補完等を駆使して開発を進めることができると思います。
私自身も、個人開発ですが、上記構成で Web アプリケーションを開発したことがあります。
VS Code の補完機能を駆使して、効率的に開発を進めることができました。
Next.js への組み込み方法については、公式ドキュメントで紹介されていますので、参考にしてみてください。
【Deno 環境】CLI ツール + API サーバー
最近、業務で Deno 環境下で動く CLI ツールを作っています。
その際の API サーバーに tRPC を使っています。
現状として、Deno 環境下でも問題なく tRPC を使えていますので、使用例の一つとして紹介します。
BFF（Backend For Frontend）アーキテクチャでの API Gateway サーバー
tRPC の記事をネットの海で漁ると、tRPC の紹介とともにBFF（Backend For Frontend）アーキテクチャでの API Gateway サーバーとして利用されている旨の記事が散見されます。
私自身、BFF アーキテクチャでの API Gateway サーバーとして tRPC を利用したことはありませんが、tRPC は BFF アーキテクチャでの利用にも向いているのかもしれません。
気になる方はぜひググってみてください。
おわりに
tRPC は API の型安全性を保ちながら開発を進めることができるため、TypeScript のプロジェクトであれば検討に値する技術スタックだと思います。
まだまだ REST API に比べて若く、知名度も低い技術だと思いますが、公式ドキュメント内にテンプレートも多く、また、T3 Stackと呼ばれる Next.js + TypeScript をコアとした技術スタックも出てきているようです。
さらに、tRPC の公式ドキュメントには様々なテンプレートが紹介されていますので、参考にしてみてください。
気になる方がいれば、ぜひ一度触ってみてください。
Discussion