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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide