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.4k
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
840
Unicodeと符号化形式
kamijin_fanta
0
750
2020/05/25 さくらのクラウド向けツールを使いこなす
kamijin_fanta
3
260
2019-01-24 業務でのOSSとの関わり方
kamijin_fanta
7
4.6k
関数型言語で始めるネットワークプログラミング
kamijin_fanta
0
810
2018-11-10 Akka-HTTPで作るAPIサーバ
kamijin_fanta
2
3.2k
2018-06-30 Dockerで手に入れるデプロイ環境
kamijin_fanta
1
360
2017-09-09 Scala Kansai Summit - Akka Streams
kamijin_fanta
3
1.4k
2017-07-14 WebComponent
kamijin_fanta
0
75
Other Decks in Technology
See All in Technology
競技としてのKaggle、役に立つKaggle
yu4u
3
1.8k
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
310
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
100
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
930
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
370
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.2k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
DMM.com アルファ室採用案内資料
hsugita
1
160
LLM開発・活用の舞台裏@2024.04.25
yushin_n
1
360
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
250
Featured
See All Featured
Done Done
chrislema
178
15k
KATA
mclloyd
15
12k
Building Your Own Lightsaber
phodgson
99
5.7k
RailsConf 2023
tenderlove
4
540
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
The Mythical Team-Month
searls
216
42k
4 Signs Your Business is Dying
shpigford
175
21k
Teambox: Starting and Learning
jrom
128
8.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Docker and Python
trallard
34
2.7k
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でフォーム作る⼈にオススメ