Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Reactとフォームとスキーマバリデーション / React forms with Schema Validation
kamijin_fanta
January 12, 2021
Technology
0
350
Reactとフォームとスキーマバリデーション / React forms with Schema Validation
kamijin_fanta
January 12, 2021
Tweet
Share
More Decks by kamijin_fanta
See All by kamijin_fanta
kamijin_fanta
3
180
kamijin_fanta
7
4.1k
kamijin_fanta
0
490
kamijin_fanta
2
2.3k
kamijin_fanta
1
240
kamijin_fanta
3
1.1k
kamijin_fanta
0
30
Other Decks in Technology
See All in Technology
minma
0
190
koukyo1994
5
1.2k
robcrowley
0
150
raykataoka
9
8.6k
karabish
0
360
htomine
0
150
kanaugust
PRO
0
160
mahito
0
230
nisshii0313
1
170
simosako
1
140
mii3king
0
430
khrd
1
640
Featured
See All Featured
imathis
479
150k
ufuk
56
5.4k
jonrohan
1021
380k
sferik
610
55k
bermonpainter
342
26k
michaelherold
225
8.5k
shpigford
165
19k
jasonvnalue
81
8.1k
tanoku
258
24k
lemiorhan
627
43k
keathley
20
710
keavy
107
14k
Transcript
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でフォーム作る⼈にオススメ