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
870
Formの複雑さに立ち向かう
Conformを使った実装の紹介を交えつつ、Formの複雑さを軽減する手法を提案します。
じょうげん
February 14, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
Introduction to kotlinx.rpc
arawn
0
710
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
Pulsar2 を雰囲気で使ってみよう
anoken
0
240
動作確認やテストで漏れがちな観点3選
starfish719
6
1.1k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
560
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
190
Software Architecture
hschwentner
6
2.1k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
190
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
ソフトウェアエンジニアの成長
masuda220
PRO
12
1.9k
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.4k
WebDriver BiDiとは何なのか
yotahada3
1
150
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GitHub's CSS Performance
jonrohan
1030
460k
A better future with KSS
kneath
238
17k
Adopting Sorbet at Scale
ufuk
74
9.2k
Designing for Performance
lara
604
68k
Writing Fast Ruby
sferik
628
61k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
350
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
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