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
850
Formの複雑さに立ち向かう
Conformを使った実装の紹介を交えつつ、Formの複雑さを軽減する手法を提案します。
じょうげん
February 14, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
260
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
250
チームリードになって変わったこと
isaka1022
0
200
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
320
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
160
Writing documentation can be fun with plugin system
okuramasafumi
0
120
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
560
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
110
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
2
280
color-scheme: light dark; を完全に理解する
uhyo
3
310
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
120
GAEログのコスト削減
mot_techtalk
0
120
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
KATA
mclloyd
29
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Embracing the Ebb and Flow
colly
84
4.6k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Side Projects
sachag
452
42k
How GitHub (no longer) Works
holman
314
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Building Your Own Lightsaber
phodgson
104
6.2k
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