Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Formの複雑さに立ち向かう
Slide 2
Slide 2 text
自己紹介 HN じょうげん Github bmthd X(Twitter) @j_ktwr スタック TS, Go, Javaなど
Slide 3
Slide 3 text
Agenda • Formの悩み • Conformのご紹介 • 実装吸収層で実現するシンプルなform実装
Slide 4
Slide 4 text
Formの悩み
Slide 5
Slide 5 text
従来のHTMLにおけるFormといえば…
Slide 6
Slide 6 text
React Hook Formの場合
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Conformのご紹介 Conformは、Server Actionsを前提に設計された新世代の フォームライブラリです。
Slide 9
Slide 9 text
Conformを使うとここまで削れます!
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
実装吸収層で実現する、シンプルなform実装
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
その他のConformの嬉しみ • Selectコンポーネント、動的入力欄、チェックボックスグループな どの複雑なUIにも対応 • FormData経由で同期的アクセス • リアクティブな状態へのアクセスももちろん可能! • アクセシビリティ属性を自動でセット • サーバー側検証対応。フロントとバックでスキーマ共有や、バンド ルサイズ圧縮が可能 • Progressive Enhancement • サーバーでしか行えない検証をシームレスに実装可能 • SPAでの利用ももちろん可能
Slide 16
Slide 16 text
まとめ • Conformは、フォームの複雑さに立ち向かうための新しい選択 肢です。 • 実装がシンプルであり、UIの構築に集中することができます。 • Conformドキュメント • 紹介した実装の動作サンプル exp.bmth.dev