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
810
Formの複雑さに立ち向かう
Conformを使った実装の紹介を交えつつ、Formの複雑さを軽減する手法を提案します。
じょうげん
February 14, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.2k
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
720
Conform を推す - Advocating for Conform
mizoguchicoji
3
690
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
140
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
240
Domain-Driven Transformation
hschwentner
2
1.9k
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
330
ARA Ansible for the teams
kksat
0
150
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
460
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
250
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Navigating Team Friction
lara
183
15k
Fireside Chat
paigeccino
34
3.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Faster Mobile Websites
deanohume
306
31k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
A Philosophy of Restraint
colly
203
16k
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