はじめに

この記事では、zodという型検証ライブラリを使って、データのバリデーションを行います。今回は私がプロジェクトで必要なデータのみを抽出する方法について、理解できたので紹介します。

zodとは

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

実装

スキーマを作成

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

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

ここでは、idとtitle が文字列であることを定義しています。記事のコンテンツ（content）や作成日（created_at）などのデータは今回表示には不要なため、スキーマには含めません。

データの取得

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

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

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

res.article [
  {
    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 メソッドを使います。

safeParse は、データを検証し、期待通りのデータであればそのデータを返します。そうでなければ、エラーメッセージを出力します。

const parsedArticles = res.articles
    .map((article: Article) => {
      const result = articleSchema.safeParse(article);
      
      if (result.success) {
        return result.data; // id と title のみ
      } else {
        console.error(result.error);
        return null; // エラーハンドリング
      }
    })
    .filter(Boolean); // nullを除外
  
  console.log('parsedArticles', parsedArticles);

このコードでは、res.articles に含まれる各記事データを articleSchema で検証し、idとtitleだけを抽出しています。エラーが発生した場合には、console.error でエラーメッセージを出力し、その記事を除外します。

結果の出力

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

console.log('parsedArticles', parsedArticles);

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

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

おわりに

zodを使うことで、APIからのレスポンスデータの型や構造を厳密に検証し、必要なデータだけを安全に取り出すことができます。特に、型が動的な外部データを扱う際には、データの整合性を保ちながらコードの安全性を高めることができます。

初めてzodを使う方でも、簡単にデータのバリデーションが行えるので、ぜひプロジェクトに取り入れてみてください。