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
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
3
280
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
20
8.1k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
XP, Testing and ninja testing
m_seki
3
250
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
110
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
160
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
530
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
How to train your dragon (web standard)
notwaldorf
96
6.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Bash Introduction
62gerente
613
210k
GitHub's CSS Performance
jonrohan
1031
460k
Navigating Team Friction
lara
187
15k
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