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
3.1k
Formの複雑さに立ち向かう
Conformを使った実装の紹介を交えつつ、Formの複雑さを軽減する手法を提案します。
じょうげん
February 14, 2025
Tweet
Share
More Decks by じょうげん
See All by じょうげん
Yamada UIドキュメント v2紹介
bmthd
0
75
TanStack DB ~状態管理の新しい考え方~
bmthd
2
710
コールバックchildrenでロジックの見通しを改善する
bmthd
0
18
Other Decks in Programming
See All in Programming
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
850
One Enishi After Another
snoozer05
PRO
0
160
CSC305 Lecture 08
javiergs
PRO
0
280
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
100
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
Go言語の特性を活かした公式MCP SDKの設計
hond0413
2
560
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
360
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Developer Joy - The New Paradigm
hollycummins
1
370
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Making Projects Easy
brettharned
120
6.4k
Agile that works and the tools we love
rasmusluckow
331
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
BBQ
matthewcrist
89
9.9k
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