パスワード設定画面によくある画面のバリデーションをReact-Hook-Form(以下 rfc), Zodで実装します 実装する項目は以下の通りです 現在のパスワードと新しいパスワードが一致しているか 新しいパスワードと確認用のパスワードが一致しているか こちらの記事に、rfcとzodを利用した基本的なフォームの実装法を載せてあります！ 導入についてはこちらをご覧ください 結論 .refineまたは.superRefineを使いましょう！ const schema = z .object({ currentPassword: z.string().min(1, 'パスワードを入力してください'), newPassword: z .string() .min(8, 'パスワードは8文字以上で入力してください') .regex( /^(?=.*?[a-z])(?=.*?\d)[a-z\d]{8
React + Typescript + MUIv5 + React Hook Form で開発環境を作成しています。 今回は React Hook FormでValidationライブラリをどれにするか? について調査しました。 React Hook Form が標準で対応しているライブラリ React Hook Form が標準で対応しているライブラリは以下の10個になります。 正確には React Hook Form で 外部の検証ライブラリを使用する為に @hookform/resolvers が必要なのですが、この @hookform/resolvers が標準対応しているライブラリが以下の10個になります。 その他のライブラリもカスタムリゾルバを構築して使用できます。 class validator https://github.com/typestack/class-vali
実務で使った 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 とバリデーションライブラリを組み合わせるのか バリデーションライブラ
zodはどんなときに使えるのか？ ぜんぶだよ！！
JavaScriptNext.jsNuxtTypeScriptzodtech 最新版はこちらをご覧ください ご清聴ありがとうございました。 Discussion
【TypeScript】Zod でスキーマ宣言とバリデーションを実施する 2022.07.02 [Zod](https://github.com/colinhacks/zod) は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。 一度バリデータを宣言すれば、Zod が自動的に TypeScript の型を推論してくれるという特徴があります。このおかげで重複した型宣言を排除できます。 また、Zod はエコシステムも多く存在しており、OpenApi、Nest.js、Prisma、react-hook-form などと組み合わせて使うことができます。 Zod は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。 一度バリデータを宣言すれば、Zod が自動的に TypeScript の型を推論してくれ
Go Conference 2023 Online の Web サイト開発チームの一員として携わらせていただいたので、使用した技術や工夫したポイントを書いていこうと思います。 ざっくり言うと Next.js の Page Router で開発して GitHub Pages でホストした静的サイトなので、特殊な技術を使っているとかではないです。また、 Go Conference の話ですが Go 言語は出てきません。 TL;DR Go Conference 2023 Online の Web サイト開発において、自分は主に以下の点を工夫しました。 🎉 react-rewards の紙吹雪を setInterval で繰り返す 🌏 react-i18next で <wbr> を使って日本語の改行箇所を制御する ⚡️ Sessionize の API レスポンスは zod でバリデーションし
はてなブログ独自の集計による人気記事のランキング。5月19日（日）から5月25日（土）〔2024年5月第4週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 下戸がノンアルコールビールを飲んで「おつまみ」の概念を理解した話 - ココロ社 by id:kokorosha 2 ぜんぶ「プロジェクトX」のせいだ。 - Everything you've ever Dreamed by id:Delete_All 3 インドで少子化が既に始まっています - 限界ギリギリのサラリーマンのセミリタイアを目指す海外経済・投資・雑記です。 by id:shiina-saba13 4 「象・死んだ魚・嘔吐」をやってみた振り返り - JX通信社エンジニアブログ by id:jxpress 5 TM NETWORKの40周年トリビュートアルバムのこと - WASTE OF POPS 80s-90s
Zodのエラーメッセージの定義って面倒じゃない？
フォームを作成する場合、最近は個人的には react-hook-form と zod を使用して実装することが多い。 この2つの組み合わせに関する解説は他の方の記事に譲る。 こんな感じで、簡単にスキーマの定義とバリデーションの設定ができて、フォームの各フィールドと組み合わせることが可能である。 const schema = z.object({ username: z .string() .min(3, "3文字以上で入力してください") .max(10, "10文字以上で入力してください"), email: z.string().email("メールアドレスの形式で入力してください"), favoriteNumber: z .number() .max(10, "10以下の数字を入力してください") .min(1, "1以上の数字を入力してください"), }); const Form =
CyberZのWebフロントチームでエンジニアをしている山﨑です。CyberZでは、新たな技術の導入を積極的に行なっており、その中で React Hook Form と zodを使用したフォームの実装を行なったため、その実装例をご紹介したいと思います。 前回の記事について 前回の記事では、ユーザーのサインイン・サインアップなど、シンプルな文字列の操作のみを必要とするフォームの実装例を紹介しました。しかし、フォームとしてユーザーの入力項目や設定が複雑になった場合、React Hook Formやzodの実装で工夫が必要になる箇所が出てきます。その一つが、配列の扱いについてです。「任意項目を複数回選択・入力できる」といった、ユーザー毎に異なる挙動を必要とする場合に、フォームの中で配列の管理が必要になってきます。 しかし、前回の記事で紹介したシンプルなuseFormとzodの管理だけでは実装が難
始めに react-hook-formでは、バリデーションロジックをresolverオプションのところを変更することでyupやzodなどのバリデーションライブラリを使うことができます。 const { control, handleSubmit } = useForm({ resolver: /* yupResolverやzodResolverを入れる */, }) 最近はよくzodを見かけるのですが、僕はyupしか使ったことがなかっため、どういった違いがあるのか、またzodの方が本当に良いのかというところが気になったのでサンプルコードを書いて使い勝手を検証しました。 検証内容 今回は以下のようなフォームに対してのバリデーション設定をしました。 メールアドレス（メールアドレス形式バリデーション＋必須） ナマエ（カタカナバリデーション、文字数制限） パスワード（必須） 確認パスワード（パスワ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React-Hook-Form + Zodでよくあるパスワードバリデーションを実装する
【2022年】 React Hook FormでValidationライブラリはどれにするか?
【TypeScript】Zod でスキーマ宣言とバリデーションを実施する
Go Conference 2023 Online の Web サイトにおける工夫ポイント
今週のはてなブログランキング〔2024年5月第4週〕 - 週刊はてなブログ
React Hook FormとZodの配列管理｜CyberZ Developer
react-hook-formでyupとzodの違いを検証