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
IoT向けストレージにTiKVを採用したときの話 / 2024-10-25 TiUG Meetup 3 Using TiKV as IoT storage
kamijin_fanta
0
66
TrinoとIcebergで ログ基盤の構築 / 2023-10-05 Trino Presto Meetup
kamijin_fanta
1
1.5k
Unicodeと符号化形式
kamijin_fanta
0
970
2020/05/25 さくらのクラウド向けツールを使いこなす
kamijin_fanta
3
300
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
440
2017-09-09 Scala Kansai Summit - Akka Streams
kamijin_fanta
3
1.5k
Other Decks in Technology
See All in Technology
「ラベルにとらわれない」エンジニアでいること/Be an engineer beyond labels
kaonavi
0
170
開発現場とセキュリティ担当をつなぐ脅威モデリング
cloudace
0
110
Dapr For Java Developers SouJava 25
salaboy
1
130
Amazon Q Developer 他⽣成AIと⽐較してみた
takano0131
1
120
Go製のマイグレーションツールの git-schemalex の紹介と運用方法
shinnosuke_kishida
1
420
サーバシステムを無理なくコンテナ移行する際に伝えたい4つのポイント/Container_Happy_Migration_Method
ozawa
1
110
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
20
19k
銀行でDevOpsを進める理由と実践例 / 20250317 Masaki Iwama
shift_evolve
1
110
どっちの API SHOW?SharePoint 開発における SharePoint REST API Microsoft Graph API の違い / Which API show? Differences between Microsoft Graph API and SharePoint REST API
karamem0
0
110
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
セマンティックレイヤー入門
ikkimiyazaki
9
3.3k
頻繁リリース × 高品質 = 無理ゲー? いや、できます!/20250306 Shoki Hyo
shift_evolve
0
160
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
12
1.4k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
480
BBQ
matthewcrist
88
9.5k
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でフォーム作る⼈にオススメ