Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
100
読みやすいコードとはなにか？ 未来の自分とチームへの思いやり
Avatar for じょうげん bmthd
0
510
Yamada UIドキュメント v2紹介
Avatar for じょうげん bmthd
0
760
TanStack DB ~状態管理の新しい考え方~
Avatar for じょうげん bmthd
2
1.2k
コールバックchildrenでロジックの見通しを改善する
Avatar for じょうげん bmthd
0
46

Other Decks in Programming

See All in Programming
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
1
560
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
300
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
Avatar for Yusa Matsuda myus4a
0
200
AGENTS.md Is Not Enough: Build Skills, Don't Download Them
Avatar for Alex T lx_t
0
130
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
330
Vibes Containers 〜AIで変わるコンテナ設計と運用〜
Avatar for Tetsuya Kikuchi tkikuc
3
560
Building an Out-of-Order CPU
Avatar for Latte72 latte72
1
790
Intent as Code
Avatar for Shoppingjaws shoppingjaws
6
1.1k
マイコン向けの軽量Ruby「PicoRuby」で各種デバイスを制御するネイティブアプリの実現手法
Avatar for bash0C7 bash0c7
0
430
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
410
選挙速報を多くのユーザーへ 届ける Live Activities 設計
Avatar for kengo saito hamayokokuririn
0
150
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
Avatar for Yoshifumi Kawai neuecc
4
3.3k

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
4k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
830
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.4k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
4
10k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
670
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.7k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
600
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k

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