0Pricing
Sveltejs Academy · レッスン

tRPCによるエンドツーエンドの型安全性

SvelteKitプロジェクトにtRPCを追加し、クライアントとサーバー間の通信を完全に型付けします。

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

tRPCとは

tRPCを使うと、コード生成なしで完全に型付けされたAPI呼び出しを実現できます。サーバーの型がそのままクライアントに伝わります。

インストール

tRPCとSvelteKitアダプターを追加します。

npm install @trpc/server @trpc/client trpc-sveltekit

ルーターを定義する

プロシージャは、ルーターにまとめられた型付き関数です。

export const appRouter = router({
  users: router({
    list: publicProcedure.query(() => db.select().from(users))
  })
});

SvelteKitハンドラー

/trpc/[...path]/+server.jsにルーターをマウントします。

クライアントの設定

ルーターから型を推論する、型付きのtRPCクライアントを作成します。

export const trpc = createTRPCSvelteClient<AppRouter>();

型安全な呼び出し

クライアントがプロシージャを自動補完し、引数と戻り値の型を推論します。

const users = await trpc.users.list.query();

バリデーション

Zodスキーマと組み合わせることで、入力のバリデーションと型定義を一か所にまとめられます。

ミューテーション

型付きミューテーションには、publicProcedure.input(z.object({...})).mutation()を使用します。

ミドルウェア

プロシージャの実行前に、認証、ログ記録、レート制限などのためのtRPCミドルウェアを追加します。

SSRに対応

tRPCは、trpc-sveltekitアダプターを通じてSvelteKitのSSRで動作します。

REST/GraphQLとの比較

tRPCはスキーマレイヤーをなくし、クライアントとサーバーでTypeScriptの型を直接共有します。

確認

tRPCの主な利点は何ですか？

まとめ

tRPCはSvelteKitでエンドツーエンドの型安全なAPI呼び出しを実現し、OpenAPIやGraphQLのスキーマを不要にします。

よくある質問

「tRPCによるエンドツーエンドの型安全性」レッスンは無料ですか？

はい。「tRPCによるエンドツーエンドの型安全性」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「tRPCによるエンドツーエンドの型安全性」で何を学びますか？

SvelteKitプロジェクトにtRPCを追加し、クライアントとサーバー間の通信を完全に型付けします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「tRPCによるエンドツーエンドの型安全性」レッスンにはどのくらい時間がかかりますか？

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

このSveltejs Academyレッスンでコードを書いて実行できますか？

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

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

  1. 認証＋データベース＋API：アーキテクチャ
  2. SvelteKitでのDrizzle ORM
  3. データベースとともにVercelへデプロイ
  4. tRPCによるエンドツーエンドの型安全性
← Sveltejs Academyに戻る