Formの複雑さに立ち向かう

自己紹介 HN じょうげん Github bmthd X(Twitter) @j_ktwr スタック TS, Go,
Javaなど

Agenda • Formの悩み • Conformのご紹介 • 実装吸収層で実現するシンプルなform実装

Formの悩み

従来のHTMLにおけるFormといえば…

React Hook Formの場合

Conformのご紹介 Conformは、Server Actionsを前提に設計された新世代のフォームライブラリです。

Conformを使うとここまで削れます！

実装吸収層で実現する、シンプルなform実装

その他のConformの嬉しみ • Selectコンポーネント、動的入力欄、チェックボックスグループなどの複雑なUIにも対応 • FormData経由で同期的アクセス • リアクティブな状態へのアクセスももちろん可能！ • アクセシビリティ属性を自動でセット
• サーバー側検証対応。フロントとバックでスキーマ共有や、バンドルサイズ圧縮が可能 • Progressive Enhancement • サーバーでしか行えない検証をシームレスに実装可能 • SPAでの利用ももちろん可能

まとめ • Conformは、フォームの複雑さに立ち向かうための新しい選択肢です。 • 実装がシンプルであり、UIの構築に集中することができます。 • Conformドキュメント • 紹介した実装の動作サンプル
exp.bmth.dev

Formの複雑さに立ち向かう

Formの複雑さに立ち向かう

じょうげん

More Decks by じょうげん

Other Decks in Programming

Featured

Transcript