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