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
190
IoT向けストレージにTiKVを採用したときの話 / 2024-10-25 TiUG Meetup 3 Using TiKV as IoT storage
kamijin_fanta
0
73
TrinoとIcebergで ログ基盤の構築 / 2023-10-05 Trino Presto Meetup
kamijin_fanta
1
1.6k
Unicodeと符号化形式
kamijin_fanta
0
990
2020/05/25 さくらのクラウド向けツールを使いこなす
kamijin_fanta
3
310
2019-01-24 業務でのOSSとの関わり方
kamijin_fanta
7
4.8k
関数型言語で始めるネットワークプログラミング
kamijin_fanta
0
1k
2018-11-10 Akka-HTTPで作るAPIサーバ
kamijin_fanta
2
3.7k
2018-06-30 Dockerで手に入れるデプロイ環境
kamijin_fanta
1
450
Other Decks in Technology
See All in Technology
3D生成AIのための画像生成
kosukeito
2
620
MySQL Indexes and Histograms – How they really speed up your queries
lefred
0
160
Azure & DevSecOps
kkamegawa
2
180
AI-in-the-Enterprise|OpenAIが公開した「AI導入7つの教訓」——ChatGPTで変わる企業の未来とは?
customercloud
PRO
0
160
AIによるコードレビューで開発体験を向上させよう!
moongift
PRO
0
420
『ささAI』ネタづくりをささえるAI📝 (にぼしいわし担当:GIFTech2025)
masapyon1212
0
110
AOAI で AI アプリを開発する時にまず考えたいこと
mappie_kochi
1
650
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2025年版)
infiniteloop_inc
4
14k
とあるEdTechベンチャーのシステム構成こだわりN選 / edtech-system
gotok365
3
170
テストって楽しい!開発を加速させるテストの魅力 / Testing is Fun! The Fascinating of Testing to Accelerate Development
aiandrox
0
170
ソフトウェアテスト 最初の一歩 〜テスト設計技法をワークで体験しながら学ぶ〜 #JaSSTTokyo / SoftwareTestingFirstStep
nihonbuson
PRO
1
140
自動化の第一歩 -インフラ環境構築の自動化について-
smt7174
1
120
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Into the Great Unknown - MozCon
thekraken
38
1.8k
Done Done
chrislema
184
16k
Building Applications with DynamoDB
mza
94
6.4k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How STYLIGHT went responsive
nonsquared
100
5.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
What's in a price? How to price your products and services
michaelherold
245
12k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Gamification - CAS2011
davidbonilla
81
5.3k
Raft: Consensus for Rubyists
vanstee
137
6.9k
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でフォーム作る⼈にオススメ