### 目次

1. はじめに
2. tRPCとZodの概要
   - 2-1 tRPCとは
   - 2-2 Zodとは
3. 配列のバリデーション
   - 3-1 基本的な配列バリデーション
   - 3-2 複雑な条件を持つ配列
4. ネスト構造のバリデーション
   - 4-1 ネストされたオブジェクトのバリデーション
   - 4-2 ネストされた配列とオブジェクトのバリデーション
5. tRPCとZodの統合
   - 5-1 tRPCのセットアップ
   - 5-2 Zodを用いたtRPCのルート定義
6. まとめ

---

### 1. はじめに

JavaScriptやTypeScriptでバックエンドやAPIを構築する際、エンドポイントの入力や出力を適切にバリデーションすることは非常に重要です。このために、tRPCとZodという強力なツールを使用することで、型安全で信頼性の高いコードを書くことができます。本記事では、これらのツールを使って配列やネスト構造をバリデーションする方法について詳しく解説します。

---

### 2. tRPCとZodの概要

#### 2-1 tRPCとは

tRPCは、TypeScriptでエンドツーエンドの型安全性を実現するNode.jsのライブラリです。RESTやGraphQLを使用せずにサーバーとクライアント間での通信を可能にします。型定義を共有することで、開発の生産性と安全性を向上させます。

#### 2-2 Zodとは

Zodは、TypeScript向けのスキーマ宣言やバリデーションのためのライブラリです。他のバリデーションライブラリと比較して、型推論が優れており、TypeScriptユーザーにとって使いやすい設計になっています。

---

### 3. 配列のバリデーション

#### 3-1 基本的な配列バリデーション

Zodを使って、単純なデータ型を持つ配列をバリデートするのは非常に簡単です。

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

#### 3-2 複雑な条件を持つ配列

配列の各要素が特定の条件を満たす場合、カスタムバリデーションを施すことができます。

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

---

### 4. ネスト構造のバリデーション

#### 4-1 ネストされたオブジェクトのバリデーション

Zodは、ネストされたオブジェクトや配列のバリデーションも得意です。

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

#### 4-2 ネストされた配列とオブジェクトのバリデーション

ネスト構造で配列を扱うには、以下のようにします。

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

---

### 5. tRPCとZodの統合

#### 5-1 tRPCのセットアップ

tRPCは、バックエンドとフロントエンドをスムーズに接続するための設定が比較的簡単です。

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

#### 5-2 Zodを用いたtRPCのルート定義

Zodでバリデーションを行いながら、tRPCのルートを定義します。

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

tRPCのルートでZodを利用することで、エンドポイントの型安全性とバリデーションを同時に達成できます。

---

### 6. まとめ

tRPCとZodを組み合わせることで、非常に型安全で信頼性の高いAPIを構築することが可能です。複雑な配列やネスト構造を正確にバリデートできるため、API開発がスムーズに行えます。これにより、クライアントとサーバー間のデータや型に関する不整合を未然に防ぐことができ、開発の効率化を図ることができます。 [cv:issue_marketplace_engineer]

### 目次

1. はじめに
2. tRPCとZodの概要
   - 2-1 tRPCとは
   - 2-2 Zodとは
3. 配列のバリデーション
   - 3-1 基本的な配列バリデーション
   - 3-2 複雑な条件を持つ配列
4. ネスト構造のバリデーション
   - 4-1 ネストされたオブジェクトのバリデーション
   - 4-2 ネストされた配列とオブジェクトのバリデーション
5. tRPCとZodの統合
   - 5-1 tRPCのセットアップ
   - 5-2 Zodを用いたtRPCのルート定義
6. まとめ

---

### 1. はじめに

JavaScriptやTypeScriptでバックエンドやAPIを構築する際、エンドポイントの入力や出力を適切にバリデーションすることは非常に重要です。このために、tRPCとZodという強力なツールを使用することで、型安全で信頼性の高いコードを書くことができます。本記事では、これらのツールを使って配列やネスト構造をバリデーションする方法について詳しく解説します。

