最初のtRPCプロジェクトをセットアップする
tRPCのインストール、ルーターの作成、クライアントの接続を順に進め、最初の型安全な呼び出しを実装します。
「最初のtRPCプロジェクトをセットアップする」はCoddyKit上の無料tRPC End-to-End Type Safe APIsレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはtRPC End-to-End Type Safe APIs学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 tRPC End-to-End Type Safe APIsコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
What We Are Building
You know what tRPC is and why type safety matters. Now you'll set up a real project and make your first end-to-end type-safe call.
Installing the Packages
tRPC ships as separate server and client packages. Install them alongside Zod for validation.
npm install @trpc/server @trpc/client zodInitializing tRPC
Create one t object with initTRPC.create() — everything else (router, procedures) is built from it.
import { initTRPC } from "@trpc/server";
const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;Creating a Router
A router groups procedures. Here's a minimal one exposing a single greeting query.
export const appRouter = router({
hello: publicProcedure.query(() => {
return "Hello tRPC";
}),
});Exporting the Router Type
The core trick: export only the router's type, not its code. The client learns the full API shape with zero codegen.
export type AppRouter = typeof appRouter;Serving the Router
Attach your router to an HTTP server using a tRPC adapter — here, the standalone createHTTPServer.
import { createHTTPServer } from "@trpc/server/adapters/standalone";
createHTTPServer({ router: appRouter }).listen(3000);Creating the Client
The client imports the AppRouter type to unlock full autocomplete and type checking against your server.
import { createTRPCClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "./server";
const client = createTRPCClient<AppRouter>({
links: [httpBatchLink({ url: "http://localhost:3000" })],
});Making the First Call
Call the procedure as if it were a local typed function — that's the whole point of tRPC.
const greeting = await client.hello.query();
console.log(greeting); // "Hello tRPC"Type Safety in Action
Type safety in action: rename hello on the server and the client call becomes a compile error instantly — no runtime surprise.
Project Structure
A common project layout: server/trpc.ts for the t object, server/router.ts for procedures, and client/index.ts for the typed client.
Adding Inputs
Most procedures take input. Validate it with Zod and that input type flows to the client automatically.
greet: publicProcedure
.input(z.object({ name: z.string() }))
.query(({ input }) => "Hi " + input.name),Quick Check
Test your setup knowledge.
Recap
Recap: you installed the tRPC packages, built a router and exported its type, and made a typed client call — a full end-to-end type-safe pipeline.
AI チューターと学ぶ tRPC End-to-End Type Safe APIs — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 10
- レッスン
- 40
よくある質問
「最初のtRPCプロジェクトをセットアップする」レッスンは無料ですか？
はい。「最初のtRPCプロジェクトをセットアップする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、tRPC End-to-End Type Safe APIsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 tRPC End-to-End Type Safe APIsコースには全4レッスンが含まれています。
「最初のtRPCプロジェクトをセットアップする」で何を学びますか？
tRPCのインストール、ルーターの作成、クライアントの接続を順に進め、最初の型安全な呼び出しを実装します。 ブラウザで直接実行するハンズオンコードでtRPC End-to-End Type Safe APIsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
tRPC End-to-End Type Safe APIsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのtRPC End-to-End Type Safe APIsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「最初のtRPCプロジェクトをセットアップする」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このtRPC End-to-End Type Safe APIsレッスンでコードを書いて実行できますか？
はい。すべてのtRPC End-to-End Type Safe APIsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- tRPCとは？
- 型安全性の力
- tRPCの中核概念の概要
- 最初のtRPCプロジェクトをセットアップする