サービスの管理画面を継続的に改善するためのReact Hook FormとZod活用術 - Mirrativ Tech Blog
こんにちは！ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登録した情報や配信の履歴を管理する社内向けのシステムが存在しています。 特に管理システムのフロントエンドにおいては、その特性上入力フォームの実装がその大半を占めています。 日々の機能開発においては、そうした管理システムに実装された入力フォームの新規実装や機能拡張が行われています。 課題 一般的な入力フォームでは、画面の初期描画の際にすでに設定済みの値をフォームに適用する初期化処理や、入力された内容を検証して必要に応じてエラー表示するバリデーション処理が必要です。 ミラ
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
逆引き 型ファースト Zod
1-3. 作成したスキーマから型を取り出したい (infer / shape / element / keyof)
Total TypeScriptのZodチュートリアルでZodに入門した - dackdive's blog
はじめに Zod というバリデーションライブラリが非常に流行っているようなので、素振りした。 www.totaltypescript.com このチュートリアルはたしか Twitter で流れてきて知ったのだが 今見ると Zod の公式ドキュメントからも Resources として紹介されているので、そこそこ信頼していいコンテンツなのだと判断した。 チュートリアルについて チュートリアルと名がついているが、内容は全 10 問のエクササイズを解くという構成。 あらかじめ型チェックのエラーまたはランタイムのエラーが発生するサンプルコードが問題として用意されており、そのコードを修正しながら Zod の基本的な使い方を学ぶ。 チュートリアルには Zod の使い方の説明は特にないので、チュートリアルの問題を解くために Zod の公式ドキュメントを読んで必要な箇所を理解する、という感じ。 Rust で
どうも、 uzimaru です。 最近、react-hook-form と zod を使っていい感じにやっているのでそれについてまとめようと思います。 react-hook-form で zod を使う 公式から利用する方法が提供されています。 https://www.npmjs.com/package/@hookform/resolvers これを useForm の resolver で利用することで zod が使えるようになります。 zod 以外にも Yup, Superstruct, Joi, io-ts などが利用できます import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import * as z from "zod"; const
Zodスキーマでプロンプト生成を行い構造化データを自由自在に扱えて、LLMプロダクト開発が圧倒的に効率化した話 - Algomatic Tech Blog
最近はAIエンジニアを名乗ってるerukitiです。フロントエンドもバックエンドも、LLMを触るあれこれもやってるので、「AIエンジニア」くらいを名乗るとちょうどよさそうだなと思ってます。いずれLLM自体の開発なんかもやってるかもしれません。 LLMプロダクトを開発していると、構造化データを作りたいのに、Anthropic ClaudeのAPIにはJSONモードが無いことや、なんならJSONモードやfunction callingを使っても、データが正しい形式に従ってることは保証しがたい、みたいな自体に遭遇することがあります。 JSONが出力できたとしても、構造化データをうまく吐き出させるのは難しいものです。文字列を出力させたいけど、複数あるときは、配列なのか、それともカンマ区切りなのか？項目がオプショナルの場合はどうするか？項目が存在しない、空文字や 0 や undefined や nu
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
React Hook FormとZodを組み合わせて利用する｜食べログ フロントエンドエンジニアブログ
こんにちは。食べログ フロントエンドチームの原田です。 現在担当しているプロジェクトで、React Hook FormとZodを組み合わせて利用する機会があったので、今回はReact Hook Formの基本的な使い方からスキーマバリデーションをZodに任せる方法を紹介をしたいと思います。 React Hook FormとはReact Hook Form は「高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ」をテーマに掲げた入力フォームの管理に特化した React 向けのライブラリです。 なぜReact Hook Formを利用したか今回のプロジェクトでは複雑なフォームを組む必要があり、フォームの状態管理を任せられる点や、パフォーマンス面、ドキュメントや検索でヒットする情報の多さからReact Hook Formを利用することを決めました。 基本的な使い方まずはReac
fullstack TSなアプリケーションも増えてきた昨今、TSでvalidatorを実装する際に何を採用するかは一大トピックです。今回は、その中でも新しめなライブラリでありBlitzも採用しているZodについて見ていきます。 Zodとは Zodの特徴として、Schema firstなvalidationライブラリであるというのがあります。 validateするschema（単一のschemaからobject, arrayまで）を定義し、それをベースにparseするというものです。 公式にあるexampleを見てみましょう。 import { z } from "zod"; // creating a schema for strings const mySchema = z.string(); mySchema.parse("tuna"); // => "tuna" mySchema.p
こんにちは、バックエンドエンジニアの日下です。 CSV から JSON へ変換するスクリプトを、TypeScript で実装する機会がありました。 今回は、CSV のデータのバリデーションに Zod を使った話をします。 スクリプトの目的 システム間のデータ連携が目的です。 連携元のシステムから CSV 出力されたデータを、連携先のシステムで利用する JSON へ変換します。 また、JSON への変換以外にも以下の要件があります。 CSV のデータをバリデーションする 連携先のシステムで利用できるデータであることを保証するために、バリデーションを実行します。 バリデーション失敗時に、日本語のエラーメッセージを表示する スクリプトの実行は業務担当のエンドユーザーが行うため、日本語のエラーメッセージを表示します。 CSV の読み込み 元データとなる CSV の読み込みは、csv-parse を
Next.js の Zod 活用術
本年は Next.js + バリデーションライブラリの Zod をよく利用し、Zenn でもいくつかの関連記事を投稿しました。本稿では、この組み合わせならではの TIPS を紹介します。記事で紹介するサンプルは以下に置いています。 リクエスト検証に便利な Zod Next.js で getServerSideProps を使用すると、リクエスト検証をサーバーサイドで行えます。例えばセッションに保持している値の検証はバリデーションライブラリの Zod を使用して、次のようなコードで実現できます。 export const userSchema = z.object({ name: z.string(), email: z.string(), }); export const getServerSideProps = async (ctx) => { const sess = await ge
lizod: 1kb 未満の zod の精神的後継
作った。 lightweight-zod だから lizod。 npm install lizod -S で使える。 tl;dr 各種フロントエンドや Cloudflare Workers で zod のビルドサイズが邪魔になっている メソッドチェーンと便利なユーティリティを全部捨てた zod 風のバリデータを作った zod の 57kb に対して lizod は 1kb 以下 これが動く // Pick validators for treeshake import { $any, $array, $boolean, $const, $enum, $intersection, $null, $number, $object, $opt, $regexp, $string, $symbol, $undefined, $union, $void, type Infer, type Valid
GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
バリデーションライブラリである 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 を使用されている方
React Hook Form v7 + MUI v5 + zod v3を使ったコンポーネント実装例 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに TextField RadioGroup SelectForm CheckboxGroup DatePicker コンポーネント使用側実装例 おわりに 本記事を執筆するにあたって、 マナリンク Tech Blog運営さんのReact Hook Form(v7)を使ったコンポーネント設計案 piyokoさんのMUI v5 + React Hook Form v7 で、よく使うコンポーネント達を連携してみる という記事を参考にさせていただきました。いつも非常にわかりやすい記事をありがとうございます。 はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 React Hook Form v7 + MUI v5 + zod v3を使ったよく使うコンポーネントの実装例を調査しており、こちらの記事を参考に実装を進めてみました。しかしRadioGroupやDatePickerをatom
概要 TypeScriptでフロントエンド開発をしているとバックエンドのAPIを呼び出す際に、APIのパラメータ、レスポンスの型付けをしたくなります。 僕は最近この型付けにZodを使い、APIクライアントにはZodiosというライブラリを使っています。 github.com この記事では、Zodios でZodのスキーマ定義から型安全なAPIクライアントを作る方法を紹介します。 他のやり方 Types定義 純粋にパラメータとレスポンスの type を Type Alias で定義し、fetch やaxios などの素のAPIクライアントに型付けするやり方です。 APIのパスと、パラメータ、レスポンスの紐付けを人間が管理することになるため、ミスを防ぐことができません。 aspida この課題のためにaspidaがよく使われている印象があります。 github.com Open APIからas
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
I am pleased to announce, with support from Miško Hevery and Ryan Carniato, my new open source project Valibot. Valibot is a schema library for validating structural data, comparable to Zod, Ajv, Joi, and Yup. The big innovation of Valibot is the modular design of the API and an optimization of the source code for compression. This new approach enables unprecedented bundle size minimization throug
課題意識 特定の商品を数量を指定して購入できるECサービスのドメインモデルを表現とします。TypeScriptで構築する際に、「数量」を単にnumber型で扱うことは可能ですが、よりロバストな設計を目指す上で以下の2つの方法論があります。 Refinements(値の制約を表す): 「数量」は一般的に自然数です。1度の注文で指定できる上限を設けるビジネスルールがあると仮定します。この場合、number型に「自然数」「上限付き」の制約を加えた値として表現します。 Branded Types: (同じ構造の型を区別する): 「価格」などの他のnumber型と混同されないように、これらの数値を型レベルで区別したいです。JavaやC#に見られる公称型の概念をTypeScriptで模倣するBranded Typesのテクニックを用いることで、これらの誤った利用を型システムで防ぐことができます。 Br
zod-to-openapiで、既存のAPI実装にOpenAPIドキュメントを後付けする | Memory ice cubes
昔々あるところに、既存のWeb APIの実装がありました。 それなりに実装を進めた後に、天の声が言いました。「OpenAPIのドキュメントを公開したい」と。 さて、あなたならどうする？っていうニッチな問いに対する一つの答えとして。 ルーターごと乗り換える？ たとえば今回でいうと、元のAPIはCloudflare Workersにデプロイされてた。 ので、たとえばhonoとかitty-routerとか、OpenAPIのドキュメント生成ができるエコシステムが整ってるルーターに乗り換えてしまうという手がある。 https://github.com/honojs/middleware/tree/main/packages/zod-openapi hono好きなあなたに https://github.com/cloudflare/itty-router-openapi/ itty-router好きな
TypeScriptのゾッとする話 ~ Zodの紹介 ~
現在( 2021/09/13 )、この記事の情報は古くなっている可能性があります！ そのため、なるべくは公式ドキュメントを参照してください。 参照: 公式ドキュメント この記事について 先日、「 エンジニアとして一番怖いモノは何？ 」と知人に尋ねると、 「 実は、TypeScript が一番怖い 」 と言ってきました。 そんな訳ないだろうと思っていたのですが、どうやら知人は本気の様子。 「 TypeScript が嫌いならまだしも、TypeScript が怖いとは、これはナニかあるな 🤔 」 と思った私は、TypeScript First なライブラリである Zod を知人に紹介して、事の真意を確かめようとしたのでした。 怖いならもっと怖がらせてやろうと思ったのは内緒 🤫 しかし、知人に紹介するだけでは勿体ないので、今回は皆さんに知見を交えながら Zod の事を紹介していこうと思います
概要 OpenAI の Chat Completions API に Function Calling と呼ばれる新しい機能が追加されました。これを使うと、JSON Schema で指定した型に従う JSON 文字列を GPT が返してくれます。（ただし 100% valid な JSON が返る保証は無い） 特にライブラリに頼らずに Function Calling を利用しようとすると、 JSON Schema を書く OpenAI API にリクエスト 返ってきた JSON 文字列をパースして検証する というステップが必要になって面倒ですが、Zod のスキーマさえ書けば 1, 3 の手間を省きつつ型安全に実装することができます。 目指す姿 import { z } from "zod"; // 手動でコードを書くのは関数の名前、説明文、Zod スキーマの部分だけ const func
Migrating from Zod to Valibot: A Comparative Experience | Matthew Kwong
Friday, January 12, 2024 Migrating from Zod to Valibot: A Comparative Experience I've recently migrated the validation part of the contact form of my website (a.k.a. this website) from Zod to Valibot. And I would like to share with you the experience. What is Valibot? Valibot is commonly known as the "Zod alternative with a smaller bundle size". Similar to Zod, it is a schema validation library. I
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. You're an engineer. You're building something. The thing you're building probably has inputs - points at which data is injected. Let's say you're building a CLI called matt: matt run <something> Here, <something> is the input. It's the thing that tells the program what to do. It's t
Zodとの比較 公式サイトで、Valibot は、Zod と比較して、バンドルサイズが最大98%削減できると記述されています。今回作成した問い合わせフォームでも、92.2%の削減を確認できました。 VSCode 上で Zod で作成した Schema ファイルのサイズは gzipped 圧縮で12.8kです（Zod を利用した Schema はこちらを参照ください）。 ZodのSchema実装 import { z } from "zod"; const email: z.ZodString = z .string({ required_error: "入力が必須の項目です" }) .min(1, { message: "入力が必須の項目です" }) .max(255, { message: "255文字以内で入力してください" }) .email({ message: "メールアドレスの
Write your own Zod
8/29/2023 Write your own Zod Write your own Zod from scratch Table of Contents Introduction Primitive types Complex types: ZodArray<T> Complex types: ZodObject<T> Building schemas Validating schemas Next steps Footnotes Introductionλ Zod is a Typescript library where defining a schema gives you both runtime validation and type safety. As an exercise in type-level gymnastics, lets make our own Zod
graphql-codegen は validation 用の schema も自動で生成できる (yup と zod)
GraphQL Code Generator (a.k.a. graphql-codegen) のプラグインとして graphql-codegen-typescript-validation-schema (Star ください！) を利用すると yup や zod といったフロントエンド validation 用の schema も自動で生成できます。 例えばこのような GraphQL Schema を与えます。ここで記述している constraint directive は confuser/graphql-constraint-directive で提供されているものを想定してます。 input ExampleInput { email: String! @required(msg: "Hello, World!") @constraint(minLength: 50, format:
実務で使った React-Hook-Form × Zod の事例紹介 - バイセル Tech Blog
はじめに こちらはバイセルテクノロジーズ Advent Calendar 2022の 24 日目の記事です。 前日の記事は田中さんの「環境構築をコマンドでまとめてみた」の記事でした。 こんにちは！ テクノロジー戦略本部 開発二部の小林です。 自分が担当したプロジェクトでは、弊社で初めてバリデーションライブラリとして Zod を使用し、React-Hook-Form × Zod の構成でフォームを作成しました。 本記事では、実際にプロジェクトで実装した事例を紹介したいと思います。 React-Hook-Form × バリデーションライブラリの技術選定に迷っている方がいましたら、ご参考になれば幸いです。 はじめに 対象読者 React-Hook-Form とは Zod とは なぜ React-Hook-Form とバリデーションライブラリを組み合わせるのか バリデーションライブラ
この記事は呉高専 Advent Calendar 2022 16日目の記事になります。 こんにちは、呉高専在学中のWebフロントエンドエンジニアのkobakazu0429です。 本日の料理 「QRコードAPI、季節のHonoにZodを添えて、お皿にはCloudflare Workers」です。 HonoとCloudflare Workersとは？ Honoの作者のyusukebeさんが書かれている記事を読んでおけばOKです。 Zodとは？ TypeScript向けのスキーマ、バリデーションライブラリです。 こちらはyoshihiro nakamuraさんの記事を読んでおけばOKです。 レシピ メインのコードは次の通りです。 https://<qr-image>.worker.dev/api/v1/?text=test&type=pngのように書くことでQRコードを作成し、画像を返してくれま
いろんなJavaScriptの統計を見ると、今時のウェブフロントエンドの新規開発は80％はTypeScriptになっているということです。また、TypeScript自身を使わなくても、TypeScriptで培われた型推論のパワーで、JavaScriptであってもVSCode上で補完とか思いの外うまくいったりしちゃうので、TypeScriptフレンドリーというのはますます重要になっています。 ですが、TypeScriptが有効なのはコンパイル前とか実装中であり、実行時に流れてくるJSONが果たしてきちんとした型通りの定義なのかはTypeScriptの範疇外です。そこでZodとかのバリデーションを行ってくれるライブラリが使われます。Zodを使えばJSONが規定通りの構造をしているか確認した上で、TypeScriptの型を持った変数に安全に代入してくれます。 ですが、JSONというのはネットワー
zod ではなく ajv を使っている話
encraft #2 までの間、スキーマスキーマした話をたくさん書きたい。好き好きスキーマと言いたいところだが、zod に対しては人気に対して逆張り意見的なのを持っているのでそれを書いていきたい。 OGP は Ajv ユーザーと焼肉をしたときの画像だ。網もスキーマが大事ってことですね。 独自性の高いスキーマを使うのは危険だと思っている zod は便利だ。とても流行っている。その結果 yup や joi で作られたものが負債扱いされているような気までする。だが思い出してほしいのだが、yup だって出てきた当初はとても便利なものとして人気があった気がする。特に Formik と組み合わせるのは一種のパターンになっていたような気もする。しかし最近はそれらが zod に取って代わられてしまったと思っている。エコシステムの選択や対応を見ていると zod 一強だ。 (ちなみに npm trends で
具体例で学ぶZodの使い方
はじめに 基本的な使い方は公式ページがわかりやすいのでサラッと書いてます。 具体例は実際に Zod を使ってみて気になった部分を書きました。 基本的な使い方 import { z } from "zod"; // 文字列のスキーマを作成する const mySchema = z.string(); // スキーマから型を生成する type MySchema = z.infer<typeof mySchema> /* 生成される型の中身 type MySchema = string */ const input: MySchema = 100; // TypeError (型 'number' を型 'string' に割り当てることはできません！) const input: MySchema = "hello!"; // OK! z.infer<typeof T> とすることでスキーマから
GitHub - vantezzen/auto-form: 🌟 A React component that automatically creates a @shadcn/ui form based on a zod schema.
AutoForm is mostly meant as a drop-in form builder for your internal and low-priority forms with existing zod schemas. For example, if you already have zod schemas for your API and want to create a simple admin panel to edit user profiles, simply pass the schema to AutoForm and you're done. AutoForm uses @shadcn/ui components as natively as possible with only minimal class overrides. This way, if
今までNext.jsのAPIでちょっとしたルーティングを実現するために下記のライブラリを使っていました。 ただ、こちらのライブラリでは、APIの型情報をクライアントに共有することや、Zodなどであらかじめサーバーサイドで受け取るパラメータの型を縛ったりすることができませんでした。 そこで、今回ZodファーストなNext.js用のルーティングライブラリを作ってみました。 trpcやGraphQLなどを使えばクライアントへの型共有は行えるのですが、そこまで複雑なものにしたくなかったので、軽量なZodファーストな型安全なNext.js用のルーティングライブラリを作りたいというのがモチベーションとしてありました。 デモ デモを見ていただくとクライアント側とサーバー側で型が共有できているのがわかるかと思います。 StackBlitzのembed用のURLを指定してください 使い方 Zodファーストな
はじめに こんにちは、Reproで新規事業の開発を行っているエンジニアの兼信です。 今回は @hono/zod-openapi を採用して型安全なAPI開発を行なっている事例をご紹介します。 導入の経緯 私たちが提供する「Repro」は、デジタル領域のマーケターに対し、エンドユーザーとの付加価値の高いコミュニケーション手段を提供するためのSaaSプロダクトです。一方でそのコミュニケーションを次のステージに導くための新規事業も準備しており、そのために新しいプロダクトの開発も行っています。 すでにRepro という規模が大きくなっているプロダクト・ソリューションをもっているため、最初から一定の規模のユーザーに安定したサービスを提供できるケイパビリティを担保しつつも、新規事業であるため早く顧客に価値を体験しただきたいと考え、開発速度も重視しています。 今回新しいプロダクトのバックエンドを開発する
Typescript Runtime Validators and DX, a type-checking performance analysis of zod/superstruct/yup/typebox
Typescript Runtime Validators and DX, a type-checking performance analysis of zod/superstruct/yup/typebox Preface In 2023, Typescript is rarely questioned as an important tool for modern JavaScript developers, but one of its biggest limitations is the lack of added runtime type safety, particularly when dealing with IO at the boundaries of your application. To solve this problem a number of popula
どうもこんにちは、稲葉です。 最近、私はTypeScriptを使ってちょっとした開発をしていたので、便利なライブラリやフレームワークを探していました。その中で、ゾッと驚くものを見つけたんです。 それが、TypeScriptファーストのスキーマ宣言・検証ライブラリであるZodです。 Zodの素晴らしさは、実際に触ってみないとわからないと思います。私自身もZodを使ってみて、その使いやすさに感動しました。 そこで、今回はZodライブラリの基本的な使い方を紹介したいと思います！ あなたもZodの魅力に触れてみませんか？ 準備 React使って進めていきます。 はじめにターミナルで以下のコマンドを打ちます。 npx create-react-app my-app --template typescript cd my-app npm start TypeScriptをテンプレートに指定して、cre
Zod Tutorial
TypeScript is great for checking variables at the type level. For example, you can specify that the age property for a User should be a number. However, you can’t always be sure what you’re going to get from a form input. TypeScript will present an error if it’s not a number, but on its own it doesn’t know if a number is too low or too high to be realistic for your use case. There’s a similar prob
はじめに ここ最近の業務では TypeScript を用いた webフォームの実装を担当させていただいています。 親愛なる上司が TypeScriptファーストなバリデーションライブラリの存在を教えてくださり、「プロダクトでどう使えるか考えてみるのも楽しいかも」とお題をくださったので、今回は手始めにZodの基本的な使い方について記事を書かせていただこうと思います。 Zod とは Zod GitHub: https://github.com/colinhacks/zod TypeScriptファーストなスキーマ宣言・バリデーションライブラリ。 ここでいうスキーマとはデータの型のことで、Zodではスキーマの宣言 → スキーマに沿っているか値を検証 というステップでバリデーションを行います。 公式にもある通り、「parse, don't validate」の思考に基づいた関数型プログラミングのア
Zodでファイル(画像)のバリデーションをする
const IMAGE_TYPES = ['image/jpg', 'image/png']; const MAX_IMAGE_SIZE = 5; // 5MB // バイト単位のサイズをメガバイト単位に変換する const sizeInMB = (sizeInBytes: number, decimalsNum = 2) => { const result = sizeInBytes / (1024 * 1024); return +result.toFixed(decimalsNum); }; const schema = z.object({ file: z // z.inferでSchemaを定義したときに型がつくようにするため .custom<FileList>() // 必須にしたい場合 .refine((file) => file.length !== 0, { messag
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OpenAPI + Zod で型安全な API クライアント出力
react-hook-form と zod でバリデーションのその先へ
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
Zodで真のTypeScript firstを手にする
Zod を使って CSV からの入力データをバリデーションする - ドワンゴ教育サービス開発者ブログ
Next.js API Routes に Zod を組み込む
Zod のスキーマが使えるAPIクライアントZodios を紹介したい - とろろこんぶろぐ
React Hook Form で Zod を使う時の 5 つパターン
Introducing Valibot, a < 1kb Zod Alternative
ZodでAlways-Valid Domain Modelを実現する
OpenAI Function Calling を Zod + TypeScript で型安全に扱う - Qiita
When should you use Zod?
react-hook-form が Valibot に対応、Zod比較でバンドルサイズが92%削減
HonoとZodとCloudflare Workersで作る3分QRコードAPIクッキング
ZodでJSONのオブジェクトを実行時に都合の良い型に変換する | フューチャー技術ブログ
Zodファーストで型安全なNext.js用のルーティングライブラリを作った話
@hono/zod-openapiで型安全なAPI開発 - Repro Tech Blog
TypeScript開発に欠かせない？Zodライブラリの基本 | DevelopersIO
TypeScriptファーストなバリデーションライブラリ Zodの始め方 - Qiita