Reactとフォームとスキーマバリデーション / React forms with Schema Validation

React forms with Schema Validation 2021/01/12 kamijin-fanta

TypeScriptやってますかデータ構造のValidationやってますか

Data Structure Validation フィールド型・データの範囲などを定義・検証する仕組み⼈間が検証コードを書く必要が無くなって良い spec JSON Schema Swagger impl:
go, python等様々な⾔語にてライブラリが存在 { "type": "string", "minLength": 2, "maxLength": 3 }

superstruct TypeScriptで利⽤できるデータ検証ライブラリ https://docs.superstructjs.org/ サンプルコード: https://github.com/kamijin-fanta/react-form-schemavalidation- example/blob/master/src/superstruct/basic.test.ts

superstructの使いみち APIで投げられたPOST Bodyの検証ユーザの⼊⼒フォームの検証 ← 便利そう

react-hook-form パフォーマンスが良いReactのフォームライブラリバリデーション・繰り返しフィールド等の機能が⼀通り揃っていて良いサンプルコード: https://github.com/kamijin-fanta/react-form-schemavalidation- example/blob/master/src/simple-form/simple-form.tsx

react-hook-formの⾯倒な所エラー⽂章を⾃分で書く必要が有るバリデーション内容から勝⼿に⽂章作って欲しい errors onSubmit が型安全でない

react-hook-form+superstruct react-hook-form で書いていたルールを全てsuperstructで定義する superstructがエラー⽂の⽣成する superstructが型を定義する react-hook-formの⾟さを軽減出来る https://github.com/kamijin-fanta/react-form-schemavalidation- example/blob/master/src/schema-validation-form/schema-validation-form.tsx

react-hook-form+superstruct構成はreactでフォーム作る⼈にオススメ

Reactとフォームとスキーマバリデーション / React forms with Schem...

Reactとフォームとスキーマバリデーション / React forms with Schema Validation

kamijin_fanta

More Decks by kamijin_fanta

Other Decks in Technology

Featured

Transcript