まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
プログラマの抱いている名前についての誤謬
パトリック・ミッケンジー（Patrick McKenzie）さんのブログ・エントリ、 “Falsehoods Programmers Believe About Names” の日本語訳です。翻訳の公開を快諾してくださったミッケンジーさんに感謝します。 公開: 2012-02-22 Posted on June 17, 2010 by Patrick きょう、ジョン・グレアム゠カミング（John Graham-Cumming）が、正しくない文字が含まれているといって彼のラスト・ネームを受け付けないコンピュータ・システムへの不満の記事を書いていた。もちろん彼の名前に「正しくない」ところなどない。当人の申し出たものが当人を識別するものとしては相応しいのであって、定義からして名前とはそういうものである。このことにジョンは当然ながらいらだったし、そうなるのもきわめて正当なことだ。定義からすれば事実
ハイフンに似ている横棒を全て統一するᅳㅡ˗𐆑–᭸‒-─−▬𐄐—━‐‑ー﹣―ｰ﹘－⁃➖⁻！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
バリデーション解体新書 2025/4/8に開催した #アーキ部 『バリデーション解体新書』の内容を編集したものです。 バリデーションとは何か? 広義には、 何らかの処理を実施するにあたって、入力データが想定する条件を満たすかを検証する行為 と言える。 この定義で、アプリケーションのどこでバリデーションをしているのかを考えると、以下のように各層にそれが見られる。 このように実装される場所が散らばるので、「バリデーション」や「入力チェック」を分類して開発ガイドラインを作ることが多い。 例えば、大規模Java開発向けのTERASOLUNA開発ガイドラインを見てみると、 ユーザーが入力した値が不正かどうかを検証することは必須である。 入力値の検証は大きく分けて、 1. 長さや形式など、文脈によらず入力値だけを見て、それが妥当かどうかを判定できる検証 2. システムの状態によって入力値が妥当かどうか
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ
Exadata Database Service on Dedicated Infrastructure セキュリティ、ネットワーク、および管理について
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
TLS証明書チェッカーcheck-tls-certの公開
こんにちは、技術開発室の滝澤です。 TLS証明書チェッカーcheck-tls-certを開発して公開したので紹介します。 このcheck-tls-certについて簡単に説明すると次の通りです。 check-tls-certは、TLS証明書の有効性と証明書チェインの検証するツール 主な用途は、TLS証明書の設置・更新作業の際の各種確認およびTLS証明書の（有効期限を含む）有効性の監視 様々な検査を実施し、各検査結果を出力することで問題箇所を把握しやすい check-tls-certの概要 TLS証明書チェッカーcheck-tls-certはTLS証明書の有効性と証明書チェインを検証します。 主にTLS証明書の設置・更新作業の際の各種確認およびTLS証明書の（有効期限を含む）有効性の監視のために利用できます。 次のサイトで公開しており、ReleaseページからLinux向けとmacOS向けのバ
Ruby on Rails を用いたシステム上で入力フォームを実現する際、Rails が提供しているフォームヘルパーを利用した実装や、React や Vue によるコンポーネントの自前での実装が一般的に行われます。 ここで、職業で学生を選択した場合は学校名と学年、会社員を選択した場合は役職と年収を…
主にバックエンドのエンジニアとしてクックパッドマートの開発に携わっている塩出（ @solt9029 ）です。 美味しい食材をユーザにお届けするサービスであるクックパッドマートでは、日々街の販売店や地域の生産者が商品の登録を行っています。 商品を登録する際、販売者は消費期限をはじめとする様々な品質保証の情報を正確に入力する必要があります。 しかし、商品の種類や状態に応じて記載するべき品質保証の情報は異なるため、全項目が羅列されるフォームでは正確な入力が困難であり、販売者および商品の審査を行う社内の運用メンバに対して大きな負担をかけていました。 そこで、 JSON Schema を利用して複雑なフォームの出し分けを自動で制御し、またバックエンド側でのバリデーションも行うことが出来る仕組みを導入しました。 その結果、商品の種類や状態を選択するだけで、適切な品質保証の情報が自動的に入力され、必要な
はじめに Go のウェブアプリで使う入力バリデーションに関して、ozzo-validation を検討した。 これまでのバリデーション 普段、仕事では labstack/echo という Go のウェブフレームワークを使う事が多いのだけど、バリデーションに関しては labstack/echo のサンプルに合わせて go-playground/validator を使ってきた。 go-playground/validator は機能も豊富で(一応)痒い所に手は届くのだけど、struct にタグを付けて判定させないといけない。これが実に煩わしい。以前 labstack/echo を使ったサンプルを書いたので、それを見て欲しい。 // Comment is a struct to hold unit of request and response. type Comment struct { I
逆引き 型ファースト 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 で
はじめにOpenAPI仕様に則ってREST APIの設計をする際に、値が存在しないという状態をどのように表現するかというお話です。 undefinedとはまずはじめに、ここでundefinedと言っているのは、OpenAPIの仕様において、リクエスト/レスポンスのデータ型を定義するSchema Objectのプロパティの1つであるrequiredが指定されていない状態を指します。 OpenAPIにおけるrequiredの定義を確認してみましょう。 OpenAPIの仕様を参照すると、Schema ObjectはJSON Schemaの仕様に従うと記載されています。 The Schema Object allows the definition of input and output data types. These types can be objects, but also primit
外からやってくる値から TypeScript の型を守るライブラリ・ツールまとめ - Mobile Factory Tech Blog
こんにちは、新卒エンジニアの id:d-kimuson です 先日 type-predicates-generator という型定義からユーザー定義型ガード・アサーション関数を自動生成するツールをリリースして紹介記事を書いたのですが、感想とかを眺めていたら同じく外部から来た値に安全な型付けをするためのライブラリやツールの情報をいくつも観測しました この辺りのランタイムチェックライブラリの情報ってあまりまとまっていない印象で自分が知らないものもいくつかあったので、調べつつ簡単にまとめられたらなと思ってこのエントリを書きました 外部からやってきた値を型安全にするにはざっくりと 型生成によるアプローチ ランタイムチェック用の独自型を書かせるアプローチ 型情報からランタイムチェック関数を自動生成するアプローチ の 3 つのアプローチがあると思うので、それぞれのアプローチごとに紹介します ① 型定義
どうも、 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
DHHが考えるRailsのバリデーション設計
3行まとめ 単純なバリデーション（必須・範囲・文字数など）はHTMLとDB制約、CHECK制約があれば十分であるというのが最近のDHHの主張。 SQLiteではCHECK制約が少し貧弱なため、制約変更の可能性がある場合は従来通りアプリケーションでもバリデーションした方がいい。 Rails初心者はDHHの方法をそのまま採用するのはやめた方が良い。 調べたきっかけ 最近DHHがonce.comでのCampfireをはじめとしたプロダクトで、NULL制約やDB制約で防げるようなRailsのモデルのバリデーションを積極的には利用しないでいるという主張をしている。 DHHの主張を要約すると以下のようになる。[1] HTMLでのバリデーションが優れている 例えば、input type=“email” にしておくとブラウザで勝手にメールアドレス形式ではない場合にエラーにしてデータ送信をしないようにしてく
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
こんにちは、ティアフォーで認証認可基盤を開発している澤田です。 最近取り入れたProtobufで、素晴らしいREST APIの開発体験をしたのでご紹介します。 なお、ティアフォーではマイクロサービスを支える認証認可基盤を一緒に開発いただけるメンバーを募集しています。ご興味のある方は下記ページからご応募ください。 herp.careers 実現したかったこと マイクロサービス間連携のAPI開発において、以下の条件を満たすやり方を探していました。 スキーマを最初に定義してリクエストとレスポンスの型が自動で生成される ドキュメント（openapi.yaml）が生成される バリデーションが定義できて、その実装が自動で生成される 実現方法 Go言語で開発する場合はgo-swaggerでも実現できますが、本記事では、Protobufで実現できるgRPC Gatewayとprotoc-gen-valid
今回は、郵便番号データ内の町名を空にしなければいけない町域について紹介します。 データは、記載がない限り2021-05-31のデータを用いています。 ケンオールでどのようにパースされているかは、こちらのデモで試せます。 以下に掲載がない場合 ○○一円 ○○の次に番地がくる場合(○○は町名) ○○の次に番地がくる場合の歴史的背景 参考文献 ケンオールについて 更新履歴 町域に文字列が記載されているものの、コメントと同様の文字列のため削除しなければいけないパターンが存在します。 そのパターンは以下の通りです。 以下に掲載がない場合 ○○一円(○○は町名) ○○の次に番地がくる場合(○○は町名) 以下に掲載がない場合 以下に掲載がない場合とは、以降のレコードに掲載されていない住所の場合はこの郵便番号を使うよう指示しているコメント文字列です。 0600000: 北海道 札幌市 中央区 以下に掲載が
こんにちは、バックエンドエンジニアの日下です。 CSV から JSON へ変換するスクリプトを、TypeScript で実装する機会がありました。 今回は、CSV のデータのバリデーションに Zod を使った話をします。 スクリプトの目的 システム間のデータ連携が目的です。 連携元のシステムから CSV 出力されたデータを、連携先のシステムで利用する JSON へ変換します。 また、JSON への変換以外にも以下の要件があります。 CSV のデータをバリデーションする 連携先のシステムで利用できるデータであることを保証するために、バリデーションを実行します。 バリデーション失敗時に、日本語のエラーメッセージを表示する スクリプトの実行は業務担当のエンドユーザーが行うため、日本語のエラーメッセージを表示します。 CSV の読み込み 元データとなる CSV の読み込みは、csv-parse を
create-validator-tsというTypeScriptの型定義からJSON Schemaを使ったバリデーションコードを生成するツールを書きました。 モチベーション expressなどでAPIを書くときに、Request/Responseが意図したものかどうかをバリデーションする必要があります。 特にreq.queryなどはStringが入ると予想しますが、オブジェクトが入ってくることもあります。 これは、expressの内部で使っているqsというURLクエリのパーサが、オブジェクトや配列へ展開する機能を持っているためです。 expressを使ってるサイトは ?q=text があるときに req.query.q には オブジェクトが入る可能性をちゃんと考慮しないといけない。 ?q[a]=text で req.query.q ; // { a: "text" } になる — azu
TypeScript Compiler APIを使って型を中心に実装を自動生成する - ドワンゴ教育サービス開発者ブログ
この記事は、ドワンゴアドベントカレンダー2020の10日目の記事です。 qiita.com はじめに ベルリシア(@berlysia) という名前で活動しています。Webが好きです。ドワンゴでは、N予備校をはじめとする教育事業のWebフロントエンド開発をしています。 この記事では、Webフロントエンドチームの実際の開発で用いた、TypeScript Compiler APIを使っての型を中心とした実装の自動生成事例を紹介します。考察パートが中心で、コードはほぼ出てきません。 状況説明 管理画面の開発です。検索と結果一覧とCRUD操作が中心で、多くの画面が定型的な実装です。画面数が多いため、いかにこうした定型的な画面を効率よく開発して複雑なところに注力するかが、この開発を成功させるカギとなります。また、人員的にもある程度の並列性を確保している状態です。 APIはOpenAPIで仕様が提供され
TypeScript で実行時の入力を含む文字列を型で弾く - Object.create(null)
TypeScript (4.7 時点) において, 文字列に付けられる型には以下の 3 つ (とそのユニオン型) があります. 文字列型 string 文字列リテラル型 ("foo" など) テンプレートリテラル型 (`data-${string}` など) これらのうち, 実行時の入力, 特に事前にパターンが想定されていないような任意の入力が含まれるような文字列に対しては, string や string を含むテンプレートリテラル型を付けることはできても, 文字列リテラル型を付けることはできません. 文字列リテラル型を付けるためには型検査時 (実行の前) に入力文字列の内容がわかっている必要があるので, まあそれはそうですね. このことを利用して, 実行時の入力を含む文字列を与えようとすると型検査に失敗するような関数を作ることができそうです. まずは与えられた型が文字列リテラル型, ま
業務委託で STORES の開発をしている @inouetakuya です。 先日 STORES のフロントエンドチーム内でクライアントサイドのバリデーションについて見直す機会があり、特にバリデーションエラーのデータ型をどうするかについての議論が興味深かったので、共有させていただきます。 背景 議論の背景について簡単に触れておくと、STORES のクライアントサイドでは、バリデーションのライブラリとしてこれまで joi-browser を使ってきました。 しかしながら、本家の Node.js 版の joi がブラウザ対応したことにより joi-browser が deprecated になったことを受けて、今後も joi を使い続けるかを検討したところ、 joi-browser と joi の最新バージョンとの間で API の差異がいくつかあり、joi-browser から joi への乗
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
HTMLFormElement.submit は validation を無視するし submit イベントを発火しない - 平常運転
日記です。タイトルでほぼすべてがオチてしまった。 const form = document.querySelector('form#ultra-form'); form.submit(); みたいな感じで、 <form> を JavaScript から submit することができるんだけど、この HTMLFormElement.submit は HTML Living Standard ではこう定義されている: Submits the form, bypassing interactive constraint validation and without firing a submit event. https://html.spec.whatwg.org/multipage/forms.html#htmlformelement つまり、例えば下のような HTML form の場合、
クライアントとサーバーで、APIの型・バリデーションルールを一元化する - TechDoctor開発者Blog
こんにちは。株式会社 TechDoctor でソフトウェアエンジニアをしている大瀧です。 突然ですが、アプリケーション開発で、クライアントとサーバーの API の型やバリデーションルールが食い違い、予期せぬバグに繋がった経験はないでしょうか。 このような課題の解決策として、本記事では、OpenAPI スキーマをもとに、API の型とバリデーションルールを一元管理する方法を紹介します。 ここで紹介するアプローチは、 OpenAPI スキーマを作成できる限り特定の言語やフレームワークに依存しませんが、今回は具体例として FastAPI、Pydantic、Zod、openapi-zod-client を使った方法を解説します。 なお本記事のサンプルコードは、以下のリポジトリで確認できます。（Kiro と Claude Code が作ってくれました） GitHub - shutootaki/syn
Next.jsのsearchParamsはas stringせずに必ずバリデーションしてくれ。またはvalibotのちょいテクニック
Next.jsのsearchParamsの型問題 Next.jsのsearchParamsの型は少々厄介です。searchParamsのドキュメントでは次のように型定義が記載されています。 export default async function Page({ searchParams, }: { searchParams: Promise<{ [key: string]: string | string[] | undefined }>; }) { const filters = (await searchParams).filters; } 各パラメーターの型がstring | string[] | undefinedとなっていますね。これを使うときに型チェックが面倒になってsearchParams.filters as stringと書いてしまっているのをよく見ます。string[
この記事は Timee Advent Calendar 2024 シリーズ 1 の5日目の記事です。 はじめに こんにちは。タイミーの DRE チームの chanyou です。2024年の3月に DRE チームにジョインして、社内のデータ基盤を作って運用しています。 DuckDB を使ってデータ基盤で扱うデータの品質を保証し始めたので、その内容をご紹介します。 データ品質と完全性 タイミーのデータ基盤で重視しているデータ品質 タイミーでは、DMBOK を参考に以下のデータ品質を重視して設計や日々の運用を行っています。 特性 意味 完全性 データが欠損していないか 適時性 必要なときにすぐにデータを参照できるか 一意性 データが重複していないか 一貫性 型・タイムゾーン・表記揺れなど、値の書式や意味が統一されているか 今回は完全性にフォーカスします。 完全性が損なわれるタイミング 上記の通り
Cloud Composerによるデータバリデーション ～常に正確なデータ集計を実現するために～ - ZOZO TECH BLOG
こんにちは。ECプラットフォーム部データエンジニアの遠藤です。現在、私は推薦基盤チームに所属して、データ集計基盤の運用やDMP・広告まわりのデータエンジニアリングなどに従事しています。 以前、私たちのチームではクエリ管理にLookerを導入することで、データガバナンスを効かせたデータ集計基盤を実現しました。詳細は、以前紹介したデータ集計基盤については以下の過去記事をご覧ください。 techblog.zozo.com 本記事では、データ集計基盤に「データバリデーション」の機能を加えて常に正確なデータ集計を行えるように改良する手段をお伝えします。 データバリデーションとは バリデーション導入後のデータ集計基盤 ジョブネット構築 テンプレートによる効率的なDAGの作成 DAG間の依存関係の設定方法 バリデーションDAGのタスク構成 まとめ データバリデーションとは データバリデーションとはデータ
スキーマバリデーションライブラリの標準インターフェース standard-schema 2025.02.15 スキーマバリデーションライブラリはここ数年で人気を集めています。多くのライブラリが登場する中で、standard-schema はスキーマバリデーションライブラリの標準インターフェースを提供します。これにより、エコシステムツールがユーザー定義の型検証ツールをより簡単に受け入れられるようにすることを目指しています。 Zod や valibot, ArkType などを代表とするスキーマバリデーションライブラリはここ数年で人気を集めています。これらのライブラリは TypeScript の型システムを活用してスキーマを定義し、それに基づいてバリデーションを行います。バリデーションを行った結果は型安全に扱うことができるのが特徴です。 ユーザー入力のように外部からのデータを安全に扱いたいよう
What are best AI tools? Take the State of AI survey
TypeScriptのゾッとする話 ~ Zodの紹介 ~
現在( 2021/09/13 )、この記事の情報は古くなっている可能性があります！ そのため、なるべくは公式ドキュメントを参照してください。 参照: 公式ドキュメント この記事について 先日、「 エンジニアとして一番怖いモノは何？ 」と知人に尋ねると、 「 実は、TypeScript が一番怖い 」 と言ってきました。 そんな訳ないだろうと思っていたのですが、どうやら知人は本気の様子。 「 TypeScript が嫌いならまだしも、TypeScript が怖いとは、これはナニかあるな 🤔 」 と思った私は、TypeScript First なライブラリである Zod を知人に紹介して、事の真意を確かめようとしたのでした。 怖いならもっと怖がらせてやろうと思ったのは内緒 🤫 しかし、知人に紹介するだけでは勿体ないので、今回は皆さんに知見を交えながら Zod の事を紹介していこうと思います
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: "メールアドレスの
Migrating from Zod to Valibot: A Comparative Experience | Matthew Kwong
Jan 12, 2024Migrating from Zod to Valibot: A Comparative ExperienceLearn about migrating from Zod to Valibot for form validation: smaller bundles, familiar APIs, but with room for documentation improvement. I've recently migrated the validation part of the contact form of my website from Zod to Valibot. And I would like to share with you the experience. What is Valibot? Valibot is commonly known a
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
10年物の長寿プロダクトのバリデーションアーキテクチャを変更した件 - RAKUS Developers Blog | ラクス エンジニアブログ
改善施策を決めるまで 旧アーキテクチャ概要 旧アーキテクチャの問題分析 新アーキテクチャ概要 最後に こんにちは、楽楽販売開発課の岡本です。 弊社では10年を超える長寿プロダクトをいくつも擁していますが、私が担当しているプロダクトもそんな長寿プロダクトの一つです。 さて、どのように優れたプロダクトでも10年以上開発を続けていれば、少なくない量のコード負債を抱えてしまうもので、我々の開発チームでもこの問題に日々悩まされております。 このような状況を打開すべく、昨年9月に開発チーム内に改善専門部隊が立ち上がりました。 本記事では、改善部隊が行った施策の1つである「バリデーションアーキテクチャの変更」を取り上げて紹介しようと思います。 改善施策を決めるまで 先の項でも紹介した通り、我々のプロダクトは少なくない量のコード負債を抱えてしまっています。 ですので、改善部隊が発足時点で改善したい内容はい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
バリデーション解体新書 - kawasima
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
【フロントエンド初心者向け】ユーザビリティを上げるちょいテク
現実世界におけるスキーマ設計の妥協
JSON Schema で複雑な仕様の入力フォームの実装に立ち向かった話
JSON Schema をクックパッドマートの商品登録画面に導入した話 - クックパッド開発者ブログ
Go の入力バリデーションパッケージ ozzo-validation を試した。
OpenAPIにおけるundefinedとnullの設計 | フューチャー技術ブログ
react-hook-form と zod でバリデーションのその先へ
Zodで真のTypeScript firstを手にする
ProtobufでREST APIを快適に開発する方法のご紹介 - TIER IV Tech Blog
ケンオール通信第10号： 町名を空にしなければいけない町域 - ケンオールブログ
Zod を使って CSV からの入力データをバリデーションする - ドワンゴ教育サービス開発者ブログ
TypeScriptの型定義からバリデーションコードを生成するツールを書いた
クライアントサイドのバリデーションエラーのデータ型についての考察 - STORES Product Blog
DuckDB を使ったデータ品質保証の実践 - Timee Product Team Blog
スキーマバリデーションライブラリの標準インターフェース standard-schema
Introducing Valibot, a < 1kb Zod Alternative
react-hook-form が Valibot に対応、Zod比較でバンドルサイズが92%削減
pleasantbreeze.hatenablog.com
saleem.hatenablog.com
hkmn.jp
hkmn.jp
hkmn.jp
www.nikkei.com