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
Formの複雑さに立ち向かう
Search
じょうげん
February 14, 2025
Programming
1
3k
Formの複雑さに立ち向かう
Conformを使った実装の紹介を交えつつ、Formの複雑さを軽減する手法を提案します。
じょうげん
February 14, 2025
Tweet
Share
More Decks by じょうげん
See All by じょうげん
TanStack DB ~状態管理の新しい考え方~
bmthd
2
620
コールバックchildrenでロジックの見通しを改善する
bmthd
0
17
Other Decks in Programming
See All in Programming
CSC305 Lecture 04
javiergs
PRO
0
230
実践AIチャットボットUI実装入門
syumai
7
2.4k
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.1k
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
770
Build your own WebP codec in Swift
kishikawakatsumi
2
890
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
310
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
460
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
2
130
株式会社 Sun terras カンパニーデック
sunterras
0
200
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
2
360
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
私はどうやって技術力を上げたのか
yusukebe
43
17k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Agile that works and the tools we love
rasmusluckow
331
21k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Become a Pro
speakerdeck
PRO
29
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
BBQ
matthewcrist
89
9.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
570
Transcript
Formの複雑さに立ち向かう
自己紹介 HN じょうげん Github bmthd X(Twitter) @j_ktwr スタック TS, Go,
Javaなど
Agenda • Formの悩み • Conformのご紹介 • 実装吸収層で実現するシンプルなform実装
Formの悩み
従来のHTMLにおけるFormといえば…
React Hook Formの場合
None
Conformのご紹介 Conformは、Server Actionsを前提に設計された新世代の フォームライブラリです。
Conformを使うとここまで削れます!
None
実装吸収層で実現する、シンプルなform実装
None
None
None
その他のConformの嬉しみ • Selectコンポーネント、動的入力欄、チェックボックスグループな どの複雑なUIにも対応 • FormData経由で同期的アクセス • リアクティブな状態へのアクセスももちろん可能! • アクセシビリティ属性を自動でセット
• サーバー側検証対応。フロントとバックでスキーマ共有や、バンド ルサイズ圧縮が可能 • Progressive Enhancement • サーバーでしか行えない検証をシームレスに実装可能 • SPAでの利用ももちろん可能
まとめ • Conformは、フォームの複雑さに立ち向かうための新しい選択 肢です。 • 実装がシンプルであり、UIの構築に集中することができます。 • Conformドキュメント • 紹介した実装の動作サンプル
exp.bmth.dev