【Typescript】Zodを使って超簡単にバリデーションする方法

こんにちは！
今日は、TypeScriptを使った開発において、データのバリデーションを効率的かつ正確に行うための強力なライブラリ「Zod」について学んでいきましょう。

TypeScriptでのアプリケーション開発では、さまざまなデータがフロントエンドからバックエンドへ流れます。
これらのデータが正しい形式であることを保証することは、アプリケーションの安全性と信頼性を維持する上で非常に重要です。

そこで登場するのが、Zodです。
Zodを使用すると、型安全な方法でデータ構造をバリデーションし、開発の生産性を向上させることができます。

この記事では、Zodの基本的な使い方から、さまざまなスキーマの定義方法、実践的なサンプルコードに至るまでを詳しく解説していきます。
それでは、Zodの魅力に触れながら、より安全で堅牢なアプリケーションを構築する方法を一緒に学んでいきましょう。

Zodの基本的な使い方

Zodを利用するには、まずプロジェクトにこのライブラリをインストールする必要があります。
npmやyarnを使って、以下のように簡単にインストール可能です。


npm install zod
// または
yarn add zod

インストール後、データのスキーマをZodを使って定義しましょう。
例えば、ユーザー登録フォームのバリデーションのために、ユーザー名とパスワードのスキーマを設定することができます。


import { z } from 'zod';

const UserSchema = z.object({
	username: z.string().min(1, 'ユーザー名は必須です').max(20, 'ユーザー名は20文字以内でお願いします'),
	password: z.string().min(10, 'パスワードは10文字以上で入力してください')
});

このスキーマを使用して、実際にフォームから送信されたデータが条件を満たしているかを検証できます。
次に示すのは、送信されたデータを検証する方法です。


const result = UserSchema.safeParse({
	username: "exampleUser",
	password: "password1234"
});

if (!result.success) {
	console.log("バリデーションエラーがあります:", result.error);
} else {
	console.log('バリデーション成功です！', result.data);
}

safeParseメソッドは、データがスキーマに合わない場合はエラー情報を提供し、合致する場合はバリデーションが成功したデータを返します。
この方法により、エラーハンドリングが格段に容易になります。

さらに、Zodは様々なデータ型やカスタムバリデーションルールをサポートしており、開発の柔軟性を大いに高めてくれるでしょう。

スキーマの種類

Zodライブラリを使用する際、さまざまな種類のスキーマを定義することができます。
これにより、様々なデータ形式や複雑さに対応する柔軟なバリデーションが可能となります。
ここでは、その基本的なスキーマの種類について解説します。

基本的な型

Zodを使用すると、TypeScriptの基本的な型に対しても簡単にバリデーションを設定することが可能です。
ここでは、string、number、boolean、null、undefined、any、unknownの各型について、どのようにスキーマを定義しバリデーションを行うかを説明します。

文字列型（string）

文字列のバリデーションは非常によく使用されます。
次の例では、文字列が空でないことを確認します。


const stringSchema = z.string().nonempty();
const resultString = stringSchema.safeParse("");

数値型（number）

数値のバリデーションでは、例えば数値が特定の範囲内にあることをチェックできます。


const numberSchema = z.number().min(10).max(100);
const resultNumber = numberSchema.safeParse(50);

ブール型（boolean）

ブール値は、trueまたはfalseのみを受け入れるシンプルなバリデーションです。


const booleanSchema = z.boolean();
const resultBoolean = booleanSchema.safeParse(true);

null型

null型は、値がnullのみを許可します。


const nullSchema = z.null();
const resultNull = nullSchema.safeParse(null);

undefined型

undefined型は、値がundefinedのみを許可します。


const undefinedSchema = z.undefined();
const resultUndefined = undefinedSchema.safeParse(undefined);

any型、unknown型

any型とunknown型は、どのような型の値も受け入れますが、Zodに用意されています。


const anySchema = z.any();
const resultAny = anySchema.safeParse("任意の値");


const unknownSchema = z.unknown();
const resultUnknown = unknownSchema.safeParse({ key: "value" });

これらの基本的な型を使用して、さまざまなデータ構造のバリデーションを簡単に実装することができます。
それぞれのスキーマを組み合わせることで、複雑なデータ検証も柔軟に行うことが可能です。

複合型

Zodを使用することで、より複雑なデータ構造も簡単にバリデーション可能です。
ここでは、array、object、union、enum、tupleの各型について、どのようにスキーマを定義しバリデーションを行うかを説明します。

配列型（array）

配列のバリデーションでは、配列の要素が特定の型を持つことの確認が可能です。
次の例では、文字列の配列を検証します。


const arraySchema = z.array(z.string());
const resultArray = arraySchema.safeParse(["apple", "banana", "cherry"]);

オブジェクト型（object）

オブジェクトのバリデーションでは、各プロパティの型を定義しましょう。
以下の例では、ユーザーのプロファイルに対するスキーマを作成します。


