Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Formの複雑さに立ち向かう

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for じょうげん じょうげん
February 14, 2025
Programming
3.5k
1

 Formの複雑さに立ち向かう

Conformを使った実装の紹介を交えつつ、Formの複雑さを軽減する手法を提案します。

Avatar for じょうげん

じょうげん

February 14, 2025

More Decks by じょうげん

See All by じょうげん
値・型・名前空間の「三重定義」で Reactコンポーネントをより柔軟に設計する TypeScript コンパニオンオブジェクト活用術
Avatar for じょうげん bmthd
0
70
読みやすいコードとはなにか？ 未来の自分とチームへの思いやり
Avatar for じょうげん bmthd
0
500
Yamada UIドキュメント v2紹介
Avatar for じょうげん bmthd
0
740
TanStack DB ~状態管理の新しい考え方~
Avatar for じょうげん bmthd
2
1.2k
コールバックchildrenでロジックの見通しを改善する
Avatar for じょうげん bmthd
0
35

Other Decks in Programming

See All in Programming
改善しないと、タスクが回らない。 “てんこ盛りポジション” を引き継いだ情シスの、入社3ヶ月の業務改善録
Avatar for Kurumi Watabe krm963
0
260
ここ半年くらいでAIに作らせたR用ツール
Avatar for eitsupi eitsupi
0
370
琵琶湖の水は止められてもNet--HTTPのリトライは止められない / You might be able to stop the water flow of Lake Biwa but you can't stop Net::HTTP retries
Avatar for luccafort luccafort
PRO
0
650
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
Avatar for Daisuke Garaike contour_gara
0
430
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
550
為什麼你並不需要ViewModel / No, you don't need a ViewModel
Avatar for Elvis Shi lovee
1
490
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
Avatar for endo shiki shiki_kakaku
0
1.7k
PHP初心者セッション2026　〜生成AIでは見えない裏側を知る：今だからLAMPを通して仕組みを学ぶ〜
Avatar for Hideo Kashioka kashioka
0
890
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
Avatar for freee freee
PRO
0
340
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
Avatar for Kenji Kono konokenj
3
770
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
Avatar for Ryo Tomidokoro hanhan1978
4
1.7k
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
250

Featured

See All Featured
A Soul's Torment
Avatar for Nat Ma seathinner
6
3.4k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
690
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
360
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
410
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
64
56k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.5k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
340
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
250
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k

Transcript

  1. Formの複雑さに立ち向かう

  2. 自己紹介 HN じょうげん Github bmthd X(Twitter) @j_ktwr スタック TS, Go,

    Javaなど

  3. Agenda • Formの悩み • Conformのご紹介 • 実装吸収層で実現するシンプルなform実装

  4. Formの悩み

  5. 従来のHTMLにおけるFormといえば…

  6. React Hook Formの場合

  7. None

  8. Conformのご紹介 Conformは、Server Actionsを前提に設計された新世代の フォームライブラリです。

  9. Conformを使うとここまで削れます！

  10. None

  11. 実装吸収層で実現する、シンプルなform実装

  12. None
  13. None
  14. None

  15. その他のConformの嬉しみ • Selectコンポーネント、動的入力欄、チェックボックスグループな どの複雑なUIにも対応 • FormData経由で同期的アクセス • リアクティブな状態へのアクセスももちろん可能！ • アクセシビリティ属性を自動でセット

    • サーバー側検証対応。フロントとバックでスキーマ共有や、バンド ルサイズ圧縮が可能 • Progressive Enhancement • サーバーでしか行えない検証をシームレスに実装可能 • SPAでの利用ももちろん可能

  16. まとめ • Conformは、フォームの複雑さに立ち向かうための新しい選択 肢です。 • 実装がシンプルであり、UIの構築に集中することができます。 • Conformドキュメント • 紹介した実装の動作サンプル

    exp.bmth.dev