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.9k
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
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
330
TypeScriptでDXを上げろ! Hono編
yusukebe
3
870
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
280
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
500
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
コーディングエージェント概観(2025/07)
itsuki_t88
0
410
MCPで実現できる、Webサービス利用体験について
syumai
7
2.1k
What's new in Adaptive Android development
fornewid
0
110
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
32
8.8k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Code Reviewing Like a Champion
maltzj
524
40k
4 Signs Your Business is Dying
shpigford
184
22k
Building Applications with DynamoDB
mza
95
6.5k
Speed Design
sergeychernyshev
32
1k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Producing Creativity
orderedlist
PRO
346
40k
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