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
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
470
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
アセットのコンパイルについて
ojun9
0
130
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Reading Rails 1.0 Source Code
okuramasafumi
0
250
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
520
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
GitHub's CSS Performance
jonrohan
1032
460k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
A better future with KSS
kneath
239
17k
Faster Mobile Websites
deanohume
309
31k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Designing for humans not robots
tammielis
253
25k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
How to train your dragon (web standard)
notwaldorf
96
6.2k
KATA
mclloyd
32
14k
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