$30 off During Our Annual Pro Sale. View Details »
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.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
700
2025-04-14 Data & Analytics 井戸端会議 Multi tenant log platform with Iceberg
kamijin_fanta
1
520
IoT向けストレージにTiKVを採用したときの話 / 2024-10-25 TiUG Meetup 3 Using TiKV as IoT storage
kamijin_fanta
0
140
TrinoとIcebergで ログ基盤の構築 / 2023-10-05 Trino Presto Meetup
kamijin_fanta
1
2.1k
Unicodeと符号化形式
kamijin_fanta
0
1.1k
2020/05/25 さくらのクラウド向けツールを使いこなす
kamijin_fanta
3
340
2019-01-24 業務でのOSSとの関わり方
kamijin_fanta
7
5k
関数型言語で始めるネットワークプログラミング
kamijin_fanta
0
1.1k
2018-11-10 Akka-HTTPで作るAPIサーバ
kamijin_fanta
2
3.9k
Other Decks in Technology
See All in Technology
AWS運用を効率化する!AWS Organizationsを軸にした一元管理の実践/nikkei-tech-talk-202512
nikkei_engineer_recruiting
0
170
たまに起きる外部サービスの障害に備えたり備えなかったりする話
egmc
0
400
AI駆動開発の実践とその未来
eltociear
1
480
AI駆動開発ライフサイクル(AI-DLC)の始め方
ryansbcho79
0
140
マイクロサービスへの5年間 ぶっちゃけ何をしてどうなったか
joker1007
19
7.5k
MySQLとPostgreSQLのコレーション / Collation of MySQL and PostgreSQL
tmtms
1
1.2k
Strands AgentsとNova 2 SonicでS2Sを実践してみた
yama3133
1
1.8k
1人1サービス開発しているチームでのClaudeCodeの使い方
noayaoshiro
2
580
Amazon Bedrock Knowledge Bases × メタデータ活用で実現する検証可能な RAG 設計
tomoaki25
6
2.3k
Microsoft Agent Frameworkの可観測性
tomokusaba
1
110
AWSに革命を起こすかもしれない新サービス・アップデートについてのお話
yama3133
0
500
Building Serverless AI Memory with Mastra × AWS
vvatanabe
0
460
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
304
21k
Into the Great Unknown - MozCon
thekraken
40
2.2k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
290
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
210
Leadership Guide Workshop - DevTernity 2021
reverentgeek
0
160
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
0
88
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
170
Measuring & Analyzing Core Web Vitals
bluesmoon
9
710
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
130
Git: the NoSQL Database
bkeepers
PRO
432
66k
The untapped power of vector embeddings
frankvandijk
1
1.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でフォーム作る⼈にオススメ