# Zodでカスタムバリデーション関数を作成しtRPCに統合する

## 目次
1. はじめに
2. Zodとは？
3. カスタムバリデーション関数の作成
4. tRPCへ統合
5. tRPCでの実装例
6. まとめ

## 1. はじめに
近年、フロントエンドとバックエンド間でのスキーマ定義を共通化し、型安全かつ効率的にデータのやり取りを行う方法としてtRPCが注目されています。また、Zodはこの状況において非常に強力なスキーマ定義とバリデーションのライブラリとして利用されています。本記事ではZodでカスタムバリデーション関数を作成し、それをtRPCに統合する方法について詳しく解説します。

## 2. Zodとは？
ZodはTypeScript向けのバリデーションライブラリであり、スキーマ定義とそのバリデーション、変換を効率的に行うことができます。Zodの魅力はそのシンプルさと柔軟性にあります。基本的なデータ型からカスタムバリデーションまで、幅広い用途に対応しています。

## 3. カスタムバリデーション関数の作成
Zodでは、スキーマ定義の中にカスタムバリデーションを追加することができます。以下の例では、簡単なパスワードのバリデーションを行うカスタム関数を作成します。

![img](/mosaic-code.jpg)

このカスタムバリデーションでは、パスワードが8文字以上であるかをチェックしています。条件を満たさない場合は、指定したエラーメッセージを返すようにしています。

## 4. tRPCへ統合
tRPCは、クライアントとサーバー間で型安全なAPIを作成するためのツールです。Zodのスキーマを利用して、tRPCのルーターにバリデーションを簡単に組み込むことができます。

まず、ZodのスキーマをtRPCのエンドポイントで使用できるようにしましょう。

![img](/mosaic-code.jpg)

## 5. tRPCでの実装例
tRPCを用いたシンプルなエンドポイントの実装例を示します。クライアント側で入力されたパスワードがバリデーションルールを満たしているかをtRPCサーバー側で確認します。

![img](/mosaic-code.jpg)

この例では、ボタンをクリックすると`createUser`ミューテーションが呼び出され、パスワードのバリデーションが行われます。成功した場合には、"User created successfully"というメッセージが表示されます。

## 6. まとめ
ZodとtRPCを組み合わせることで、型安全で効率的なAPIの構築が可能となります。Zodの強力なバリデーション機能を活用し、カスタムバリデーションロジックを簡単に追加できます。これにより、一貫性のあるバリデーションが保証され、エラーの削減や開発の効率化が図れます。このツールの組み合わせは、特にTypeScriptを利用したモダンなウェブ開発プロジェクトにおいて非常に効果的です。 [cv:issue_marketplace_engineer]

# Zodでカスタムバリデーション関数を作成しtRPCに統合する

## 目次
1. はじめに
2. Zodとは？
3. カスタムバリデーション関数の作成
4. tRPCへ統合
5. tRPCでの実装例
6. まとめ

## 1. はじめに
近年、フロントエンドとバックエンド間でのスキーマ定義を共通化し、型安全かつ効率的にデータのやり取りを行う方法としてtRPCが注目されています。また、Zodはこの状況において非常に強力なスキーマ定義とバリデーションのライブラリとして利用されています。本記事ではZodでカスタムバリデーション関数を作成し、それをtRPCに統合する方法について詳しく解説します。

## 2. Zodとは？
ZodはTypeScript向けのバリデーションライブラリであり、スキーマ定義とそのバリデーション、変換を効率的に行うことができます。Zodの魅力はそのシンプルさと柔軟性にあります。基本的なデータ型からカスタムバリデーションまで、幅広い用途に対応しています。

## 3. カスタムバリデーション関数の作成
Zodでは、スキーマ定義の中にカスタムバリデーションを追加することができます。以下の例では、簡単なパスワードのバリデーションを行うカスタム関数を作成します。

```typescript
import { z } from "zod";

// カスタムバリデーション関数を追加したスキーマ
const passwordSchema = z.string().refine((password) => {
  // パスワードが8文字以上であることを確認
  return password.length >= 8;
}, {
  message: "Password must be at least 8 characters long",
});
```

このカスタムバリデーションでは、パスワードが8文字以上であるかをチェックしています。条件を満たさない場合は、指定したエラーメッセージを返すようにしています。

## 4. tRPCへ統合
tRPCは、クライアントとサーバー間で型安全なAPIを作成するためのツールです。Zodのスキーマを利用して、tRPCのルーターにバリデーションを簡単に組み込むことができます。

まず、ZodのスキーマをtRPCのエンドポイントで使用できるようにしましょう。

```typescript
import { initTRPC } from '@trpc/server';
import { passwordSchema } from './schemas'; // 先ほど作成したスキーマをインポート

const t = initTRPC.create();

const appRouter = t.router({
  createUser: t.procedure
    .input(passwordSchema)
    .mutation(async ({ input }) => {
      // パスワードはすでにバリデーション済み
      // ユーザーの作成処理を行う
      return { success: true, message: 'User created successfully' };
    }),
});

export type AppRouter = typeof appRouter;
```

## 5. tRPCでの実装例
tRPCを用いたシンプルなエンドポイントの実装例を示します。クライアント側で入力されたパスワードがバリデーションルールを満たしているかをtRPCサーバー側で確認します。

```typescript
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from './server'; // サーバー側で作成したルーター

const trpc = createTRPCReact<AppRouter>();

function App() {
  const mutation = trpc.createUser.useMutation();

  const handleSubmit = () => {
    const password = "userPassword123";
    mutation.mutate(password, {
      onSuccess: (data) => {
        console.log(data.message);
      },
      onError: (error) => {
        console.error(error.message);
      }
    });
  };

  return (
    <div>
      <button onClick={handleSubmit}>Create User</button>
      {mutation.isLoading && <p>Loading...</p>}
    </div>
  );
}

export default App;
```

この例では、ボタンをクリックすると`createUser`ミューテーションが呼び出され、パスワードのバリデーションが行われます。成功した場合には、"User created successfully"というメッセージが表示されます。

## 6. まとめ
ZodとtRPCを組み合わせることで、型安全で効率的なAPIの構築が可能となります。Zodの強力なバリデーション機能を活用し、カスタムバリデーションロジックを簡単に追加できます。これにより、一貫性のあるバリデーションが保証され、エラーの削減や開発の効率化が図れます。このツールの組み合わせは、特にTypeScriptを利用したモダンなウェブ開発プロジェクトにおいて非常に効果的です。 

Zodでカスタムバリデーション関数を作成しtRPCに統合する

目次

1. はじめに

続きを読むには単価診断を受けてください（30秒）