Programming PR

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

【Typescript】Zodを使って超簡単にバリデーションする方法
記事内に商品プロモーションを含む場合があります

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

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

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

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

Zodの基本的な使い方

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


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の基本的な型に対しても簡単にバリデーションを設定することが可能です。
ここでは、stringnumberbooleannullundefinedanyunknownの各型について、どのようにスキーマを定義しバリデーションを行うかを説明します。

文字列型(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を使用することで、より複雑なデータ構造も簡単にバリデーション可能です。
ここでは、arrayobjectunionenumtupleの各型について、どのようにスキーマを定義しバリデーションを行うかを説明します。

配列型(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を使用することで、標準的な型チェックの他に、カスタムバリデーションも簡単に追加できます。
ここでは、literalinstanceofという二つのカスタム型でどのようにバリデーションを行うかを見ていきましょう。

リテラル型(literal)

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


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

インスタンス型(instanceof)

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


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

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

株式会社 ONE WEDGEでは、新たな仲間を募集しています!

私たちと一緒に、革新的で充実したキャリアを築きませんか?
当社は、従業員が仕事と私生活のバランスを大切にできるよう、充実した福利厚生を整えています。

  • 完全週休2日制(土日休み)で、祝日や夏季休暇、年末年始休暇もしっかり保証!
  • 様々な休暇制度(有給、慶弔、産前・産後、育児、バースデー休暇)を完備!
  • 従業員の成長と健康を支援するための表彰制度、資格取得支援、健康促進手当など!
  • 生活を支えるテレワーク手当、記事寄稿手当、結婚祝金・出産祝金など、様々な手当を提供!
  • 自己啓発としての書籍購入制度や、メンバー間のコミュニケーションを深める交流費補助!
  • 成果に応じた決算賞与や、リファラル採用手当、AI手当など、頑張りをしっかり評価!
  • ワークライフバランスを重視し、副業もOK!

株式会社 ONE WEDGEでは、一人ひとりの従業員が自己実現できる環境を大切にしています。
共に成長し、刺激を与え合える仲間をお待ちしております。
あなたの能力と熱意を、ぜひ当社で発揮してください。
ご応募お待ちしております!

ホームページ、採用情報は下記ボタンからご確認ください!

応募、ご質問など、LINEでお気軽にご相談ください♪

まとめ

この記事では、Zodライブラリを使ってTypeScriptでデータバリデーションを実装する方法を詳しく見てきました。
Zodを使用することで、開発者はデータの整合性を簡単かつ効率的に保証することができます。

Zodの基本的な使い方から始めて、様々なデータ型のバリデーション方法、複合型や日付型の扱い、さらにはカスタムバリデーションまで、幅広い機能を紹介しました。
これにより、形式的なエラーを減らし、アプリケーションの堅牢性を向上させることが可能となります。

また、ZodはTypeScriptの型システムをフルに活用しており、コードの安全性をコンパイル時に強化することもポイントです。
このツールを用いることで、開発プロセスがスムーズになり、保守や拡張がしやすいアプリケーションの構築を支援します。

これからTypeScriptでのプロジェクトにおいてデータバリデーションが必要な場合、Zodを選択することで、より安全で効率的な開発が行えるでしょう。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です