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
520
コールバックchildrenでロジックの見通しを改善する
bmthd
0
17
Other Decks in Programming
See All in Programming
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Navigating Dependency Injection with Metro
zacsweers
3
960
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
230
速いWebフレームワークを作る
yusukebe
5
1.7k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
450
Namespace and Its Future
tagomoris
6
700
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.3k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
440
概念モデル→論理モデルで気をつけていること
sunnyone
2
250
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
530
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Docker and Python
trallard
45
3.6k
Bash Introduction
62gerente
615
210k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Practical Orchestrator
shlominoach
190
11k
For a Future-Friendly Web
brad_frost
180
9.9k
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