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
2.8k
Formの複雑さに立ち向かう
Conformを使った実装の紹介を交えつつ、Formの複雑さを軽減する手法を提案します。
じょうげん
February 14, 2025
Tweet
Share
More Decks by じょうげん
See All by じょうげん
コールバックchildrenでロジックの見通しを改善する
bmthd
0
12
Other Decks in Programming
See All in Programming
Team operations that are not burdened by SRE
kazatohiei
1
210
C++20 射影変換
faithandbrave
0
530
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.3k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
470
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
370
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
530
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
500
生成AIで日々のエラー調査を進めたい
yuyaabo
0
650
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
200
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
How GitHub (no longer) Works
holman
314
140k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Side Projects
sachag
455
42k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Unsuck your backbone
ammeep
671
58k
Designing Experiences People Love
moore
142
24k
BBQ
matthewcrist
89
9.7k
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