Formの複雑さに立ち向かう

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

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の場合
8. Conformのご紹介 Conformは、Server Actionsを前提に設計された新世代の フォームライブラリです。
9. Conformを使うとここまで削れます！
11. 実装吸収層で実現する、シンプルなform実装
15. その他のConformの嬉しみ • Selectコンポーネント、動的入力欄、チェックボックスグループな どの複雑なUIにも対応 • FormData経由で同期的アクセス • リアクティブな状態へのアクセスももちろん可能！ • アクセシビリティ属性を自動でセット • サーバー側検証対応。フロントとバックでスキーマ共有や、バンド ルサイズ圧縮が可能 • Progressive Enhancement • サーバーでしか行えない検証をシームレスに実装可能 • SPAでの利用ももちろん可能
16. まとめ • Conformは、フォームの複雑さに立ち向かうための新しい選択 肢です。 • 実装がシンプルであり、UIの構築に集中することができます。 • Conformドキュメント • 紹介した実装の動作サンプル exp.bmth.dev