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
進化的フロントエンドリアーキテクトの事例
Search
Yuta Takahashi
October 31, 2023
Programming
2
780
進化的フロントエンドリアーキテクトの事例
BARフロントえんどう #1 「フロントエンドリアーキテクト」で発表したLTのスライドです。
https://cybozu.connpass.com/event/297123/
Yuta Takahashi
October 31, 2023
Tweet
Share
More Decks by Yuta Takahashi
See All by Yuta Takahashi
Storybook駆動開発でフロントエンドリアーキテクトに立ち向かう
ytakahashii
11
2k
Other Decks in Programming
See All in Programming
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
820
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
450
ProxyによるWindow間RPC機構の構築
syumai
3
1.1k
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
260
rage against annotate_predecessor
junk0612
0
160
Rancher と Terraform
fufuhu
2
240
Namespace and Its Future
tagomoris
6
700
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
230
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
290
AI時代のUIはどこへ行く?
yusukebe
16
8.6k
testingを眺める
matumoto
1
140
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Producing Creativity
orderedlist
PRO
347
40k
Code Review Best Practice
trishagee
70
19k
Designing Experiences People Love
moore
142
24k
A Tale of Four Properties
chriscoyier
160
23k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
The Language of Interfaces
destraynor
161
25k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
4 Signs Your Business is Dying
shpigford
184
22k
Fireside Chat
paigeccino
39
3.6k
Statistics for Hackers
jakevdp
799
220k
Transcript
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