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
310
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
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
150
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
120
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
9
4.3k
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
420
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
170
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
290
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
9.9k
フィンテック養成勉強会#56
finengine
0
130
エラーとアクセシビリティ
schktjm
0
1k
RSCの時代にReactとフレームワークの境界を探る
uhyo
9
3k
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
aeonpeople
0
200
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
290
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building Adaptive Systems
keathley
43
2.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Producing Creativity
orderedlist
PRO
347
40k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A better future with KSS
kneath
239
17k
How GitHub (no longer) Works
holman
315
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
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でフォーム作る⼈にオススメ