---

### 2. tRPCとZodの概要

#### 2-1 tRPCとは

tRPCは、TypeScriptでエンドツーエンドの型安全性を実現するNode.jsのライブラリです。RESTやGraphQLを使用せずにサーバーとクライアント間での通信を可能にします。型定義を共有することで、開発の生産性と安全性を向上させます。

#### 2-2 Zodとは

Zodは、TypeScript向けのスキーマ宣言やバリデーションのためのライブラリです。他のバリデーションライブラリと比較して、型推論が優れており、TypeScriptユーザーにとって使いやすい設計になっています。

---

### 3. 配列のバリデーション

#### 3-1 基本的な配列バリデーション

Zodを使って、単純なデータ型を持つ配列をバリデートするのは非常に簡単です。

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

const numberArraySchema = z.array(z.number());
const result = numberArraySchema.safeParse([1, 2, 3]); // 正しい入力

if (!result.success) {
  console.log('バリデーションエラー:', result.error);
}
```

#### 3-2 複雑な条件を持つ配列

配列の各要素が特定の条件を満たす場合、カスタムバリデーションを施すことができます。

```typescript
const positiveNumbersSchema = z.array(z.number().positive());
const complexArray = positiveNumbersSchema.safeParse([3, -1, 2]);

if (!complexArray.success) {
  console.log('バリデーションエラー:', complexArray.error);
}
```

---

### 4. ネスト構造のバリデーション

#### 4-1 ネストされたオブジェクトのバリデーション

Zodは、ネストされたオブジェクトや配列のバリデーションも得意です。

```typescript
const userSchema = z.object({
  name: z.string(),
  age: z.number().int(),
  preferences: z.object({
    notifications: z.boolean(),
    theme: z.string(),
  }),
});

const user = userSchema.safeParse({
  name: "John Doe",
  age: 30,
  preferences: {
    notifications: true,
    theme: "light",
  }
});

if (!user.success) {
  console.log('バリデーションエラー:', user.error);
}
```

#### 4-2 ネストされた配列とオブジェクトのバリデーション

ネスト構造で配列を扱うには、以下のようにします。

```typescript
const productListSchema = z.array(
  z.object({
    id: z.string(),
    name: z.string(),
    price: z.number().positive(),
    tags: z.array(z.string())
  })
);

const products = productListSchema.safeParse([
  { id: "1", name: "Product 1", price: 100, tags: ["new", "sale"] },
  { id: "2", name: "Product 2", price: -50, tags: ["discount"] } // Invalid input
]);

if (!products.success) {
  console.log('バリデーションエラー:', products.error);
}
```

---

### 5. tRPCとZodの統合

#### 5-1 tRPCのセットアップ

tRPCは、バックエンドとフロントエンドをスムーズに接続するための設定が比較的簡単です。

```typescript
import { createTRPCServer } from '@trpc/server';

const appRouter = createTRPCServer<ApplicationContext>({
  // Routerの設定
});

// tRPC実行の例
// app.listen(4000);
```

#### 5-2 Zodを用いたtRPCのルート定義

Zodでバリデーションを行いながら、tRPCのルートを定義します。

```typescript
const router = createTRPCRouter({
  getUser: publicProcedure
    .input(z.object({ id: z.string() }))
    .query(async ({ input }) => {
      const user = await getUserById(input.id);
      return user;
    }),
});
```

tRPCのルートでZodを利用することで、エンドポイントの型安全性とバリデーションを同時に達成できます。

---

### 6. まとめ

tRPCとZodを組み合わせることで、非常に型安全で信頼性の高いAPIを構築することが可能です。複雑な配列やネスト構造を正確にバリデートできるため、API開発がスムーズに行えます。これにより、クライアントとサーバー間のデータや型に関する不整合を未然に防ぐことができ、開発の効率化を図ることができます。 

目次

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