Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
690
2025-04-14 Data & Analytics 井戸端会議 Multi tenant log platform with Iceberg
kamijin_fanta
1
480
IoT向けストレージにTiKVを採用したときの話 / 2024-10-25 TiUG Meetup 3 Using TiKV as IoT storage
kamijin_fanta
0
130
TrinoとIcebergで ログ基盤の構築 / 2023-10-05 Trino Presto Meetup
kamijin_fanta
1
2k
Unicodeと符号化形式
kamijin_fanta
0
1.1k
2020/05/25 さくらのクラウド向けツールを使いこなす
kamijin_fanta
3
340
2019-01-24 業務でのOSSとの関わり方
kamijin_fanta
7
4.9k
関数型言語で始めるネットワークプログラミング
kamijin_fanta
0
1.1k
2018-11-10 Akka-HTTPで作るAPIサーバ
kamijin_fanta
2
3.9k
Other Decks in Technology
See All in Technology
Oracle Database@AWS:サービス概要のご紹介
oracle4engineer
PRO
0
120
セキュリティAIエージェントの現在と未来 / PSS #2 Takumi Session
flatt_security
3
1.4k
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
650
Modern Data Stack大好きマンが語るSnowflakeの魅力
sagara
0
280
技術以外の世界に『越境』しエンジニアとして進化を遂げる 〜Kotlinへの愛とDevHRとしての挑戦を添えて〜
subroh0508
1
160
AIにおける自由の追求
shujisado
3
470
useEffectってなんで非推奨みたいなこと言われてるの?
maguroalternative
9
6.2k
Digitization部 紹介資料
sansan33
PRO
1
6.1k
Oracle Cloud Infrastructure:2025年11月度サービス・アップデート
oracle4engineer
PRO
1
120
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
37k
AI時代におけるアジャイル開発について
polyscape_inc
0
100
Data Hubグループ 紹介資料
sansan33
PRO
0
2.3k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
58
6.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
380
We Have a Design System, Now What?
morganepeng
54
7.9k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Statistics for Hackers
jakevdp
799
230k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
Why Our Code Smells
bkeepers
PRO
340
57k
Being A Developer After 40
akosma
91
590k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
What's in a price? How to price your products and services
michaelherold
246
12k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.3k
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でフォーム作る⼈にオススメ