Zenn
🕶️

zodで効率的なデータバリデーションと抽出

に公開
TypeScript
zod
tech

はじめに

この記事では、TypeScriptの型検証ライブラリである「zod」を用いて、データのバリデーションを行い、必要なデータのみを抽出する方法について解説します。今回はプロジェクトで実際に活用した経験をもとに、具体的な実装手順をご紹介します。

zodとは

zodは、データの型や構造を検証（バリデーション）するためのTypeScript向けライブラリです。特にAPIからのレスポンスや外部から提供されたデータが、期待通りの構造かを確認したいときに非常に便利です。zodの特徴は、型の定義と検証を同時に行える点にあり、これによりコードの安全性や信頼性を大幅に向上させることができます。

実装方法

スキーマの作成

まず、DBから取得したデータが想定通りの構造かを確認するため、zodを使ってスキーマ（データの構造や型）を定義します。

import { z } from 'zod';

export const articleSchema = z.object({
  id: z.string(),
  title: z.string()
})

// 型推論を活用するための型定義
export type ArticleType = z.infer<typeof articleSchema>;

ここでは、idとtitleが文字列であることを定義しています。記事のコンテンツ（content）や作成日（created_at）などのデータは画面の表示に不要なため、スキーマに含めていません。また、z.inferを使用することで、スキーマから自動的に型を生成できます。

データの取得

次に、DBからデータを取得する関数を実行します。

const res = await getArticles();
console.log("res.articles", res.articles);

この関数は、記事データのリストを返します。例えば、以下のような形でデータが返ってきます。

res.articles [
  {
    id: '1',
    title: 'おはよう',
    content: 'こんにちは',
    created_at: '2024-08-22T23:35:07.079Z',
    updated_at: '2024-08-22T23:35:07.079Z'
  },
  {
    id: '2',
    title: 'こんにちは',
    content: 'つかれた',
    created_at: '2024-08-23T08:30:38.926Z',
    updated_at: '2024-08-23T08:30:38.926Z'
  }
]

zodでデータを検証して必要な部分のみを抽出

取得したデータには、contentやcreated_atなど、表示に不要な情報が含まれています。これらを除外し、必要なデータ（idとtitle）だけを抽出するために、zodのsafeParseメソッドを使用します。

const parsedArticles = res.articles
  .map((article: Article) => {
    const result = articleSchema.safeParse(article);
    
    if (result.success) {
      return result.data; // id と title のみを含むオブジェクト
    } else {
      console.error('Validation error:', result.error.format());
      return null; // エラーハンドリング
    }
  })
  .filter(Boolean);
  
console.log('parsedArticles', parsedArticles);

このコードでは以下のことを行っています。

  1. res.articlesの各要素をmapでループ処理
  2. 各記事データをarticleSchema.safeParse()で検証
  3. 検証成功時はresult.data（idとtitleのみを含む）を返す

safeParse メソッドは、データ検証が失敗しても例外をスローせず、成功時は検証済みデータを、失敗時はエラー情報を含むオブジェクトを返します。これによって、簡潔かつ安全にエラーハンドリングができます。

If you don't want Zod to throw errors when validation fails, use .safeParse. This method returns an object containing either the successfully parsed data or a ZodError instance containing detailed information about the validation problems.

https://zod.dev/?id=safeparse

結果の出力

最終的に、検証に成功したデータのみがparsedArticlesとして保存されます。

console.log('parsedArticles', parsedArticles);

出力結果は以下のようになります。

parsedArticles [
  { id: '1', title: 'おはよう' },
  { id: '2', title: 'こんにちは' }
]

これにより、必要なデータのみが抽出され、型安全性も確保されています。

おわりに

zodを使うことで、APIからのレスポンスデータを効率的に検証し、必要なデータのみを抽出できます。型安全性が向上し、コードの保守性も高まるため、特に動的なデータを扱うプロジェクトでは大きな価値を発揮します。初めての方でもシンプルな構文で実装できるので、ぜひ試してみてください。

Discussion