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
290
IoT向けストレージにTiKVを採用したときの話 / 2024-10-25 TiUG Meetup 3 Using TiKV as IoT storage
kamijin_fanta
0
93
TrinoとIcebergで ログ基盤の構築 / 2023-10-05 Trino Presto Meetup
kamijin_fanta
1
1.9k
Unicodeと符号化形式
kamijin_fanta
0
1k
2020/05/25 さくらのクラウド向けツールを使いこなす
kamijin_fanta
3
320
2019-01-24 業務でのOSSとの関わり方
kamijin_fanta
7
4.9k
関数型言語で始めるネットワークプログラミング
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
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
320
Exadata Database Service on Dedicated Infrastructure セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
1
360
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
140
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
AIエージェント就活入門 - MCPが履歴書になる未来
eltociear
0
250
いま、あらためて考えてみるアカウント管理 with IaC / Account management with IaC
kohbis
2
670
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
210
JOAI発表資料 @ 関東kaggler会
joai_committee
1
200
広島発!スタートアップ開発の裏側
tsankyo
0
200
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
11
1.6k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
260
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
For a Future-Friendly Web
brad_frost
179
9.9k
Visualization
eitanlees
146
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Optimizing for Happiness
mojombo
379
70k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
Balancing Empowerment & Direction
lara
2
580
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
How GitHub (no longer) Works
holman
315
140k
Side Projects
sachag
455
43k
The Language of Interfaces
destraynor
160
25k
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でフォーム作る⼈にオススメ