Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactとフォームとスキーマバリデーション / React forms with Schem...
Search
kamijin_fanta
January 12, 2021
Technology
0
2.5k
Reactとフォームとスキーマバリデーション / React forms with Schema Validation
kamijin_fanta
January 12, 2021
Tweet
Share
More Decks by kamijin_fanta
See All by kamijin_fanta
IoT向けストレージにTiKVを採用したときの話 / 2024-10-25 TiUG Meetup 3 Using TiKV as IoT storage
kamijin_fanta
0
43
TrinoとIcebergで ログ基盤の構築 / 2023-10-05 Trino Presto Meetup
kamijin_fanta
1
1.3k
Unicodeと符号化形式
kamijin_fanta
0
900
2020/05/25 さくらのクラウド向けツールを使いこなす
kamijin_fanta
3
280
2019-01-24 業務でのOSSとの関わり方
kamijin_fanta
7
4.7k
関数型言語で始めるネットワークプログラミング
kamijin_fanta
0
950
2018-11-10 Akka-HTTPで作るAPIサーバ
kamijin_fanta
2
3.5k
2018-06-30 Dockerで手に入れるデプロイ環境
kamijin_fanta
1
420
2017-09-09 Scala Kansai Summit - Akka Streams
kamijin_fanta
3
1.5k
Other Decks in Technology
See All in Technology
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
200
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
430
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
160
Engineer Career Talk
lycorp_recruit_jp
0
190
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
190
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
760
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
890
Featured
See All Featured
Docker and Python
trallard
40
3.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Happy Clients
brianwarren
98
6.7k
Writing Fast Ruby
sferik
627
61k
Code Review Best Practice
trishagee
64
17k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
A better future with KSS
kneath
238
17k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GitHub's CSS Performance
jonrohan
1030
460k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
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でフォーム作る⼈にオススメ