Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Formの複雑さに立ち向かう
Search
じょうげん
February 14, 2025
Programming
1
2.9k
Formの複雑さに立ち向かう
Conformを使った実装の紹介を交えつつ、Formの複雑さを軽減する手法を提案します。
じょうげん
February 14, 2025
Tweet
Share
More Decks by じょうげん
See All by じょうげん
コールバックchildrenでロジックの見通しを改善する
bmthd
0
12
Other Decks in Programming
See All in Programming
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
4
770
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
290
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
120
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
160
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
160
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
160
Porting a visionOS App to Android XR
akkeylab
0
440
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
140
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Code Reviewing Like a Champion
maltzj
524
40k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Language of Interfaces
destraynor
158
25k
Typedesign – Prime Four
hannesfritz
42
2.7k
Bash Introduction
62gerente
613
210k
Unsuck your backbone
ammeep
671
58k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
GitHub's CSS Performance
jonrohan
1031
460k
Gamification - CAS2011
davidbonilla
81
5.4k
Transcript
Formの複雑さに立ち向かう
自己紹介 HN じょうげん Github bmthd X(Twitter) @j_ktwr スタック TS, Go,
Javaなど
Agenda • Formの悩み • Conformのご紹介 • 実装吸収層で実現するシンプルなform実装
Formの悩み
従来のHTMLにおけるFormといえば…
React Hook Formの場合
None
Conformのご紹介 Conformは、Server Actionsを前提に設計された新世代の フォームライブラリです。
Conformを使うとここまで削れます!
None
実装吸収層で実現する、シンプルなform実装
None
None
None
その他のConformの嬉しみ • Selectコンポーネント、動的入力欄、チェックボックスグループな どの複雑なUIにも対応 • FormData経由で同期的アクセス • リアクティブな状態へのアクセスももちろん可能! • アクセシビリティ属性を自動でセット
• サーバー側検証対応。フロントとバックでスキーマ共有や、バンド ルサイズ圧縮が可能 • Progressive Enhancement • サーバーでしか行えない検証をシームレスに実装可能 • SPAでの利用ももちろん可能
まとめ • Conformは、フォームの複雑さに立ち向かうための新しい選択 肢です。 • 実装がシンプルであり、UIの構築に集中することができます。 • Conformドキュメント • 紹介した実装の動作サンプル
exp.bmth.dev