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

Formの複雑さに立ち向かう

Avatar for じょうげん じょうげん
February 14, 2025
Programming
1
2.6k

 Formの複雑さに立ち向かう

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

じょうげん

February 14, 2025
Tweet

Other Decks in Programming

See All in Programming
Vibe Coding の話をしよう
Avatar for schroneko schroneko
13
3.6k
API for docs
Avatar for Soutaro Matsumoto soutaro
3
1.6k
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
1
130
「理解」を重視したAI活用開発
Avatar for FastDOCTOR fast_doctor
0
270
Serving TUIs over SSH with Go
Avatar for Carlos Alexandro Becker caarlos0
0
540
Bedrock×MCPで社内ブログ執筆文化を育てたい！
Avatar for Har1101 har1101
7
1.4k
Browser and UI #2 HTML/ARIA
Avatar for ken7253 ken7253
2
170
flutter_kaigi_mini_4.pdf
Avatar for Hiroki Nobuta nobu74658
0
140
UMAPをざっくりと理解 / Overview of UMAP
Avatar for kaityo256 kaityo256
PRO
3
1.4k
AI時代の開発者評価について
Avatar for Ayuusu ayumuu
0
230
Rubyの!メソッドをちゃんと理解する
Avatar for Yuto Urushima alstrocrack
1
100
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
Avatar for Mete Atamel meteatamel
0
100

Featured

See All Featured
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
780
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
119
51k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
41
2.3k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.7k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.5k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
270
27k
Building an army of robots
Avatar for Kyle Neath kneath
305
45k
Code Review Best Practice
Avatar for Trisha Gee trishagee
67
18k

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