2023/10/31 髙橋 佑太 / Yuta Takahashi 進化的フロントエンドリアーキテクト の事例 BARフロントえんどう #1 「フロントエンドリアーキテクト」

自己紹介：髙橋 佑太 (Yuta Takahashi) 2021年に現職に新卒入社 医療機関向けCLINICSのフロントエンド改善のリードを担当 よく触る技術：React周りのフロントとRuby on Rails 最近の趣味：ワイン X(Twitter): @Wakeupsloth 2

概要 1. 進化的フロントエンドリアーキテクト 2. 進化的フロントエンドリアーキテクトの事例 3. まとめ 3

1. 進化的フロントエンド リアーキテクト 4

進化的フロントエンドリアーキテクト ● 長年運用されてきたプロダクトでは、DXやUXなどの様々な側面でモ ダンフロントエンドとの世代的なギャップが生じる機会が多い ● 機能開発と並行しながら長期戦で複数の次元を漸進的にリアーキテ クトしていくことが求められる ○ 最初からすべてを解決することは難しい ● リアーキテクトの中で発見した新たな痛み・より良いやり方を分析 し、リアーキテクトプロセス/成果に漸進的に反映していく考え方を 本発表では”進化的フロントエンドリアーキテクト”と呼ぶ 1.進化的フロントエンドリアーキテクト 5

元ネタ：進化的アーキテクチャ ”進化的アーキテクチャとは、複数の次元にわたる 漸進的で誘導的な変更を支援するものである” ”変化が予測できない中でもアーキテクチャは良い 方向に進むことができるということを強調するた め、我々はこうしたアーキテクチャを「進化的 アーキテクチャ」と称した” →フロントエンドリアーキテクトに通ずる考え方 が多く紹介されている 1.進化的フロントエンドリアーキテクト 6

2. 進化的フロントエンド リアーキテクトの事例 7

クラウド診療支援システムCLINICS 2.進化的フロントエンドリアーキテクトの事例 引用：https://clinics-cloud.com/ 8

クラウド診療支援システムCLINICS ● 医療機関向けSaaS（電子カルテ、オンライン診療等を提供） ● リリースから約7年が経過 ● 画面数は160を超えている ● バックエンド（Ruby on Rails）からindex.htmlとJSを返して ブラウザでレンダリングする古典的なSPA 2.進化的フロントエンドリアーキテクトの事例 9

進化的に以下の技術スタックへ移行 リアーキテクト前 リアーキテクト後（現在） 言語 JavaScript TypeScript UIライブラリ Mithril React 状態管理 Redux (すべての状態管理を集約 ) Tanstack Query react-hook-form(RHF) & zod Redux (必要なGlobal Stateのみ) スタイリング Sass & CSS Modules Emotion (CSS in JS) 腐敗防止層 なし あり テスト Jest (Unit) MagicPod(E2E) Jest (Unit, Integration) MagicPod(E2E) Testing Library (Integration) storycap & reg-suit (VRT) 2.進化的フロントエンドリアーキテクトの事例 10

進化の過程：挑戦フェーズ 1. Mithril + JS の React + TS化 ○ ページ(パス）単位で実施 ○ Mithrilで実装されているコンポーネントを機械的にReact化 ○ 新しい画面はReactで実装可能になった ○ UIライブラリ以外の世代ギャップは残り続けた 2. 非同期状態管理の適正化v1 (Redux -> React State) ○ 一部の画面でReact化と同時に進行 ○ 非同期状態管理を扱う軽量なフックを独自で実装した ○ 開発者が増えると色々な実装パターンが出てきて痛みとなった 2.進化的フロントエンドリアーキテクトの事例 11

進化の過程：改善フェーズ 3. 共通UIコンポーネントの刷新 (Sass & CSS Modules -> CSS in JS) ○ I/Fの統一、デザイントークンの整備、Storybookの導入 ○ 新機能のページごとに最低限必要なUIを揃えて段階的に刷新 4. フォーム状態管理の適正化 (Redux -> RHF) ○ テンプレート記述削減によるDX向上、UX向上 ○ 新機能の実装で評価を行い全体に波及 2.進化的フロントエンドリアーキテクトの事例 12

進化の過程：改善フェーズ 5. 非同期状態管理の適正化v2 (Redux -> Tanstack Query) ○ 通信周辺ロジック・ディレクトリ構造を定形化（コピペ可能に） ○ ドメインロジックを保護するための腐敗防止層を導入 ■ フロントエンドテスト文化の醸成を開始 ○ 複雑度の高い新機能の実装時にリファクタリングする形式で導入・ 評価し、その後全体に波及 6. 品質の向上のための取り組み ○ Storybookエコシステムを活用したテストの導入と推進 2.進化的フロントエンドリアーキテクトの事例 13

まとめ ● 進化的フロントエンドリアーキテクトの事例を紹介した ○ 漸進的にリアーキテクトプロセス/成果を改善する ● 新機能で評価してから既存機能へ展開していくとうまくいった ● 定期的にコード・プロセスを振り返ることが大切 ○ 発生した痛みや世代ギャップを小さく維持する 14