0Pricing
TypeScript Academy · レッスン

エンドツーエンドの型安全性：スキーマファーストのワークフロー

スキーマからクライアントまで単一の信頼できる情報源を維持します。

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

スキーマファーストとは

スキーマファーストとは、GraphQLスキーマを唯一の情報源とする考え方です。フロントエンドの型、バックエンドのリゾルバー、APIコントラクトのすべてをスキーマから生成するため、どの層も同期がずれることを防げます。

# The workflow:
# 1. Define schema (.graphql or SDL)
# 2. Generate server resolver types
# 3. Generate client operation types
# 4. Both sides automatically stay in sync

スキーマの定義

GraphQLスキーマをSDL（.graphqlファイル）で記述し、クライアントとサーバー間のコントラクトとしてリポジトリにコミットします。

# schema.graphql
type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
}

サーバー：リゾルバーの型を生成する

typescript-resolversプラグインを使ってcodegenを実行し、スキーマから型付きのリゾルバーシグネチャを生成します。

# Server codegen step
npx graphql-codegen --config codegen.server.yml

クライアント：オペレーションの型を生成する

typescript-operationsとApollo/urqlのプラグインを使ってcodegenを実行し、.graphqlのオペレーションファイルから型付きフックを生成します。

# Client codegen step
npx graphql-codegen --config codegen.client.yml

破壊的変更の検出

graphql-inspectorを使って、破壊的なスキーマ変更（フィールドの削除や型の変更）を本番環境に反映する前に検出します。

npx graphql-inspector diff ./api/schema.graphql ./api/schema.new.graphql
# Reports: BREAKING: Field 'User.email' was removed

スキーマレジストリ

スキーマレジストリ（Apollo Studio、Hive）はスキーマのバージョンを保存し、時間の経過に伴う変更を追跡して、CIで破壊的な変更を通知します。

# Push schema to Apollo Studio:
npx apollo schema:push --endpoint https://api.example.com/graphql

スキーマを使ったモック

スキーマを使って、実際のサーバーなしでクライアント開発用のモックデータを生成します。これにより、モックをスキーマに正確に合わせられます。

import { buildClientSchema, introspectionFromSchema } from "graphql";
import { addMocksToSchema } from "@graphql-tools/mock";
const schema = buildClientSchema(introspectionResult);
const mockedSchema = addMocksToSchema({ schema });

代替手段としてのtRPC

TypeScriptだけを使うプロジェクトでは、tRPCによってスキーマ言語なしでエンドツーエンドの型安全性を実現できます。サーバーのルーター型そのものがクライアントのコントラクトになります。

// Server: router infers types
const router = t.router({ getUser: t.procedure.query(() => fetchUser()) });
// Client: types flow automatically via inference
const { data } = trpc.getUser.useQuery();

検証のためのZod + tRPC

ZodのスキーマとtRPCの入力バリデーターを組み合わせると、単一の定義から実行時検証とコンパイル時の型を得られます。

const createUser = t.procedure
  .input(z.object({ name: z.string(), email: z.string().email() }))
  .mutation(({ input }) => saveUser(input));
// input: { name: string; email: string } — from Zod schema

CI：完全なスキーマ安全性パイプライン

スキーマファーストの安全性を実現する完全なCIパイプラインは、スキーマのlint → 破壊的変更の確認 → codegenの実行 → 型チェック → テストの実行という流れになります。

# .github/workflows/schema.yml
- run: npx graphql-inspector validate ...
- run: npx graphql-codegen --check
- run: npx tsc --noEmit
- run: npm test

まとめ：スキーマファーストのワークフロー

スキーマファーストのTypeScriptでは、SDLを定義 → サーバーのリゾルバー型を生成 → クライアントのオペレーション型を生成 → CIで破壊的変更を検出、という流れで進めます。スキーマが、すべての型安全性の層における唯一の情報源です。

確認問題

スキーマファーストのワークフローにおいて、GraphQLスキーマはどのような役割を果たしますか。

学習内容

スキーマファーストのTypeScriptワークフローでは、すべての型をGraphQLスキーマから生成します。サーバー用のリゾルバー型とクライアント用のオペレーション型を生成し、CIで破壊的変更を検出して、すべての層のコントラクトとしてスキーマを維持します。

よくある質問

「エンドツーエンドの型安全性：スキーマファーストのワークフロー」レッスンは無料ですか？

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

「エンドツーエンドの型安全性：スキーマファーストのワークフロー」で何を学びますか？

スキーマからクライアントまで単一の信頼できる情報源を維持します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「エンドツーエンドの型安全性：スキーマファーストのワークフロー」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. GraphQLスキーマからTypeScript型へ
  2. GraphQL Code Generatorによる型付きResolver
  3. Apolloとurqlによる型付きGraphQLクライアント
  4. エンドツーエンドの型安全性：スキーマファーストのワークフロー
← TypeScript Academyに戻る