Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Formの複雑さに立ち向かう

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for じょうげん じょうげん
February 14, 2025
Programming
3.5k
1

 Formの複雑さに立ち向かう

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

Avatar for じょうげん

じょうげん

February 14, 2025

More Decks by じょうげん

See All by じょうげん
値・型・名前空間の「三重定義」で Reactコンポーネントをより柔軟に設計する TypeScript コンパニオンオブジェクト活用術
Avatar for じょうげん bmthd
0
120
読みやすいコードとはなにか？ 未来の自分とチームへの思いやり
Avatar for じょうげん bmthd
0
530
Yamada UIドキュメント v2紹介
Avatar for じょうげん bmthd
0
780
TanStack DB ~状態管理の新しい考え方~
Avatar for じょうげん bmthd
2
1.3k
コールバックchildrenでロジックの見通しを改善する
Avatar for じょうげん bmthd
0
50

Other Decks in Programming

See All in Programming
PyConTW 2026 - AI Coding 不只是工具升級, 區域醫院醫療資訊系統協作開發與資訊團隊轉型實踐
Avatar for Max Lai cclai999
0
220
Web Framework Benchmark Battle 2026, Any%
Avatar for Akira Matsuda a_matsuda
3
3.1k
クラウドエージェントは、 何がそんなに便利なのか / what makes cloud agents so useful
Avatar for r-kagaya rkaga
4
670
Event is what happens
Avatar for MOROHASHI Kyosuke moro
2
2.6k
HTML-in-Canvasで作る未来のWeb UI表現
Avatar for IKEDA Yasunobu clockmaker
5
6k
学びを記事・スライド・Xへ高速展開する― AI-assisted Learning Loopで回すコンテンツ生成術
Avatar for Ochtum ochtum
0
180
動画プレイヤーはなぜカクつくのか 〜Flutterのレンダリングとネイティブの境界を解剖する〜
Avatar for Naruo Yoshiki naruogram
0
320
JIS keyboard support in Omarchy
Avatar for LEF lef237
0
180
クラウドゲーミングのパフォーマンス最適化に挑む / Cloud Gaming Performance Tuning
Avatar for viviON vivion
0
310
Long Living Tokens, Die, Die, Die! (or: The One Ring is Banned in Modern)
Avatar for sylph01 sylph01
0
400
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
Avatar for aoshi aoshi
0
570
React Native에 현대적인 빌드 도구 더하기: Rollipop 구현기
Avatar for Geunhyeok LEE leegeunhyeok
0
170

Featured

See All Featured
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
600
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.9k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1.1k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
480
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
550
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.4k

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の場合

  7. None

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

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

  10. None

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

  12. None
  13. None
  14. None

  15. その他のConformの嬉しみ • Selectコンポーネント、動的入力欄、チェックボックスグループな どの複雑なUIにも対応 • FormData経由で同期的アクセス • リアクティブな状態へのアクセスももちろん可能！ • アクセシビリティ属性を自動でセット

    • サーバー側検証対応。フロントとバックでスキーマ共有や、バンド ルサイズ圧縮が可能 • Progressive Enhancement • サーバーでしか行えない検証をシームレスに実装可能 • SPAでの利用ももちろん可能

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

    exp.bmth.dev