React Hook Form で Zod を使う時の 5 つパターン
React Hook Form で Zod を使う時の 5 つパターン 2023.02.11 React Hook Form で Zod を使用する時によくあるバリデーションのパターンを 5 つ紹介します 非同期バリデーション email の重複チェックを行う場合には API に問い合わせる必要があるので、非同期でバリデーションをすることになるかと思います。 refine() メソッドはカスタムバリデーションロジックを提供するためのメソッドです。refine メソッドの第 1 引数には boolean を返すバリデーター関数を受け取ります、このバリデーター関数は Promise を返すことができるため、手軽に非同期のバリデーションを実施できます。 import { z } from "zod"; import { isUniqueEmail } from "./api"; export c
tRPCを導入したら爆速でWebサービスをリリースできた話
この記事は 「個人開発Advent Calendar 2022」 8日目の記事です。 はじめに 先日リリースされた、SplarateというWebサービスの開発をお手伝いしています。そこで導入したtRPCが驚くほど便利だったので、実際の体験を交えてその使いやすさを紹介します。 tRPCとは？ tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation. https://trpc.io/docs/ tRPCは、スキーマやコード生成なしで型安全なAPIを簡単に構築し、呼び出すことのできるライブラリです。 tRPC is for full-stack TypeScript developers. と謳われているように、TypeScriptに特化して作られており、Ty
Next.js API Routes に Zod を組み込む
バリデーションライブラリである Zod を、Next.js で活用する TIPS の紹介です。筆者が Zod を知り・使い始めたのは、React Hook Form のリゾルバーがきっかけです。ブラウザでバリデーションを行うので、不正な入力値検証を API リクエストが発生する前に実行できます。 この Zod はフロントだけではなく、サーバープロセスでも使用できます。例えば、tRPC・Zodiosなどに見られるように、サーバーへのリクエスト（入力値）を検証しつつ型推論も解決してくれるソリューションとして注目されています。 Next.js API Routes に Zod を組み込む Next.js には REST API の実装手段として、API Routes が提供されています。しかし、reqに含まれる入力値検証は自前で用意する必要があります。この入力値検証に Zod を使用されている方
OpenAPI + Zod で型安全な API クライアント出力
import { asApi, Zodios } from '@zodios/core' import { z } from 'zod' const vR1x0k5qaLk = z.object({ id: z.number(), name: z.string() }).partial() const v8JbFEq2fUl = z.object({ id: z.number().optional(), name: z.string(), category: vR1x0k5qaLk.optional(), photoUrls: z.array(z.string()), tags: z.array(vR1x0k5qaLk).optional(), status: z.enum(['available', 'pending', 'sold']).optional(), }) const vlh
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
