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 Schema Validation
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
TrinoとIcebergで ログ基盤の構築 / 2023-10-05 Trino Presto Meetup
kamijin_fanta
1
1.1k
Unicodeと符号化形式
kamijin_fanta
0
830
2020/05/25 さくらのクラウド向けツールを使いこなす
kamijin_fanta
3
270
2019-01-24 業務でのOSSとの関わり方
kamijin_fanta
7
4.7k
関数型言語で始めるネットワークプログラミング
kamijin_fanta
0
870
2018-11-10 Akka-HTTPで作るAPIサーバ
kamijin_fanta
2
3.3k
2018-06-30 Dockerで手に入れるデプロイ環境
kamijin_fanta
1
390
2017-09-09 Scala Kansai Summit - Akka Streams
kamijin_fanta
3
1.4k
2017-07-14 WebComponent
kamijin_fanta
0
86
Other Decks in Technology
See All in Technology
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
地理情報とAPIのトレンド
nagix
0
160
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
MySQLのロックの種類とその競合
yoku0825
6
1.6k
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
Featured
See All Featured
A Tale of Four Properties
chriscoyier
155
22k
GitHub's CSS Performance
jonrohan
1026
450k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
How STYLIGHT went responsive
nonsquared
93
5k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
The Invisible Customer
myddelton
117
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Designing Experiences People Love
moore
136
23k
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でフォーム作る⼈にオススメ