高速に進み、何も壊さない。\nエンドツーエンドの型安全なAPIを簡単に実現。

フルスタックアプリケーションの生産性向上のために、TypeScript推論のフルパワーを体験してください。

スター

クイックスタート

Supported by

22 more

Many thanks to all of our amazing sponsors!

自動型安全

サーバーサイドを変更？TypeScriptがファイル保存前のクライアント側でエラーを警告します！

高速開発体験

tRPCにはビルド/コンパイル工程が不要。コード生成やランタイムの肥大化、ビルドステップが発生しません。

フレームワーク非依存

すべてのJavaScriptフレームワーク・ランタイムと互換性があり、既存プロジェクトへの導入が容易です。

オートコンプリート

tRPCの使用はAPIサーバーコード用SDKのようで、エンドポイントに対する確信を持てます。

軽量バンドル

依存関係ゼロでクライアントサイドのフットプリントが最小限。軽量に動作します。

充実の機能

React、Next.js、Express、Fastify、AWS Lambda、Solid、Svelteなどに対応したアダプターを提供しています。

採用企業

tRPCは先端テクノロジーチームや多くのフォーチュン500企業に採用され、信頼されています。

使い方がシンプルで
比類なき開発者体験

typesafeなAPIを構築するためにtRPCを使い始めるのは迅速かつ簡単です。

ts
const t = initTRPC.create();
 
const router = t.router;
const publicProcedure = t.procedure;
 
const appRouter = router({
  greeting: publicProcedure
    .input(z.object({ name: z.string() }))
    .query((opts) => {
      const { input } = opts;
               const input: {
    name: string;
}
 
      return `Hello ${input.name}` as const;
  }),
});
 
export type AppRouter = typeof appRouter;

ts
const t = initTRPC.create();
 
const router = t.router;
const publicProcedure = t.procedure;
 
const appRouter = router({
  greeting: publicProcedure
    .input(z.object({ name: z.string() }))
    .query((opts) => {
      const { input } = opts;
               const input: {
    name: string;
}
 
      return `Hello ${input.name}` as const;
  }),
});
 
export type AppRouter = typeof appRouter;

プロシージャを定義する

tRPC API作成の第一歩はプロシージャの定義です。

プロシージャはバックエンド構築に使用する関数で、composable（合成可能）かつクエリ・ミューテーション・サブスクリプションのいずれかになります。ルーターは複数のプロシージャを含みます。

この例ではZodバリデーターを使用し、クライアントからの入力がプロシージャが期待する正確な形式か検証します。クエリからは単純なテキスト文字列を返します。

ファイル末尾ではルーターの型をエクスポートし、すぐにフロントエンドコードで利用できるようにします。

ts
const { listen } = createHTTPServer({
  router: appRouter,
});
 
// The API will now be listening on port 3000!
listen(3000);

ts
const { listen } = createHTTPServer({
  router: appRouter,
});
 
// The API will now be listening on port 3000!
listen(3000);

HTTPサーバーを作成する

次に、appRouterを使用してHTTPサーバーを作成します。これでtRPCサーバーが起動しました！

tRPCには多数のアダプターが用意されており、お使いの環境に合わせて選択できます。Next.js、Express、Fetch API（Astro、Remix、SvelteKit、Cloudflare Workersなど）、Fastify、AWS Lambda、あるいは標準のNode HTTPサーバーに対応しています。

ts
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });

ts
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });

クライアントを接続してクエリを開始しましょう！

サーバーが起動したので、クライアントを作成してデータのクエリを開始できます。

クライアント作成時にAppRouter型を渡すことで、バックエンドAPIと完全に一致するTypeScriptのオートコンプリートとIntellisenseが提供され、コード生成が不要になります。

ぜひお試しください！

Node.js

React

Next.js

これはtRPCを使用した最小限のNode.jsアプリケーションです。

Loading sandbox...

⚠️

Heads up!

WebContainers require modern Web APIs that likely aren't supported by your browser. Either open this page in a Chrome, or download this sandbox from StackBlitz and run it locally.

You can dismiss this warning to see the code, although you'll likely see unexpected errors.

Open in StackBlitz