Save 37% off PRO during our Black Friday Sale! »

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

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

4e842bca931f66f9cf29b3fdbd2cc4d8?s=128

kamijin_fanta

January 12, 2021
Tweet

Transcript

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

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

  3. Data Structure Validation フィールド型・データの範囲などを定義・検証する仕組み ⼈間が検証コードを書く必要が無くなって良い spec JSON Schema Swagger impl:

    go, python等様々な⾔語にてライブラリが存在 { "type": "string", "minLength": 2, "maxLength": 3 }
  4. superstruct TypeScriptで利⽤できるデータ検証ライブラリ https://docs.superstructjs.org/ サンプルコード: https://github.com/kamijin-fanta/react-form-schemavalidation- example/blob/master/src/superstruct/basic.test.ts

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

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

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

  8. 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

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