スピード重視で、ノーミス。エンドツーエンドの型安全な API を簡単に実現。

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

スター

クイックスタート

サポート:

その他29社

素晴らしいスポンサーの皆様、ありがとうございました！

自動的な型安全性

サーバー側で変更を加えましたか？ TypeScript は、ファイルを保存する前にクライアント側のエラーを警告します！

軽快な DX

tRPC にはビルドやコンパイルのステップがないため、コード生成、ランタイムの肥大化、ビルドステップがありません。

フレームワークに依存しない

すべての JavaScript フレームワークとランタイムと互換性があります。既存のプロジェクトにも簡単に追加できます。

オートコンプリート

tRPC を使用すると、API のサーバーコード用の SDK を使用しているかのように、エンドポイントに自信を持つことができます。

軽量なバンドルサイズ

tRPC は依存関係がなく、クライアント側のフットプリントが小さいため、軽量です。

バッテリー付属

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

シンプルで使いやすい
比類なき開発体験

tRPC を使用して型安全な API を構築するのは、迅速かつ簡単です。

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 を作成する最初のステップは、プロシージャを定義することです。

プロシージャとは、バックエンドの構築に使用する関数のことです。プロシージャは*構成可能*で、クエリ、ミューテーション、またはサブスクリプションにすることができます。ルーターには複数のプロシージャが含まれています。

このプロシージャでは、 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' });
      
const res: `Hello ${string}`

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