こんにちは。
野中やすおです。
今回の記事では、今日のTypeScript開発にはもはや必須となってきた？Zodについて解説しています。私が今いる現場のフロント開発においてもZodが使われています。
Zodとは何か？
Zodは公式サイトで以下のように述べられています。
Zod is a TypeScript-first schema declaration and validation library.
Zodは、TypeScript用のバリデーションおよびパーシングライブラリであり、オブジェクトを検証し、安全にパースするための方法を提供しています。
そして特にZodライブラリは、次のような特徴を持っています。
- 型安全の確保：Zodスキーマは、入力オブジェクトをバリデートするだけでなく、その形状に対応するTypeScriptの型を導出します。これにより、TypeScriptの全ての型安全性の利点を確保します。
- 柔軟性：Zodは細かい制御を可能にし、カスタムのバリデーションロジックを簡単に追加できます。
- エラーハンドリング：Zodは失敗したバリデーションに対して詳細なエラーメッセージを提供します。
Zodのインストール方法
Zodはインストール方法として、以下のそれぞれのパッケージに対応しています。
|
1 2 3 4 |
npm install zod # npm yarn add zod # yarn bun add zod # bun pnpm add zod # pnpm |
Zodの使い方
Zodは例えば「user.ts」ファイルのように作成して、以下のように作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { z } from 'zod'; /** * ユーザー */ export const UserSchema = z.object({ name: z.string(), email: z.string().email(), age: z.number().min(0), }); export type User = z.infer<typeof UserSchema>; |
まずは、import { z } from ‘zod’;で、 zをimportします。
慣例的に変数にSchemaを付加するようです。
上記の例では、UserSchemaを通過するオブジェクトは必ず特定の形状にする、つまり、nameはstring、emailは有効なメールアドレスでstring、ageは0以上のnumber）を持つことが保証されています。
またexportすることで以下のようなuserの状態を定義するuseUserStoreというstoreでのインターフェースで型定義をすることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { User } from '~/user' interface UserStore { /** ユーザー */ user: User } export const useUserStore = defineStore<'user', UserStore>('user', () => { /** * ユーザーの状態を管理するstoreを定義。 */ ... ... return { user } }) |
以上、Zodなんぞやについて記事を書きました。TypeScriptを使うアプリでは、これからますますvalidatorとしてZodを採用するケースが増えていくと思います。よりよりTSライフのために積極的に活用していきましょう！
