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
3.1k
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
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.9k
Catch Up: Go Style Guide Update
andpad
0
180
dynamic!
moro
9
6.7k
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
990
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
190
CSC305 Lecture 03
javiergs
PRO
0
230
CSC305 Lecture 02
javiergs
PRO
1
260
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.5k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Site-Speed That Sticks
csswizardry
11
880
How STYLIGHT went responsive
nonsquared
100
5.8k
Producing Creativity
orderedlist
PRO
347
40k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Bash Introduction
62gerente
615
210k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
BBQ
matthewcrist
89
9.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
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