<html><head></head><body><p>12/12 に開催されたレバテックさんの「<a href="https://levtechcareer.connpass.com/event/337755/" target="_blank" rel="noreferrer">～Tech-Front Meetup～ 一歩先のフロントエンドへ</a>」で React Hook Form を用いたフォーム開発について登壇しました。</p>
<p>本記事では、発表のサマリーとスライドの補足を簡単に行います。資料についてはこちらをご覧ください。</p>
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;"><iframe title="複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計" src="https://speakerdeck.com/player/21629e102a784cfcba40cb9309c88789" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen="" scrolling="no"></iframe></div>
<h2 id="複雑性の高いフォーム設計の背景">複雑性の高いフォーム設計の背景</h2>
<p>RightTouch では、Web サポートプラットフォーム「<a href="https://rightsupport.karte.io/" target="_blank" rel="noreferrer">RightSupport by KARTE</a>」の一部として、クライアントの Web サイト上にパーソナライズされたコンテンツを埋め込む「サポートアクション」機能を提供しています。</p>
<p>このサポートアクションは、ネストや配列を含む複雑なオブジェクト構造を持ち、クライアントの要望に応じて柔軟にカスタマイズ可能な設計が求められています。</p>
<p><img src="https://ik.imagekit.io/righttouch/fa177cda-3608-4150-9de4-ac76245c28ea/241212-rhf-01.png" alt="241212-rhf-01.png"></p>
<p>上記背景から、サポートアクションのエディタには以下のような課題がありました。</p>
<ul>
<li>編集対象オブジェクトの深いネスト</li>
<li>項目数の増加</li>
<li>動的に変化する編集項目</li>
<li>項目間のバリデーション</li>
</ul>
<p><img src="https://ik.imagekit.io/righttouch/87e226eb-965f-4b69-8f35-fc9103f304a1/241212-rhf-02.png" alt="241212-rhf-02.png"></p>
<p>これらの課題をクリアするために、フォーム設計には特に工夫を凝らしました。</p>
<h2 id="React Hook Form の採用">React Hook Form の採用</h2>
<p>まず、複雑なオブジェクト編集に対応するため、ベースのフレームワークとして React Hook Form（以下RHF）を採用しました。その理由は以下の通りです。</p>
<h3 id="ステート管理とバリデーションの一元化">ステート管理とバリデーションの一元化</h3>
<p>フォーム全体のステート管理とバリデーションをRHFに任せることで、コード量の削減や開発の効率化が可能と考えました。</p>
<p><img src="https://ik.imagekit.io/righttouch/ddaaa01a-2ecb-480d-9673-2febb89f8c0c/241212-rhf-03.png" alt="241212-rhf-03.png"></p>
<p>類似のフォームライブラリもありますが、今後の安定性、複雑な型に対する適応力、学習コスト等から今回はReact Hook Formを採用しました。</p>
<p>参考：<a href="https://zenn.dev/manalink_dev/articles/winter-react-form-mokumoku-meetup-report" target="_blank" rel="noreferrer">打倒React Hook Formを掲げてもくもく会を主催したが、結局Rhf強ぇ〜ってなった話</a></p>
<h3 id="ネスト/配列を持つデータ構造への対応力">ネスト/配列を持つデータ構造への対応力</h3>
<p>ドットでプロパティ名を繋ぐことで深いネストを持つオブジェクトにも対応可能な点も、複雑なオブジェクトのサポートアクションと相性が良かったです。</p>
<p><img src="https://ik.imagekit.io/righttouch/61860f9c-ef8d-4c77-976c-56cfa966a750/241212-rhf-04.png" alt="241212-rhf-04.png"></p>
<h2 id="フォームの設計方針と課題解決">フォームの設計方針と課題解決</h2>
<h3 id="ステート管理の粒度">ステート管理の粒度</h3>
<p>開発当初は、関心事を分離しステートをシンプルに保つため、パーツごとに <code>useForm</code> を分割していました。</p>
<p><img src="https://ik.imagekit.io/righttouch/8c0eedf7-cb35-4ec6-8d34-f99aac5d989e/241212-rhf-05.png" alt="241212-rhf-05.png"></p>
<p>しかし、運用して行く中で、異なるパーツ間でデータやバリデーション結果を参照する必要が増えコードの複雑化を招いてしまいました。</p>
<p>これを解決するため、フォーム全体を 1 つの <code>useForm</code> で管理する方針に変更しました。</p>
<p><img src="https://ik.imagekit.io/righttouch/bd43cf0b-ac42-4456-bac0-7c2e5c5201b2/241212-rhf-06.png" alt="241212-rhf-06.png"></p>
<p>これにより、データの同期やバリデーションの一元化が可能となり、保守性と開発効率が向上しました。</p>
<p>ステートの管理を1つにまとめる一方で、Reactコンポーネントはなるべく粒度を小さく保つため、<code>useFormContext</code> を用いたモジュール分割を行っています。</p>
<h3 id="型安全性の課題と工夫">型安全性の課題と工夫</h3>
<p>React Hook Form に巨大なオブジェクトを扱わせる場合、ユニオン型をうまく型安全に扱えないことや、型計算が複雑化し、TypeScript のコンパイル限界に達することもありました。この問題を以下の方法で解決しました。</p>
<h4 id="サブタイプの導入">サブタイプの導入</h4>
<p>各パーツ専用の軽量な型を定義し、<code>useFormContext</code> にはその型を渡すことで型計算の負担を軽減することで <strong>スケール可能かつ型安全</strong>な開発を行うことが可能になりました。</p>
<p><img src="https://ik.imagekit.io/righttouch/588131f4-6c6e-4ce0-bcba-d146f9cc4881/241212-rhf-07.png" alt="241212-rhf-07.png"></p>
<h4 id="型計算のボトルネックを特定しパフォーマンス改善">型計算のボトルネックを特定しパフォーマンス改善</h4>
<p><code>tsc --generateTrace</code> コマンドでtsコンパイル処理のトレースを取得することができます。</p>
<p>この結果から<strong>型計算のボトルネックを特定</strong>し、パフォーマンスを改善しました。</p>
<p><img src="https://ik.imagekit.io/righttouch/5e03398a-04e0-43ad-a385-41ddd00a9815/241212-rhf-08.png" alt="241212-rhf-08.png"></p>
<h2 id="運用実績と成果">運用実績と成果</h2>
<p>RightTouch では、サポートアクションをリリースして、この設計方針で約 8 か月運用してきました。</p>
<p>その間もパーツの追加や変更は行われていますが、初期設計時の目論見通りスムーズにできています。課題はあるものの、全体としては順調に運用されていると言えます。</p>
<h2 id="最後に">最後に</h2>
<p>RightTouchでは、クライアントの課題を解決するために複雑性の高いフォーム開発に自信のあるプロダクトエンジニアを絶賛採用中です。</p>
<p>少しでも興味を持った方がいればぜひお話ししましょう！</p>
<p>エンジニア求人情報の詳細<br>
<a href="https://righttouch.co.jp/jobs/engineer" target="_blank" rel="noreferrer">https://righttouch.co.jp/jobs/engineer</a></p>
<p>採用サイト<br>
<a href="https://righttouch.co.jp/recruitment" target="_blank" rel="noreferrer">https://righttouch.co.jp/recruitment</a></p>
</body></html>

React Hook Formを用いた複雑性の高いエディタ開発の設計