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
770
進化的フロントエンドリアーキテクトの事例
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
1.9k
Other Decks in Programming
See All in Programming
XP, Testing and ninja testing
m_seki
2
140
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
380
Is Xcode slowly dying out in 2025?
uetyo
1
180
A comprehensive view of refactoring
marabesi
0
970
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
カクヨムAndroidアプリのリブート
numeroanddev
0
430
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
760
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
280
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
330
Create a website using Spatial Web
akkeylab
0
290
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A Tale of Four Properties
chriscoyier
160
23k
The Language of Interfaces
destraynor
158
25k
What's in a price? How to price your products and services
michaelherold
245
12k
Practical Orchestrator
shlominoach
188
11k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Agile that works and the tools we love
rasmusluckow
329
21k
Fireside Chat
paigeccino
37
3.5k
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