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
ドメイン駆動設計のエッセンス
masuda220
PRO
10
2.2k
CSC509 Lecture 08
javiergs
PRO
0
260
SODA - FACT BOOK(JP)
sodainc
1
8.9k
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
Catch Up: Go Style Guide Update
andpad
0
260
NIKKEI Tech Talk#38
cipepser
0
270
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.2k
チームの境界をブチ抜いていけ
tokai235
0
230
Pythonに漸進的に型をつける
nealle
1
130
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Site-Speed That Sticks
csswizardry
13
930
Testing 201, or: Great Expectations
jmmastey
45
7.7k
A designer walks into a library…
pauljervisheath
209
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
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