タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
JSer.info #665 - Web ComponentsライブラリであるLit 3.0がリリースされました。 Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more! – Lit Lit 3 upgrade guide – Lit Lit 3では、IE11のサポート終了、最小の実行環境をES2021をサポートしてるブラウザへ変更が行われています。 Lit 2.0で非推奨となったAPIの削除、Stage 3のDecoratorの対応なども行われています。 また、新しいLitテンプレートコンパイラーの公開、Preact Signalsを統合するパッケージも公開されています。 Chrome 118がリリースされました。 New in Chrome 118 - Chrome for Developers Chrome 11
パスワード設定画面によくある画面のバリデーションを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
アプリ開発をしながらtRPCとZodを学ぶ
はじめに 今回はtRPCについて周辺の用語解説及び整理に加え、簡易的なTODOアプリを開発しながら、具体的な使い方を解説していきます。 この記事の主な対象者 tRPCやZodについて基礎から学びたい人 API開発及びフロントエンドとの繋ぎ込みを担当している人 tRPCを使ってアプリ開発をしてみたい人 本記事の目標 tRPCやZodを含むその他周辺技術の用語の整理 簡易的なTODOアプリ開発を通してtRPCの使い方を学ぶ 用語解説 tRPCを理解するためにその周辺知識の整理と今回作成するTODOアプリで登場する用語の解説をしていきます。 T3 Stack 今回は開発する簡易アプリではT3 Stackは採用していませんが、tRPCの周辺用語でもあるので、簡単に解説をします。 T3 Stackは下記の3つの思想をもとにTheo氏によって作成されたWeb開発スタックです。 simplicity(簡
実務で使った 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 とバリデーションライブラリを組み合わせるのか バリデーションライブラ
はじめに 駆け出して約１ヶ月ほどのひよこエンジニアです。 Vercel の以下のアナウンスを受けて、社内のフロントエンド開発で利用している Node.js を v14 から v18 にアップデートしましたので、そのときにやったことやハマったことを簡単にまとめていきます。 方針 そもそも Node.js をアップデートするときに同時に考慮すべき問題としては、OS 起因の問題や Node.js Runtime 由来の問題など様々あります。 が、だいたいは 「プロジェクトで利用しているライブラリの問題」 にぶつかることが多いです。（以下記事など参照。また今回担当しているプロジェクトでは Docker イメージを用いていたため OS 起因の問題などは起こり得ない。） そのため、基本的には 「依存ライブラリの更新」 をメインで進めていくことにしました。 ただとはいえ 「とりあえずyarn upgra
react-hook-formとZodで作る型が動的なフォーム - バイセル Tech Blog
はじめに こんにちは！ 開発 2 部の小林です。 弊社の各プロジェクトでは、React Hook Form (以後 RHF とする) と Zod を用いて、様々な要件のフォームの実装をしています。 今回は、API 側から取得した値に基づいて、text, number, checkbox のように、入力項目を出し分けられる型が動的なフォーム(以後 動的フォーム とする)を作成しました。 この記事では、実装した動的フォームのコード例と、実装の過程で直面した課題+その解決策について紹介します。 はじめに 対象読者 Zod の schema で動的なフォームを表す方法 動的フォームに通常の Zod schema を使用できない理由 動的に schema を設定できる descriminated union 作成した動的フォームの説明 要件 設計 具体的なコード例 Schema Form Field
GitHub - ecyrbe/zodios: typescript http client and server with zod validation
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-prisma-types で Prisma から Zod を生成する | 404 motivation not found
目次 概要環境インストールprisma-schema-の定義コメントを利用したバリデーションルールの定義類似パッケージとの比較概要 NestJS Prisma Zod OpenAPI で型を堅牢にしたアプリケーションの開発 | 404 motivation not foundを書いている際に Prisma から Zod のオブジェクトを生成するパッケージをいくつか利用して比較しました。 その中でも zod-prisma-types というパッケージが比較的に良かったので、これについて書いていきます。 環境 Prisma: 4.11 zod-prisma-types: 2.5 インストール パッケージマネージャに合わせてPrismaとzod-prisma-typesのインストールを行います。 npm install zod-prisma-types # or yarn add zod-pri
はじめに この記事で作るフォームのソースコードはこちら↓になります。 【React Hook Form × Zod × MUI】フォームを作ろう！の続編になります。 ソースコードや実装方針などは前編のものを継承しています。 前編の「フォームを作ろう！」では、テキスト入力フォームと選択フォームの実装例を紹介しています。 この記事では、型安全に複数選択可能でオートコンプリートなフォームを実装する方法の例を紹介していきます。 使用技術 TypeScript React Hook Form Zod MUI 作成するフォーム この記事で作成するフォームがこちらになります。 実装 実装方針 実装は以下の流れで進めていきます。 zodを用いてschemaを定義 オートコンプリート単体のコンポーネントを実装 2で作成したコンポーネントにReact Hook Formを組み込んだコンポーネントを実装 3で作
Next.js App Router、Server Actions、Conform、Zodで条件分岐があるフォームを作る - asoview! Tech Blog
はじめに アソビューのフロントエンドテックリードの井上です Next.jsのApp Routerがリリースされてから数ヶ月経ち、本番サービスに適用して運用しているような方々も出てきた今日このごろのフロント界隈かと思います。 弊社でもApp Routerの適用したアプリケーションを開発中です。 さて、これまでフォームのバリデーションライブラリとしてreact-hook-formを使うケースが多かったのですが、Next.jsのServer Actionsへの対応がまだ検証段階（2024/5/23現在）、ということもあり、対抗馬としてRemix や Next.js のようなサーバーフレームワークを完全にサポートするという謳い文句のconformを試してみようと思います。 通常の使い方の解説記事はすでに多くの方が書かれていますので、今回は少し複雑なケースに適用した場合について検証してみました。 は
zodはどんなときに使えるのか？ ぜんぶだよ！！
JavaScriptNext.jsNuxtTypeScriptzodtech 最新版はこちらをご覧ください ご清聴ありがとうございました。 Discussion
Fastifyで作るAPIにZodでスキーマバリデーションをかけながら型定義と実用レベルのOpenAPI仕様を自動生成する | DevelopersIO
Fastifyで作るAPIにZodでスキーマバリデーションをかけながら型定義と実用レベルのOpenAPI仕様を自動生成する REST APIを作成する際、OpenAPI仕様のYAMLを手書きするのは面倒ですよね。Zodで定義したバリデーションスキーマから、型定義やOpenAPI仕様を業務で使えるレベルで出力する方法を探ってみました。 こんにちは。CX事業本部Delivery部MADグループのきんじょーです。 最近Fastifyをよく触っています。 Expressのように軽量フレームワークですが、デフォルトでasync/awaitによる非同期処理をサポートしており、プラグイン形式でさまざまな機能をエコシステムから追加できる方式がとても使いやすい印象です。 FastifyでREST APIを開発する際に、Zodで定義したバリデーションスキーマを正として、それを元に型とOpenAPI仕様書と生成
【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 の型を推論してくれ
Zodを勉強していくぞっど
みなさんこんにちは！アルダグラムでエンジニアをしている大木です。 今回は、Zodというスキーマ生成とバリデーションをいい感じにできるライブラリについて紹介したいと思います。 紹介と言いつつも、私自身はZodをあまり使ったことがないため勉強したメモ書きみたいになるかと思います。それでも良ければお付き合いください。 溢れる出オチ感 出オチ感溢れるタイトルですが、噂の「ChatGPT」に聞いてみるとお世辞を言ってくれました。ありがとうございます。 きっかけ ここからは真面目にやっていこうかと思います。 弊社のサービスである「KANNA」はノンデスクワーカー向けの施工管理アプリです。サービス上で案件を作成し、様々な情報をカスタマイズして入力することができます。 その入力画面では React Hook Form とZod が利用されているのですが、今回はとある新規機能の開発でこれらを利用することにな
自分が欲しい物がなかったのでサクッとでっち上げました なぜ作ったか 軽量で TS フレンドリな CLI ツールがほしい oclif がサブコマンドまで管理してくれるが色々と過剰 ジェネレータの生成コードが最新バージョンのものではなく怪しい(メンテされてる？) tsconfig の縛りがあったり、他のライブラリの一部に混ぜづらい type: module で実行できない (手元にESM生成物があった) cmd-ts が使いづらい 単なるバリデータではなく実行 handler まで渡さないといけない これ以上ライブラリ専用の DSL を覚えたくない => 引数パースを突っ込むだけの zod のラッパーでいいじゃん 使い方 // npx ts-node examples/sample.ts --name mizchi --age 34 --dry xxx 1 import { z } from
よく見る支払いフォーム ここ最近、支払いフォームを実装する機会があり、その際に割と悩んで勉強になったため自分なりの解決策をシェアしようと思います。 そしてちょうどこちらの記事で同じような要件の実装をされていました。非常に参考になったので掲載させていただきます。 なお今回はこの要件に追加でカード選択の要件が加わったフォームを実装していきます。ぜひ最後までご覧ください。 フォームの要件 支払い方法は大きく分けて以下の2つが存在する ポイント払い クレジットカード払い クレジットカード払いは大きく分けて以下の2つが存在する 登録済みのカードで支払う 新しくカード情報を入力して支払う 登録済みのカードは最大3枚まで表示できる(3枚まで登録できる) 登録済みのカード情報はデータベースから取得し、以下の情報を持つ カードID カード名義人 カード番号の下4桁 有効期限 新規カードで支払う場合は以下の情
【Next.js】ZodとReact Hook Formを使ってフォームバリデーションを実装してみた - Qiita
はじめに この記事では、React(Next.js)で最近よく聞くTSと相性が良いZodとReactでよく使われているReact Hook Formを使ってフォームバリデーションの実装をしてみて、とても簡単で便利だなと感じたので紹介してみます。 今回やること Next.jsでZodとReact Hook Formを組み合わせて使用してログイン機能のフォームバリデーションを実装してみます。 前提(準備) 今回下記２つを用いてフォームバリデーションを実装します。 自分の環境はフロントにReact(Next.js)とサーバーサイドにAPIサーバとしてPHP(Laravel)を使っています。 Zod 型安全なスキーマ定義とバリデーションを提供するライブラリ React Hook Form React のフォーム状態管理を簡単にするためのカスタムフックを使用できるライブラリ 実際にやってみる 概要
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 =
はじめに NRI OpenStandia Advent Calendar 2023の 20日目担当のあやかです。 フロントエンドのバリデーション定義ファイルを自動生成出来ないか試してみたので紹介します この記事の前提として、 バリデーションライブラリとして、TypeScript first でスキーマ定義とバリデーション設定を行うことが出来るZodを使用 OpenAPI Specification（以下OAS）とJSON Schemaからファイル生成出来るかを検証 手動でバリデーション定義をしたファイルと自動生成したファイルの両方のバリデーションチェックを適用出来るか検証 を行い、その結果を紹介する記事です。 背景 業務でとあるWebアプリを開発しています。 このアプリは入力項目がとても多く、フロントエンドでもバックエンドでもバリデーションをかけなければいけないという要件があります。 そう
zodのエラーメッセージの日本語化とカスタマイズ
// optional custom error message z.string().nonempty({ message: "Can't be empty" }); オブジェクトのkeyをmessageにしてvalueを好きな値にすればいけるんですね🥰 デフォルトのエラーメッセージ zodのエラーメッセージはすべて英語で定義されています Required(必須)などはどこでカスタマイズ(日本語化)するのだろう🤔 公式のエラーメッセージカスタマイズを読と・・・ import { z } from "zod"; const customErrorMap: z.ZodErrorMap = (issue, ctx) => { if (issue.code === z.ZodIssueCode.invalid_type) { if (issue.expected === "string")
[React]zodに出会って小さな幸せを得た話
概要 zodの使い道について、react-hook-formと組み合わせたフォームバリデーションが便利！というくらいの認識でしたが、他にも便利な使い方があったので、まとめます。 as stringによる型アサーションの罪悪感からの解放 ①環境変数がstring | undefinedになる問題を解決できた話 例えば以下のような環境変数が定義されていたとします。
![[React]zodに出会って小さな幸せを得た話](https://cdn-ak-scissors.b.st-hatena.com/image/square/ff2d367284ca2ea1f0beff8b7d0b35535c2cf720/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--53MtPGF8--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%25255Dzod%2525E3%252581%2525AB%2525E5%252587%2525BA%2525E4%2525BC%25259A%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E5%2525B0%25258F%2525E3%252581%252595%2525E3%252581%2525AA%2525E5%2525B9%2525B8%2525E3%252581%25259B%2525E3%252582%252592%2525E5%2525BE%252597%2525E3%252581%25259F%2525E8%2525A9%2525B1%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252582%252586%2525E3%252583%2525BC%2525E3%252581%2525A8%2525E3%252581%25258A%2525E3%252581%252598%2525E3%252581%252595%2525E3%252582%252593%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzE2OWM4YzQwOGEuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
JSON to Zod Schema
An online playground to convert JSON to Zod Schema
はじめに Zodは、TypeScript用のスキーマ定義とバリデーションのためのライブラリです。 tRPCの入出力のバリデーションでもよく使用されています。 今回、tRPCを使用する際にドメインモデルの作成にZodのスキーマを利用します。 また、レイヤードアーキテクチャ等のPresentation層 ↔︎ UseCase層 ↔︎ Domain層 の各レイヤーでスキーマを派生させていくことで、入出力モデルをより低コストに定義する方法について記載します。 実装について 今回話を進めていくにあたって、一般的なWebサービスにあるUserのような概念を用いていきます。 まず、全体像としてはこちらの図のようになっています。 Domain層に定義されているEntityのスキーマから派生して、UseCaseの入出力になり、さらにそれらがPresentationでさらに加工されAPIなどの入出力になります
CyberZのWebフロントチームでエンジニアをしている山﨑です。CyberZでは、新たな技術の導入を積極的に行なっており、その中で React Hook Form と zodを使用したフォームの実装を行なったため、その実装例をご紹介したいと思います。 前回の記事について 前回の記事では、ユーザーのサインイン・サインアップなど、シンプルな文字列の操作のみを必要とするフォームの実装例を紹介しました。しかし、フォームとしてユーザーの入力項目や設定が複雑になった場合、React Hook Formやzodの実装で工夫が必要になる箇所が出てきます。その一つが、配列の扱いについてです。「任意項目を複数回選択・入力できる」といった、ユーザー毎に異なる挙動を必要とする場合に、フォームの中で配列の管理が必要になってきます。 しかし、前回の記事で紹介したシンプルなuseFormとzodの管理だけでは実装が難
GitHub - blefnk/relivator-nextjs-template: ⭐ Next.js 14: Store, Landing, Admin Dashboard ▲ i18n, Stripe, Shadcn Tailwind, Drizzle Zod Trpc TypeScript Auth Page, Lucide CSS Radix UI, Responsive React Server Components, MySQL and Neon Postgre TS ORM, Intl A
⭐ Next.js 14: Store, Landing, Admin Dashboard ▲ i18n, Stripe, Shadcn Tailwind, Drizzle Zod Trpc TypeScript Auth Page, Lucide CSS Radix UI, Responsive React Server Components, MySQL and Neon Postgre TS ORM, Intl App Router, Mdx Docs User Actions Kit, SaaS Commerce Shop Pricing Payments, Dark Mode, Modern Full Stack, Free ▲ more stars → more features
検証しようと思った背景 ざっくりいうと、フロントエンドの実装をしていて、API のレスポンスチェック用に毎回自前の型ガード実装するのだるいなと思ったことがあったからです。 こういうやつ export type User = { id: number; name: string; }; export type Users = User[] const isUser = (arg: unknown): arg is User => { const u = arg as User; return ( typeof u.id === 'number' && typeof u.name === 'string' ); }; const isUsers = (args: unknown): args is Users => { const us = args as Users; return us.e
はじめに この記事で作るフォームのソースコードはこちら↓になります。 使用技術 TypeScript React Hook Form Zod MUI 作成するフォーム この記事で作成するフォームがこちらになります。 フォームの内容を整理していきます。 テキスト入力要素 必須入力と任意入力で二つの要素があります。 検索ボタンを押した時にエラーメッセージが出るのは必須入力の要素のみで、任意入力の方ではエラーは表示されません。 セレクト要素 テキスト入力要素と同じく、必須選択と任意選択で二つの要素があります。 また、こちらもテキスト入力要素と同じく、検索ボタンを押した時にエラーメッセージが出るのは必須選択の要素のみで、任意選択の方ではエラーは表示されません。 実装 それでは上記フォームを実装していきます！ 実装方針 実装は以下の流れで進めていきます。 zodを用いてschemaを定義 React
zodを使って、クエリパラメータのバリデーションを簡潔にする
zodというnpmパッケージの存在をつい先日知りました。 zodを使うと非常に簡単にバリデーションチェックができてコードがスッキリしたので今回はその紹介をしたいと思います。 問題となったケース クエリパラメータをNextサーバー側で受け取る場合、以下のように書いていました。 export default async function handler(req, res) { const { hogeId, numberId } = req.query if (!hogeId || typeof hogeId !== 'string') { return res.status(422).send({ message: 'Query parameter is required', response: 'failureResponse', }); } if (!fugaId || typeof f
概要 ZodとReact Hook Form（以下RHF）を使って、支払い方法ごとにバリデーションの要件が異なるフォームを作っていきます。 この記事では、例として、以下の要件を実装していきます。 要件 支払い方法は、クレジットカード、コンビニ支払い、銀行支払いの3つ それぞれの支払い方法はラジオボタンで選択可能 クレジットカードは、カード番号、氏名、有効期限、セキュリティコードについてバリデーションを行う コンビニ支払いは、select boxから何かしら選択したかどうかをバリデーションする submitボタンは常にenabled blur時はフォーカスを外した項目のみ、submit時はラジオボタンから選択した支払い方法の全項目について、それぞれバリデーションをかける エラーメッセージは該当項目にフォーカスすると消える（blur時に再度検証） 完成系 今回の完成系コードはこちらに置いていま
// Pick validators for treeshake import { $any, $array, $boolean, $const, $enum, $intersection, $null, $number, $object, $opt, $regexp, $string, $symbol, $undefined, $union, $void, $record, type Infer, type Validator, } from "lizod"; const validate = $object({ name: $string, age: $number, familyName: $opt($string), abc: $enum(["a", "b", "c"]), nested: $object({ age: $number, }), static: $const("st
firestore を zod でバリデーションする
encraft #2 までの間、スキーマスキーマした話をたくさん書きたい。 OGP は昨日食べた火鍋だ。Fire 感があるのでこれを使おうと思った。（Firebase の記事を書く時は炎の画像を使っていたのに、炎系のフリー素材をたくさん使いすぎて似た画像ばかりになりストックがなくなったことは秘密） firestore は withConverter で validation できる なんか似たようなブログを書いた気がしていたのだが、どうやら firestore の入出力に型をつける で withConverter を紹介していた。なので詳しくはそれを見てほしい。 export const sitemapConverter: FirestoreDataConverter<SitemapSchema> = { toFirestore(sitemapDto: SitemapSchema): Do
最近、Secret Managerから取得したJSONに、zodで定義したスキーマでValidationして型安全に取り扱うコードをよく書くので、関数の引数にzodで定義したスキーマを渡せばValidationしてその型を返す関数を定義して使っている。それを紹介だぜ、という小ネタです。 実装(簡易版) エラー処理を適当に書いた簡易版です。 import { GetSecretValueCommand, SecretsManagerClient, } from "@aws-sdk/client-secrets-manager"; import type { z, ZodType } from "zod"; export const fetchSecret = async <T extends ZodType<any, any, any>>({ client = new SecretsMana
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2023-10-16のJS: Lit 3、Chrome 118、Zodの作り方
React-Hook-Form + Zodでよくあるパスワードバリデーションを実装する
ひよっこエンジニアが Node のアップデートに立ち向かったら Zod でハマった話
【React Hook Form×Zod×MUI】複数選択+オートコンプリート+型安全なフォームを作ろう！
【TypeScript】Zod でスキーマ宣言とバリデーションを実施する
Zod でコマンドライン引数をパースするだけのツールを作った
複雑な支払いフォームをZodとReact Hook Formで実現する
Zodのバリデーション実装時間を短縮しバックエンドとの整合性を保つ - Qiita
Zodをベースとしたドメインモデルと入出力モデルの作成
React Hook FormとZodの配列管理｜CyberZ Developer
TypeScript × Aspida × Zodで型安全なHTTPリクエストについて考えてみた
【React Hook Form × Zod × MUI】フォームを作ろう！
ZodとReact Hook Formによる、支払い方法フォームの作成
GitHub - mizchi/lizod: lightweight zod-like validator
Secret Managerからシークレットを取得しZodでValidationする関数を書く
7net.omni7.jp
www.xn--fhq32lm4eoko24c48b.com
www.gdm.or.jp
news.yahoo.co.jp
kaigo40dai.hatenablog.com
news.yahoo.co.jp