# tRPC × Zodの型安全なバリデーションエラー表示の実装

## 目次
- 1. はじめに
- 2. tRPCとZodの概要
  - 2-1. tRPCとは
  - 2-2. Zodとは
- 3. tRPCとZodを組み合わせる理由
- 4. tRPC × Zodによる型安全なバリデーションエラーの実装
  - 4-1. 環境構築
  - 4-2. Zodスキーマの定義
  - 4-3. tRPCでのエラー処理
  - 4-4. クライアントサイドでのエラー表示
- 5. 型安全なバリデーションの利点
- 6. まとめ

## 1. はじめに
近年、フロントエンドとバックエンド間の通信を簡素化し、型情報を最大限に活用するための技術が増えています。特に、tRPCとZodを組み合わせることで、型安全なバリデーションとエラーハンドリングを実現することが可能です。本記事では、これらのツールを用いて型安全なバリデーションエラーの実装方法について詳しく解説します。

## 2. tRPCとZodの概要

### 2-1. tRPCとは
tRPCは、TypeScriptを用いたエンドツーエンドの型安全なRPC通信を実現するライブラリです。サーバーサイドとクライアントサイドで型情報を共有できるため、型のミスマッチによるバグを防ぎやすくなります。

### 2-2. Zodとは
Zodは、JavaScriptやTypeScriptにおけるスキーマ定義とバリデーションを提供するライブラリです。Zodを使用することで、入力データの型チェックとバリデーションを容易に行うことができます。

## 3. tRPCとZodを組み合わせる理由
両者を組み合わせることで、サーバーとクライアントの型安全性を確保しつつ、バリデーションエラーを明確かつ安全に処理することができます。これにより、開発の効率化とメンテナンス性の向上が図れます。

## 4. tRPC × Zodによる型安全なバリデーションエラーの実装

### 4-1. 環境構築
まずは、tRPCとZodをインストールします。以下のコマンドを実行して、必要なパッケージを追加します。

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

### 4-2. Zodスキーマの定義
Zodを使って、入力データのスキーマを定義します。ここでは、ユーザー登録フォームを例にします。

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

### 4-3. tRPCでのエラー処理
tRPCのルーターでZodスキーマを用いてバリデーションを行い、エラーを処理します。

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

### 4-4. クライアントサイドでのエラー表示
クライアントサイドでtRPCのクライアントライブラリを用いてエラーを取得し、表示します。

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

## 5. 型安全なバリデーションの利点
型安全なバリデーションをtRPCとZodで実現することにより、次の利点が得られます：
- **データの一貫性**：クライアントとサーバー間で同じ型情報が共有されるため、一貫性のあるデータ処理が可能です。
- **バグの削減**：型チェックが自動化されることで、手動での型確認ミスを減らします。
- **開発の効率化**：エラーハンドリングが統一されることで、コードの可読性が向上し、開発効率が上がります。

## 6. まとめ
tRPCとZodを組み合わせて型安全なバリデーションを実装することで、強力な型チェックとバリデーションを両立しつつ、保守性の高いコードを実現できます。本記事を参考に、ぜひ自身のプロジェクトに導入してみてください。 [cv:issue_marketplace_engineer]

# tRPC × Zodの型安全なバリデーションエラー表示の実装

## 目次
- 1. はじめに
- 2. tRPCとZodの概要
  - 2-1. tRPCとは
  - 2-2. Zodとは
- 3. tRPCとZodを組み合わせる理由
- 4. tRPC × Zodによる型安全なバリデーションエラーの実装
  - 4-1. 環境構築
  - 4-2. Zodスキーマの定義
  - 4-3. tRPCでのエラー処理
  - 4-4. クライアントサイドでのエラー表示
- 5. 型安全なバリデーションの利点
- 6. まとめ

## 1. はじめに
近年、フロントエンドとバックエンド間の通信を簡素化し、型情報を最大限に活用するための技術が増えています。特に、tRPCとZodを組み合わせることで、型安全なバリデーションとエラーハンドリングを実現することが可能です。本記事では、これらのツールを用いて型安全なバリデーションエラーの実装方法について詳しく解説します。

## 2. tRPCとZodの概要

### 2-1. tRPCとは
tRPCは、TypeScriptを用いたエンドツーエンドの型安全なRPC通信を実現するライブラリです。サーバーサイドとクライアントサイドで型情報を共有できるため、型のミスマッチによるバグを防ぎやすくなります。

### 2-2. Zodとは
Zodは、JavaScriptやTypeScriptにおけるスキーマ定義とバリデーションを提供するライブラリです。Zodを使用することで、入力データの型チェックとバリデーションを容易に行うことができます。

## 3. tRPCとZodを組み合わせる理由
両者を組み合わせることで、サーバーとクライアントの型安全性を確保しつつ、バリデーションエラーを明確かつ安全に処理することができます。これにより、開発の効率化とメンテナンス性の向上が図れます。

## 4. tRPC × Zodによる型安全なバリデーションエラーの実装

### 4-1. 環境構築
まずは、tRPCとZodをインストールします。以下のコマンドを実行して、必要なパッケージを追加します。

```bash
npm install @trpc/server @trpc/client zod
```

### 4-2. Zodスキーマの定義
Zodを使って、入力データのスキーマを定義します。ここでは、ユーザー登録フォームを例にします。

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

const userSchema = z.object({
  username: z.string().min(3, 'ユーザー名は3文字以上である必要があります'),
  password: z.string().min(6, 'パスワードは6文字以上である必要があります'),
});
```

### 4-3. tRPCでのエラー処理
tRPCのルーターでZodスキーマを用いてバリデーションを行い、エラーを処理します。

```typescript
import { createRouter } from '@trpc/server';
import { TRPCError } from '@trpc/server';
import { z } from 'zod';

const userRouter = createRouter()
  .mutation('register', {
    input: userSchema,
    resolve: async ({ input }) => {
      try {
        // ユーザー登録処理
        return { success: true };
      } catch (error) {
        throw new TRPCError({
          code: 'BAD_REQUEST',
          message: 'ユーザー登録に失敗しました',
          cause: error,
        });
      }
    },
  });
```

### 4-4. クライアントサイドでのエラー表示
クライアントサイドでtRPCのクライアントライブラリを用いてエラーを取得し、表示します。

```typescript
import React from 'react';
import { createReactQueryHooks } from '@trpc/react';
import { AppRouter } from '../server';
import { useState } from 'react';

const trpc = createReactQueryHooks<AppRouter>();

function RegisterForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const mutation = trpc.useMutation('user.register');

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      await mutation.mutateAsync({ username, password });
      alert('登録成功');
    } catch (error) {
      if (error instanceof TRPCError) {
        alert(error.message);
      }
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="ユーザー名"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="パスワード"
      />
      <button type="submit">登録</button>
    </form>
  );
}
```

## 5. 型安全なバリデーションの利点
型安全なバリデーションをtRPCとZodで実現することにより、次の利点が得られます：
- **データの一貫性**：クライアントとサーバー間で同じ型情報が共有されるため、一貫性のあるデータ処理が可能です。
- **バグの削減**：型チェックが自動化されることで、手動での型確認ミスを減らします。
- **開発の効率化**：エラーハンドリングが統一されることで、コードの可読性が向上し、開発効率が上がります。

## 6. まとめ
tRPCとZodを組み合わせて型安全なバリデーションを実装することで、強力な型チェックとバリデーションを両立しつつ、保守性の高いコードを実現できます。本記事を参考に、ぜひ自身のプロジェクトに導入してみてください。 

tRPC × Zodの型安全なバリデーションエラー表示の実装

目次

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