Reactアプリケーションでフォームのバリデーションを扱う際、ZodとReact Hook Formを組み合わせることはよくあります。しかし、同じフォームが異なるシーンで使用され、一部のフィールドが条件により必須になったり、オプションになったりする場合、どうすれば良いでしょうか？この記事では、Zodで動的なバリデーションスキーマを作成する方法をご紹介します。

Zodとは？

Zodは、TypeScript用のランタイムバリデーションライブラリです。Zodは、あらゆる種類のデータをバリデーションするための強力なスキーマ定義機能を提供します。また、それらのスキーマはTypeScriptの型としても使用できるため、型安全なコードを書くことができます。

動的なスキーマの作成：ユーザー登録とユーザー情報編集

では具体的なシチュエーションを考えてみましょう。ユーザー登録画面とユーザー情報編集画面があり、それぞれにフォームが存在します。この2つの画面では、ほぼ同じフォームが使用されていますが、一つ違いがあります。それは、ユーザー登録画面では"利用規約に同意する"というチェックボックスが必須項目となっていますが、ユーザー情報編集画面ではこの項目が存在しないという点です。

このような場合、isEditというパラメータを基にスキーマを動的に生成する関数を作成します。以下に該当のコードを示します：

import * as z from 'zod';

export const createProfileSchema = (isEdit: boolean) => {
    let isAgreeTermsSchema = isEdit ? z.boolean().optional() : z.boolean();

    return z
        .object({
            // Other fields go here...
            isAgreeTerms: isAgreeTermsSchema,
        });
};

この関数を使用してスキーマを生成します：

const {
    params: { isEdit }
} = useRoute<ProfileEntryRouteProp>();

const profileSchema = createProfileSchema(isEdit);

これにより、isEditがfalse（ユーザー登録画面）の場合、isAgreeTermsは必須項目となり、isEditがtrue（ユーザー情報編集画面）の場合、isAgreeTermsは存在しない（オプション）となります。

結論

この記事では、Zodを使用して動的なバリデーションスキーマを作成する方法を紹介しました。この方法を使用すれば、特定の条件に基づいてフィールドが必須になるかオプションになるかを動的に変更することが可能です。これにより、ZodとReact Hook Formの組み合わせがさらに強力なツールになります。

以上です。記事がお役に立てれば幸いです。何かご質問がありましたら、コメントでお知らせください。また、「いいね」もお願いします！

Zodで条件に応じてバリデーションスキーマを動的に変更する：TypeScriptとReact-Hook-Formの例

目次

はじめに

Zodとは？

動的なスキーマの作成：ユーザー登録とユーザー情報編集

結論