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
TrinoとIcebergで ログ基盤の構築 / 2023-10-05 Trino Presto Meetup
kamijin_fanta
1
1.2k
Unicodeと符号化形式
kamijin_fanta
0
870
2020/05/25 さくらのクラウド向けツールを使いこなす
kamijin_fanta
3
270
2019-01-24 業務でのOSSとの関わり方
kamijin_fanta
7
4.7k
関数型言語で始めるネットワークプログラミング
kamijin_fanta
0
920
2018-11-10 Akka-HTTPで作るAPIサーバ
kamijin_fanta
2
3.4k
2018-06-30 Dockerで手に入れるデプロイ環境
kamijin_fanta
1
400
2017-09-09 Scala Kansai Summit - Akka Streams
kamijin_fanta
3
1.4k
2017-07-14 WebComponent
kamijin_fanta
0
97
Other Decks in Technology
See All in Technology
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
950
やってやろうじゃないかメカアジャイル! / Let's do it, mechanical agile!
psj59129
1
670
eBPFのこれまでとこれから
yutarohayakawa
10
3.2k
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
380
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
210
開発者の定量・定性データを組み合わせて開発者体験を把握するための取り組み
ham0215
1
140
『GRANBLUE FANTASY Relink』キャラクターの魅力を支えるリグ・シミュレーション制作事例
cygames
0
120
Analytics-Backed App Widget Development - Served with Jetpack Glance
miyabigouji
0
610
PdMはどのように全てのスピードを上げられるか ~ 非連続進化のための具体的な取り組み ~
sansantech
PRO
4
1.3k
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
7.1k
チームビルディングは"感性"で向き合おう / Team Building with Awareness
kohzas
0
260
内製化を目指す事業会社が、システム開発会社と共に進める「開発生産性改善」の取り組み事例 #devsumi
yuwji
0
100
Featured
See All Featured
For a Future-Friendly Web
brad_frost
174
9.3k
What the flash - Photography Introduction
edds
67
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
Code Review Best Practice
trishagee
62
16k
How to Think Like a Performance Engineer
csswizardry
16
960
Infographics Made Easy
chrislema
239
18k
Designing for humans not robots
tammielis
248
25k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Typedesign – Prime Four
hannesfritz
39
2.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
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でフォーム作る⼈にオススメ