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.6k
Reactとフォームとスキーマバリデーション / React forms with Schema Validation
kamijin_fanta
January 12, 2021
Tweet
Share
More Decks by kamijin_fanta
See All by kamijin_fanta
2025-04-14 Data & Analytics 井戸端会議 Multi tenant log platform with Iceberg
kamijin_fanta
1
250
IoT向けストレージにTiKVを採用したときの話 / 2024-10-25 TiUG Meetup 3 Using TiKV as IoT storage
kamijin_fanta
0
87
TrinoとIcebergで ログ基盤の構築 / 2023-10-05 Trino Presto Meetup
kamijin_fanta
1
1.7k
Unicodeと符号化形式
kamijin_fanta
0
1k
2020/05/25 さくらのクラウド向けツールを使いこなす
kamijin_fanta
3
320
2019-01-24 業務でのOSSとの関わり方
kamijin_fanta
7
4.8k
関数型言語で始めるネットワークプログラミング
kamijin_fanta
0
1.1k
2018-11-10 Akka-HTTPで作るAPIサーバ
kamijin_fanta
2
3.8k
2018-06-30 Dockerで手に入れるデプロイ環境
kamijin_fanta
1
460
Other Decks in Technology
See All in Technology
PO初心者が考えた ”POらしさ”
nb_rady
0
210
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.2k
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
47
18k
Geminiとv0による高速プロトタイピング
shinya337
1
270
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.4k
Lazy application authentication with Tailscale
bluehatbrit
0
200
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
670
OPENLOGI Company Profile
hr01
0
67k
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
140
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
Done Done
chrislema
184
16k
BBQ
matthewcrist
89
9.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
GitHub's CSS Performance
jonrohan
1031
460k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
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でフォーム作る⼈にオススメ