tRPC End-to-End Type Safe APIs · レッスン

tRPCの中核概念の概要

ルーター、プロシージャ、コンテキストなど、tRPCのアーキテクチャを概観します。

「tRPCの中核概念の概要」はCoddyKit上の無料tRPC End-to-End Type Safe APIsレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはtRPC End-to-End Type Safe APIs学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 tRPC End-to-End Type Safe APIsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

tRPC Core Concepts Intro

Time for tRPC's building blocks. We'll cover routers (how the API is organized), procedures (the functions clients call), and context (per-request data).

tRPC Flow: Client to Server

The tRPC flow: the client calls a procedure, the router routes it, the procedure runs (often using context), and a typesafe response goes back to the client.

Meet tRPC Routers

Routers are the backbone of a tRPC API. They group related procedures into modules, define your API structure, and can be merged into one full API.

Simple Router Structure

A router is just an object holding your callable functions. Here's a conceptual sketch of a minimal user router you'll fill with procedures.

import { router, publicProcedure } from '../trpc';

// This is a conceptual router definition.
// 'router' and 'publicProcedure' would be defined in your tRPC setup file.
export const userRouter = router({
  // All user-related procedures will be defined here
  // e.g., 'getUser', 'createUser', 'updateUser'
});

Understanding Procedures

Procedures are the actual functions your client calls — your API endpoints. Each defines its input, its output, and the server-side business logic.

Queries for Data Fetching

A query procedure fetches data. It should be read-only and idempotent — same input, same result — making it ideal for client-side caching. Like an HTTP GET.

Basic Query Procedure

Here's a conceptual query that fetches a user by ID: it declares an input and returns a user object.

// Inside your userRouter (from previous scene)
// This procedure gets a user by ID.
getUserById: publicProcedure
  .input(z.string()) // Expects a string (the user ID)
  .query(({ input }) => {
    // In a real app, you'd fetch from a database here.
    // For now, imagine we're returning a simple object.
    return { id: input, name: "Jane Doe", email: "jane@example.com" };
  }),

Mutations for Data Changes

A mutation changes data — create, update, delete. It has side effects and isn't idempotent, so repeated calls can differ. Like an HTTP POST, PUT, or DELETE.

tRPC Context Explained

Context is built once per request and passed to every procedure in it. It's where you stash request-scoped data like the auth user or a DB connection.

Core Concepts Check

Let's quickly check your understanding of tRPC's core building blocks.

Core Concepts Recap

Recap: routers organize the API, procedures (queries for reads, mutations for writes) do the work, and context shares per-request data. Next: your first project.

よくある質問

「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は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「tRPCの中核概念の概要」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このtRPC End-to-End Type Safe APIsレッスンでコードを書いて実行できますか？

はい。すべてのtRPC End-to-End Type Safe APIsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← tRPC End-to-End Type Safe APIsに戻る