const objectSchema = z.object({
	name: z.string(),
	age: z.number(),
	isActive: z.boolean()
});
const resultObject = objectSchema.safeParse({
	name: "John Doe",
	age: 30,
	isActive: true
});

統合型（union）

統合型は、複数の型のいずれか一つを満たす値を受け入れるために使用します。
例として、文字列または数値を許可するスキーマを定義します。


const unionSchema = z.union([z.string(), z.number()]);
const resultUnion = unionSchema.safeParse("Hello");

列挙型（enum）

列挙型を使用すると、特定の文字列のセットからのみ値を受け入れることが可能です。
以下の例では、特定のフルーツのみを許可します。


const enumSchema = z.enum(["Apple", "Banana", "Cherry"]);
const resultEnum = enumSchema.safeParse("Apple");

タプル型（tuple）

タプル型を使用すると、特定の位置に特定の型が必要な配列を定義できます。
以下の例では、最初の要素が文字列で、次が数値の配列を検証します。


const tupleSchema = z.tuple([z.string(), z.number()]);
const resultTuple = tupleSchema.safeParse(["Hello", 123]);

これらのスキーマを使って、Zodで複合型のデータを簡単にバリデーションする方法を紹介しました。
これにより、データの整合性を保ちつつ、アプリケーションの信頼性を向上させることができます。

日付と時刻

日付型のバリデーションは、アプリケーションで日付や時刻データを扱う際に非常に重要です。
Zodでは、日付オブジェクトを簡単に検証できるスキーマを提供しています。

日付型（date）

日付のバリデーションでは、有効な日付オブジェクトであることを確認します。
次の例では、JavaScriptのDateオブジェクトを使用して日付のバリデーションを行います。


const dateSchema = z.date();
const resultDate = dateSchema.safeParse(new Date());

このスキーマは、有効な日付オブジェクトが渡された場合に成功し、無効なデータ（例えば文字列や数値など）が渡された場合には失敗します。
また、日付の範囲を指定するバリデーションを追加することも可能です。

日付の最小値と最大値

特定の日付範囲内であることを保証するために、最小値と最大値を設定することができます。


const minDate = new Date("2023-01-01");
const maxDate = new Date("2023-12-31");
const dateRangeSchema = z.date().min(minDate).max(maxDate);
const resultDateRange = dateRangeSchema.safeParse(new Date("2023-05-01"));

過去または未来の日付

特定の日付が過去または未来であることを確認するバリデーションも可能です。
例えば、過去の日付のみを許可するスキーマを以下に示します。


const pastDateSchema = z.date().max(new Date());
const resultPastDate = pastDateSchema.safeParse(new Date("2020-01-01"));

未来の日付のみを許可するには、.min(new Date())を使用します。

日付と時刻のバリデーションを適切に行うことで、アプリケーションでのスケジューリングや記録など、重要な機能の正確性を保証することが可能です。

カスタムバリデーション

Zodを使用することで、標準的な型チェックの他に、カスタムバリデーションも簡単に追加できます。
ここでは、literalとinstanceofという二つのカスタム型でどのようにバリデーションを行うかを見ていきましょう。

リテラル型（literal）

リテラル型は、特定の値のみを許可する強力なバリデーションです。
許可された具体的な値を指定する場合に非常に便利。
以下の例では、特定の文字列「特定の値」のみを受け入れるスキーマを定義しています。


const literalSchema = z.literal("特定の値");
const resultLiteral = literalSchema.safeParse("特定の値");

インスタンス型（instanceof）

instanceofを使用すると、オブジェクトが特定のクラスのインスタンスであるかどうかをチェックすることが可能です。
このタイプのバリデーションは、特定のクラスのオブジェクトを受け入れる際に役立ちます。
次の例では、Dateオブジェクトのインスタンスを検証してみましょう。


const instanceofSchema = z.instanceof(Date);
const resultInstanceof = instanceofSchema.safeParse(new Date());

【付録】さらに学びを深めるためのリソース

intersection型について理解を深めたところで、さらに学習を進めたい方のために、いくつかのリソースを紹介します。
これらのリソースを活用することで、TypeScriptの型システムについてより深い知識を得ることができるでしょう。

オンラインで参照できる公式ドキュメント

TypeScript公式ハンドブック

https://www.typescriptlang.org/docs/
TypeScriptの公式ドキュメントです。
intersection型を含む、すべての型システムの機能について詳細な説明があります。

TypeScript Deep Dive

https://basarat.gitbook.io/typescript/
TypeScriptの深い部分まで掘り下げて解説しているオンラインブックです。
無料で読むことができ、intersection型についても詳しく説明されています。

TypeScriptの学習は終わりがありません。
新しい機能が常に追加され、より良い書き方が発見されています。
継続的に学習を続けることで、より良いTypeScriptプログラマーになれるはずです。

キャリア形成/給与還元
ひとつひとつ真摯に向き合う企業