複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計

Slide 1

Slide 1 text

複雑性の高いオブジェクト編集に向き合う   プラガブルな Reactフォーム設計     @2024/12/12 ～Tech-Front Meetup～一歩先のフロントエンドへ   1

Slide 2

Slide 2 text

Slide 3

Slide 3 text

© 2024 RightTouch Inc. 3 自己紹介  2020 東京大学理学系研究科博士課程修了     2020-2021 日立製作所    2021-2024 株式会社プレイド    2021-現在株式会社RightTouch      レーザー物理で博士号取得後、日立製作所で ITプラットフォームの設計・開発に従事。    その後、プレイド/RightTouchで、テックリード/フルスタックエンジニアとしてアプリケーション開発に従事。       好きなもの: 旬      齋藤成之  X: @nakaakist 

Slide 4

Slide 4 text

© 2024 RightTouch Inc. 会社紹介  沿革   2021年12月株式会社RightTouch設立  2022年3月次世代のコンタクトセンターを創ることに賛同いただいた   お客様との実証実験を経て、 KARTE RightSupport（β版）  をリリース 2023年10月 Webサイトとコールセンターの分断をなくし、問い合わせ体験を抜本から変革する新プロダクト「 RightConnect by KARTE」β版を提供開始  2023年10月 RightSupport by KARTEの正式版をリリース     主な導入企業様設立：2021年12月  従業員：40名、うちエンジニア15名（2024年8月1日現在）  資本金：10,000,000円（資本準備金含む）   RightTouch 4

Slide 5

Slide 5 text

Slide 6

Slide 6 text

© 2024 RightTouch Inc. フォームの複雑性   6 我々の取り組むBtoB SaaSでは特に、業務要件を反映した複雑なフォームが必要な場面がある   一方、世の中に出ている事例はそれほど多くないのでは ?  →本発表では、我々のプロダクト事例から、一つのフォーム設計の形を提示できればと思っています   シンプルなフォーム    React-hook-formなどのライブラリ、または useState による管理で簡単に実装   複雑なフォーム    編集対象オブジェクト・画面の特性   により最適な設計を都度考える必要性   ● 編集対象オブジェクトの深いネスト   ● 項目数の増加  ● 動的に変化する編集項目   ● 項目をまたぐバリデーション    

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

© 2024 RightTouch Inc. RightTouchの具体例: サポートアクションオブジェクト   9 サポートアクションはパーツの組み合わせとして構成される。  各パーツには、それぞれ様々なタイプが存在。プロダクトの進化とともにタイプはどんどん増えていく   Module ⾒出し Module FAQ Transition 秒数経過 Transition エラー表⽰ Component  コーチマーク    …  …  …  SupportAction  10秒経過  エラー表示  サポートアクションUI  オブジェクト構造 

Slide 10

Slide 10 text

© 2024 RightTouch Inc. RightTouchの具体例: サポートアクションエディタ   1 0 多数のパーツを 1画面で、リアルタイムプレビューつきで編集するフォーム       機能要件  ● 動的に変化する編集項目   ● 各パーツをまたぐバリデーション   ● 1画面に編集を収める     非機能要件  ● パーツの種類が増加しても、保守性、開発生産性を維持できる   ● パフォーマンスへの要求はそれほどシビアではない 

Slide 11

Slide 11 text

Slide 12

Slide 12 text

© 2024 RightTouch Inc. フォームライブラリ : React Hook Formの採用  1 2 編集対象オブジェクトのステート管理、バリデーションなどを一手に任せられる   生のuseStateなどの利用に比べ、コード量の大幅な削減が可能   ※類似のフォームライブラリもあるが、今後の安定性、複雑な型に対する適応力、我々の学習コスト等から今回は React Hook Formを採用  ref: https://zenn.dev/manalink_dev/articles/winter-react-form-mokumoku-meetup-report 

Slide 13

Slide 13 text

Slide 14

Slide 14 text

© 2024 RightTouch Inc. ステート管理の分岐点   1 4 パーツパーツ useForm  丸ごとステート管理   オブジェクト全体を1つのuseFormで丸ごとステート管理するか、パーツごとに細分化するか？   → 関心事をなるべく分け、個々のステートをシンプルにするため開発当初数ヶ月は細分化する方式を採用   パーツパーツ useForm  useForm  パーツごとにステート単位を細分化  

Slide 15

Slide 15 text

Slide 16

Slide 16 text

© 2024 RightTouch Inc. オブジェクトを丸ごと React Hook Formでステート管理する際の課題   1 6 適切なReactコンポーネント分割  型安全性とパフォーマンス 2  1  ステートは一つだが、 Reactコンポーネントはパーツごとに分解し、その中ではあたかも小規模なフォームを開発しているようにしたい  複雑なオブジェクトを React Hook Formで扱う場合、型計算に限界が生じる部分がある。  

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

© 2024 RightTouch Inc. この方針で実装した結果   2 2 施策 good 施策 more ● フォーム内でのデータの取り回しを簡便に⾏いつつ、Reactコンポーネントはモジュール化し型安全に、という⽬論⾒は達成できている ● 8ヵ⽉程度運⽤し、パーツの種類の追加も⼤きな問題なくスムーズに⾏えている ● React Hook Formで巨⼤なオブジェクトを扱うにあたって、細かいライブラリのバグを踏むこともあった(※) ※ https://github.com/react-hook-form/react-hook-form/issues/11937

Slide 23

Slide 23 text

© 2024 RightTouch Inc. まとめ  2 3 ● 複雑なオブジェクトのフォーム作成における設計事例を紹介 ○ React Hook Formに⼯夫を加え、オブジェクト全体を管理させることで、バリデーションやステート管理をライブラリに任せつつ、プラガブルにパーツを⾜していけるフォームを実装 ○ 課題もまだあるものの、安定的に運⽤できている ● 複雑なフォームであっても、なるべくシンプルな状態(=1ステートで丸ごと管理)から始めて、徐々に分割を検討する⽅針の⽅が結果的には良かった ● 今回のような⽅針はハマるケースとそうでないケースがある。下記要件によって⾒極める必要がある ○ パーツ間のフォームの独⽴性 ○ バリデーションの要件 ○ フォームsubmitの形式とタイミング(e.g., ウィザード形式か1画⾯か)

Slide 24

Slide 24 text