tRPCのアーキテクチャ
tRPCがAPIスキーマの重複をなくす仕組みを学びます。
「tRPCのアーキテクチャ」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
エンドツーエンドの課題
一般的な Web アプリでは、サーバーが API を定義し、クライアントがそれを呼び出します。しかし、両者の型を同期させ続けるのは困難です。サーバー上のフィールドを変更すると、クライアントが実行時まで気付かれずに壊れることがあります。tRPCは、コード生成なしで型を直接共有することで、この問題を解決します。
// Server: returns { id: number; name: string }
// Client: must know that shape exactly
// Without sync: runtime errors when they drifttRPC とは
tRPC は、TypeScript で完全に型付けされた APIを構築するためのライブラリです。サーバーがプロシージャを定義し、クライアントはそれらをローカル関数のように呼び出せます。サーバーコードから推論された型に基づいて、完全な自動補完と型チェックを利用できます。
// Client call looks like a local function:
// const user = await client.user.byId.query(1);
// user is typed automatically from the serverコード生成なし
GraphQL や OpenAPI のワークフローとは異なり、tRPC にはコード生成のステップが不要です。コンパイルするスキーマファイルも、生成されたクライアントもありません。型は、コンパイル時の TypeScript の推論だけによってサーバーからクライアントへ伝わります。
// No .graphql files, no generated SDK
// Just import a type from the server packageルーターが契約になる
tRPC の中心にあるのはルーターです。これはプロシージャ（クエリとミューテーション）のツリーです。サーバー上のルーターオブジェクト、特にそこから推論された型が、クライアントと共有する唯一の信頼できる情報源になります。
// appRouter (server) defines every procedure
// type AppRouter = typeof appRouter is the contract型の共有方法
サーバーがエクスポートするのはルーターの型だけであり、実装はエクスポートしません。クライアントはその型をインポートして、プロキシクライアントの型付けに使用します。ブラウザーに配信されるサーバーコードはなく、ビルド時に消去される型だけが共有されます。
// server.ts
export type AppRouter = typeof appRouter;
// client.ts
import type { AppRouter } from '../server';クエリとミューテーション
プロシージャには主に2種類あります。クエリはデータを読み取り、通常は冪等です。ミューテーションはデータを変更します。この違いはキャッシュやHTTPのセマンティクスに対応し、クライアントからの呼び出し方にも影響します。
// client.user.list.query() -> read
// client.user.create.mutate(...) -> write実行時と型
tRPCには2つの層があります。実行時には、アダプターが処理するHTTP経由のJSONとして呼び出しが行われます。コンパイル時には、共有されたAppRouter型によってすべての呼び出しが完全にチェックされます。実行時の仕組みは薄く、型安全性こそが価値です。
// Runtime: POST /trpc/user.byId body: {"input":1}
// Types: client.user.byId.query(1) is checked end to endなぜ推論がコード生成に勝るのか
型が推論されるため、忘れてしまうような同期手順がありません。プロシージャを編集すると、呼び出しが一致しなくなった箇所に赤い波線が表示され、クライアントにもすぐ変更が反映されます。このフィードバックは瞬時に得られ、エディター上で確認できます。
// Add a required input field on the server
// -> every client call missing it becomes a type errortRPCの位置づけ
tRPCは、クライアントとサーバーが同じコードベースを共有するフルスタックTypeScriptのモノレポ、たとえばNext.jsアプリで特に力を発揮します。他の言語から利用されるパブリックAPI向けではありません。その場合は、OpenAPIやGraphQLのような言語に依存しないスキーマを使用します。
// Great: Next.js app, shared types, internal API
// Not ideal: public API for non-TS consumers全体像
流れは次のとおりです。ルーター上でプロシージャを定義し、ルーター型をエクスポートし、HTTPアダプターを接続して、その型から型付きクライアントを作成します。生成コードなしで、すべての呼び出しがサーバーのコントラクトに対してチェックされます。次のレッスンでは各要素を構築します。
// Roadmap:
// 1. initTRPC + procedures + appRouter
// 2. export AppRouter, create typed client
// 3. context + middleware for authコンパイラーを信頼する
考え方を変えましょう。APIコントラクトは、ドキュメントや実行時の検証だけにあるのではなく、型に定義され、コンパイラーによって強制されます。コンパイルが通れば、クライアントとサーバーは合意しています。この保証が「エンドツーエンドの型安全性」の意味です。
// If client.ts compiles, it matches the current server.確認テスト
tRPCのアーキテクチャについての理解度を確認します。
まとめ
tRPCのモデルを学びました。
- ルーターがコントラクトであり、その型が唯一の信頼できる情報源です。
- サーバーがエクスポートするのは
AppRouter型だけで、コードはエクスポートしません。 - クエリは読み取り、ミューテーションは書き込みを行い、実行時にはHTTP経由のJSONが使われます。
- 型安全性は推論によって実現され、コード生成の手順は必要ありません。
次は、ルーターとプロシージャの定義です。
AI チューターと学ぶ TypeScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 101
- レッスン
- 352
よくある質問
「tRPCのアーキテクチャ」レッスンは無料ですか？
はい。「tRPCのアーキテクチャ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「tRPCのアーキテクチャ」で何を学びますか？
tRPCがAPIスキーマの重複をなくす仕組みを学びます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「tRPCのアーキテクチャ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- tRPCのアーキテクチャ
- ルーターとプロシージャの定義
- クライアントとサーバー間の型推論
- ミドルウェアとコンテキスト