React Academy · レッスン

ZodによるSchema Validation

Q: 「ZodによるSchema Validation」で何を学びますか？

@hookform/resolversとZod schemasを統合し、型安全なフォームバリデーションを実現します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

@hookform/resolversとZod schemasを統合し、型安全なフォームバリデーションを実現します。

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

ようこそ

このレッスンでは、@hookform/resolversを介してReact Hook FormとZodスキーマを統合し、フォームとTypeScriptの型の両方で単一の信頼できる情報源を使用した、型安全な検証を実現します。

スキーマ検証を使う理由

インストール

ZodとRHFのresolverパッケージをインストールします。

npm install zod @hookform/resolvers

Zodスキーマの定義

z.object()を使用してフォームの形状を定義します。各フィールドには、検証メソッドをチェーンしたZodの型を使用します。

import { z } from 'zod';

const loginSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'At least 8 characters'),
});

TypeScript型の推論

z.inferを使用すると、ZodスキーマからTypeScriptの型を自動的に導出できます。別途interfaceを定義する必要はありません。

type LoginForm = z.infer<typeof loginSchema>;
// { email: string; password: string }

resolverによるuseFormとの接続

zodResolver(schema)をuseFormのresolverオプションに渡します。RHFはインラインルールの代わりにZodを使用してフォームを検証します。

import { zodResolver } from '@hookform/resolvers/zod';

const { register, handleSubmit, formState } = useForm<LoginForm>({
  resolver: zodResolver(loginSchema),
});

インラインルールからの解放

zodResolverを使用すると、register()にrulesを渡す必要がなくなります。2番目の引数なしでregister('fieldName')を呼び出すだけです。すべての検証はZodが処理します。

<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}

複雑なZodバリデーション

Zodは強力なバリデーションをサポートしています。url()、uuid()、regex()、カスタムロジック用のrefine()、フィールド間バリデーション用のsuperRefine()を利用できます。

const schema = z.object({
  url: z.string().url('Must be a valid URL'),
  confirmPassword: z.string(),
}).refine(
  data => data.password === data.confirmPassword,
  { message: 'Passwords must match', path: ['confirmPassword'] }
);

フィールド間バリデーション

Zodのrefine()またはsuperRefine()では、すべてのフィールド値にアクセスできます。そのため、「終了日は開始日より後でなければならない」のようなフィールド間のルールを設定できます。

const schema = z.object({
  start: z.string(),
  end: z.string(),
}).refine(d => d.end > d.start, {
  message: 'End must be after start',
  path: ['end'],
});

バックエンドとのスキーマ共有

フルスタックTypeScriptプロジェクトでは、共有モジュールからZodスキーマをエクスポートします。ReactフォームとNode.js/Next.jsのAPIハンドラーの両方で使用すると、バリデーションを一貫させられます。

// shared/schemas.ts
export const loginSchema = z.object({ ... });

// frontend — import and use as resolver
// backend — import and call .parse() on request body

確認問題

TypeScriptでフォームの型にz.inferを使用する主な利点は何ですか？

まとめ

Zodスキーマを定義し、z.inferでTypeScriptの型を推論し、zodResolverをuseFormに渡して、インラインのバリデーションルールを削除します。フィールド間バリデーションにはrefine()を使用し、フロントエンドとバックエンドの間でスキーマを共有します。

次のレッスン

次のレッスン: **useFieldArrayによる動的フィールド** — useFieldArrayフックを使用して、動的なフォームフィールドの追加、削除、並べ替えを行います。

よくある質問

「ZodによるSchema Validation」レッスンは無料ですか？

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

「ZodによるSchema Validation」で何を学びますか？

@hookform/resolversとZod schemasを統合し、型安全なフォームバリデーションを実現します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ZodによるSchema Validation」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← React Academyに戻る