12k
All articles

TypeScriptでZodを使用したデータ検証の方法(例付き)

ZodスキーマによるTypeScriptデータのランタイム検証を、基本的なセットアップからunion・ネストオブジェクト・APIレスポンス検証などの応用技術まで解説する。

OpenReplay Team
OpenReplay Team
TypeScriptでZodを使用したデータ検証の方法(例付き)

実行時にデータを検証することは、TypeScript開発者にとって一般的な課題です。TypeScriptはコンパイル時にエラーを検出しますが、コードが実行されている間の型安全性は保証しません。つまり、APIレスポンスやユーザー入力などの外部データが、予期しない実行時エラーを引き起こす可能性があります。ZodはTypeScript優先のスキーマ検証ライブラリで、実行時に定義されたスキーマに対してデータを検証することでこの問題を解決します。

この記事では、基本的な使用法から高度な検証テクニック、他のライブラリとの比較、アプリケーションへの統合のベストプラクティスまで、Zodを効果的に使用する方法を学びます。

重要なポイント

  • Zodはスキーマ定義を使用して実行時データを効率的に検証します。
  • 自動型推論により手動での型の重複が減少します。
  • APIレスポンス、フォーム検証、環境変数に最適です。
  • 明確なエラー処理と詳細なフィードバックを提供します。

TypeScript検証にZodを使用する理由

従来の検証方法では、手動チェックによる広範なボイラープレートコードが必要です。TypeScriptの型は実行時に消えるため、潜在的な実行時の問題が未チェックのままになります。Zodはこれらの問題を以下のように解決します:

  • 宣言的なスキーマ定義の提供
  • 自動実行時検証の提供
  • スキーマから直接TypeScriptの型を推論

Zodは大幅にボイラープレートを削減し、アプリケーション全体でデータが一貫して検証されることを保証します。

Zodの使い方入門

npmを介してZodをインストールします:

npm install zod

簡単な例を示します:

import { z } from 'zod';

const nameSchema = z.string();

nameSchema.parse('Alice'); // 'Alice'を返す
nameSchema.parse(42); // ZodErrorをスロー

同様に、数値、ブール値を検証したり、最小または最大の長さや値などの制約を適用したりすることができます。

高度なZod検証テクニック

複雑な構造の検証

Zodはネストされたオブジェクトと配列を簡単に検証できます:

const userSchema = z.object({
  name: z.string(),
  age: z.number().min(0),
  email: z.string().email().optional()
});

オプションおよびNull許容値

オプションフィールドには.optional()を使用し、明示的にnull値を受け入れるフィールドには.nullable()を使用します。

カスタムエラーメッセージ

カスタムエラーメッセージを指定して明確さを高めます:

z.string().min(5, "名前が短すぎます");

共用体と交差型

複雑なシナリオのためにスキーマを組み合わせます:

const schema = z.union([z.string(), z.number()]);

Zodとその他の検証ライブラリの比較

ZodはYupやJoiなどのライブラリと比較して、組み込みのTypeScript推論を独自に提供し、TypeScript中心のワークフローに最適です。YupやJoiとは異なり、Zodはスキーマと型定義の間の重複を減らします。

実際のアプリケーションでのZodの使用

APIレスポンス検証

信頼性の高い受信データの検証:

const responseSchema = z.object({ data: z.array(z.string()) });
const result = responseSchema.safeParse(apiResponse);

Reactフォーム検証

React Hook FormなどのライブラリとZodを使用して、シームレスなフォーム処理と検証を行います。

環境変数チェック

アプリケーション構成を保護します:

const envSchema = z.object({ API_URL: z.string().url(), PORT: z.number() });
envSchema.parse(process.env);

一般的な間違いとベストプラクティス

  • スキーマを過度に複雑化しない:スキーマをモジュール化して再利用可能にします。
  • .safeParse.parseを賢く選択する:例外を好む場合は.parseを、エラーを明示的に処理する場合は.safeParseを使用します。
  • 検証エラーを適切に処理する:Zodが提供する詳細なエラーメッセージを常に活用します。

結論

ZodはTypeScriptのコンパイル時と実行時の検証ギャップを埋め、データの正確性と信頼性を確保します。Zodを使用すると、検証ロジックが簡潔で管理しやすくなり、TypeScriptの型システムと直接統合され、アプリケーションの堅牢性が大幅に向上します。

よくある質問

ZodをExpressで使用できますか?

はい、Zodはリクエストボディ、クエリパラメータ、ルートを検証するためにExpressとスムーズに統合できます。

ZodはYupより優れていますか?

Zodは自動型推論とボイラープレートの削減により、TypeScriptプロジェクトで一般的に好まれます。

Zodは非同期検証をどのように処理しますか?

Zodは非同期検証を簡単に処理するための`.parseAsync()`および`.safeParseAsync()`メソッドを提供しています。

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.
Loved by thousands of developers

We use cookies to improve your experience. By using our site, you accept cookies.