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

Formの複雑さに立ち向かう

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for じょうげん じょうげん
February 14, 2025
Programming
3.4k
1

 Formの複雑さに立ち向かう

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

Avatar for じょうげん

じょうげん

February 14, 2025

More Decks by じょうげん

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

Other Decks in Programming

See All in Programming
20年以上続くプロダクトでも使い続けられる静的解析ツールを求めて
Avatar for Atsushi Matsuo matsuo_atsushi
0
150
cloudnative conference 2026 flyle
Avatar for azihsoyn azihsoyn
1
190
ふにゃっとしない名前の付け方 〜哲学で茹で上げる、コシのあるソフトウェア設計〜
Avatar for akshimo shimomura
0
120
Structured Concurrency, Scoped Values and Joiners in the JDK 25 26 27
Avatar for José josepaumard
1
150
AWSはOSSをどのように 考えているのか？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
0
120
Oxlintはいかにしてtsgolintのlint ruleを呼び出しているのか
Avatar for syumai syumai
0
220
Lightning-Fast Method Calls with Ruby 4.1 ZJIT / RubyKaigi 2026
Avatar for Takashi Kokubun k0kubun
3
3.1k
サーバーレスで作る、動画データ管理基盤
Avatar for Keigo Ibaraki oyasumipants
0
210
要はバランスからの卒業 #yumemi_grow
Avatar for Takuma Kajikawa kajitack
0
170
2026年のソフトウェア開発を考える（2026/05版） / Software Engineering Scrum Fest Niigata 2026 Edition
Avatar for Takuto Wada twada
PRO
23
13k
運転動画を検索可能にする〜Cosmos-Embed1とDatabricks Vector Searchで〜/cosmos-embed1-databricks-vector-search
Avatar for 開発室Graph studio_graph
3
960
開発とはなにか、Essenceカーネルで見えるもの
Avatar for ukin0k0 ukin0k0
0
190

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.2k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
120
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
620
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
370
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
180
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
220
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
190
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
110
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
52k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
50k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
250

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