概要
- こんにちは。 KDDIアジャイル開発センターの小板橋です。
- 本記事は、KDDIアジャイル開発センター Engineer & Designer Advent Calendar 2022の2日目の記事です。
- 今回は、巷で噂の tRPC についてをまとめつつ、検証してみたというものになります。
tRPCとは？？
- 例えば、3層のwebアプリケーションや、BFF(Backend For Frontend) を使用した複数のバックエンド API を吸収するようなものを配置したアプリケーションを考えた時に、フロントから REST API などでやりとりさせようとすると API における型定義がとても重要なのは想像しやすいでしょう。
- そのために、例えば OpenAPI によるAPIの型定義ファイルを用いて開発を進めることで、事故をなるべく防止しようと努めると思います。
- ただ、このAPIの定義ファイル、正しくメンテナンスもしくは抜け漏れ等が発生した場合、疎通確認時に疎通できなくなり、あれどっちの問題？バックエンド？フロントの呼び出し部分？？など問題が発生した経験があるのではないでしょうか。(私はあります。w)
そんな問題を解決さ。tRPCの登場！！
- tRPC とは、一文でまとめると、あるプロジェクトがフルスタックの TypeScript で作られている場合、コード生成に依存することなく、クライアントとサーバーの間で型を直接共有できるというものです。
え、やばくね？？
そうなんです。やばいんです。
RPC とは？
- tRPC と聞いたときに、え、あの gRPC とか RPC とかあれでしょ？と思われるのではないでしょうか。
- そもそもの RPC というのは、リモートプロシージャコール の略で、遠隔手続き呼び出しなどと呼ばれるプロトコル、規約のことを指します。
- RPC では、あるコンピュータからネットワーク越しに別のコンピュータで動作するプログラムをプログラム中の手続きや関数、メソッドなどを呼び出すのと同じ手順で呼び出すものであり、呼び出し時にネットワークレイヤを意識することなく抽象化したものと言えそうです。
- そのため、ネットワーク上で双方で RPC による通信をするために通信規約として RPC プロトコルが定められている。
- ただ、この RPC でやり取りをする際のデータフォーマットというのは、いくつかあり例えば、メッセージを XML で記述する XML-RPC や JSON で記述する JSON-RPC などがあります。
- ただ、これら、RPC でやり取りする際に バイナリ形式だとデータの取り扱いが大変だったり、テキストベースのプロトコルだと通信における転送効率が良くないという問題がありました。
- そこで登場したのが、gRPC です。
- gRPC というのは、Googleが開発したRPC 実現のためのプロトコルです。
- gRPC を使うと IDL を使い API 仕様をファイルとし定義でき、そこからサーバーとクライアントに必要なソースコードのひな形を生成することができます。
- また、Protocol Buffers を使いデータをシリアライズし、高速な通信を実現できます。
さて、では gRPC と tRPC の違いはなんだろう？
- 実はこれらを比較するのは良くなく、tRPC は、gRPC のように スキーマを作成し、Protocol Buffers のようにバイナリベースのプロトコルでかつデータをシリアライズし高速化を目指すとかではなく、クライアントとサーバーの間で型を直接共有できるための RPC フレームワークなのです、
試してみよう
- ということで、早速やってみてどういうことなのかを目で見て確認していきましょう。
- 下記に tRPC のサンプルアプリがあるのでこちらで動作を見ていきます。
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
cd trpc-prisma-starter
yarn
yarn dx
- 左タブにあるのは、サーバサイドの実装で、右タブにあるのは、クライアントサイドの実装になります。
- 検証するのは、サーバ側の型情報を変更した際にクライアントサイド側でどう見えるのかを試します。
- ここで注目いただきたいのが、右タブの94行目の t.procedure.input() の部分なのですが、ここで入力された値を検証します。
- 今は、title が string().min(1).max(32) と指定されているので、これを bigint に変えてみましょう。そうすると。。
- クライアント側が title は bigint だよとエラーを吐くようになりましたね。
まとめ
- 今回は、tRPC についてに触れ、実際に検証する中でデモアプリ内のクライアントサイドとサーバーサイドとの間で型が直接共有されていることを確認してみました。
- アプリケーションを全て TypeScript で作っている場合は、かなり便利なのではないでしょうか。
- 是非是非お試しくださいー！
参考文献