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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
kamijin_fanta
January 12, 2021
Technology
0
2.7k
Reactとフォームとスキーマバリデーション / React forms with Schema Validation
kamijin_fanta
January 12, 2021
Tweet
Share
More Decks by kamijin_fanta
See All by kamijin_fanta
2025-09-22 Iceberg, Trinoでのログ基盤構築と パフォーマンス最適化
kamijin_fanta
1
740
2025-04-14 Data & Analytics 井戸端会議 Multi tenant log platform with Iceberg
kamijin_fanta
1
580
IoT向けストレージにTiKVを採用したときの話 / 2024-10-25 TiUG Meetup 3 Using TiKV as IoT storage
kamijin_fanta
0
150
TrinoとIcebergで ログ基盤の構築 / 2023-10-05 Trino Presto Meetup
kamijin_fanta
1
2.2k
Unicodeと符号化形式
kamijin_fanta
0
1.1k
2020/05/25 さくらのクラウド向けツールを使いこなす
kamijin_fanta
3
350
2019-01-24 業務でのOSSとの関わり方
kamijin_fanta
7
5k
関数型言語で始めるネットワークプログラミング
kamijin_fanta
0
1.2k
2018-11-10 Akka-HTTPで作るAPIサーバ
kamijin_fanta
2
4k
Other Decks in Technology
See All in Technology
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
miu_crescent
PRO
2
170
Context Engineeringの取り組み
nutslove
0
320
プロダクト成長を支える開発基盤とスケールに伴う課題
yuu26
4
1.3k
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
oracle4engineer
PRO
1
120
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
13k
15 years with Rails and DDD (AI Edition)
andrzejkrzywda
0
180
Webhook best practices for rock solid and resilient deployments
glaforge
1
280
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
shibayu36
0
210
ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup
torounit
0
460
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
1k
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
zepprix
0
430
GitLab Duo Agent Platform × AGENTS.md で実現するSpec-Driven Development / GitLab Duo Agent Platform × AGENTS.md
n11sh1
0
130
Featured
See All Featured
Practical Orchestrator
shlominoach
191
11k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
96
Chasing Engaging Ingredients in Design
codingconduct
0
110
Evolving SEO for Evolving Search Engines
ryanjones
0
120
Measuring & Analyzing Core Web Vitals
bluesmoon
9
750
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
0
140
We Have a Design System, Now What?
morganepeng
54
8k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
240
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
64
Exploring anti-patterns in Rails
aemeredith
2
250
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
200
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
57
50k
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でフォーム作る⼈にオススメ