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
41
TrinoとIcebergで ログ基盤の構築 / 2023-10-05 Trino Presto Meetup
kamijin_fanta
1
1.3k
Unicodeと符号化形式
kamijin_fanta
0
900
2020/05/25 さくらのクラウド向けツールを使いこなす
kamijin_fanta
3
270
2019-01-24 業務でのOSSとの関わり方
kamijin_fanta
7
4.7k
関数型言語で始めるネットワークプログラミング
kamijin_fanta
0
940
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
Java x Spring Boot Warm up
kazu_kichi_67
2
490
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.1k
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
630
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
140
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
110
君は隠しイベントを見つけれるか?
mujyun
0
280
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
3.9k
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
omakaseしないための.rubocop.yml のつくりかた / How to Build Your .rubocop.yml to Avoid Omakase #kaigionrails
linkers_tech
3
720
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
230
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
190
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
BBQ
matthewcrist
85
9.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
What's in a price? How to price your products and services
michaelherold
243
12k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Testing 201, or: Great Expectations
jmmastey
38
7k
KATA
mclloyd
29
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
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でフォーム作る⼈にオススメ