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
730
進化的フロントエンドリアーキテクトの事例
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.8k
Other Decks in Programming
See All in Programming
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
430
PHPのガベージコレクションを深掘りしよう
rinchoku
0
240
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
240
CTFのWebにおける⾼難易度問題について
hamayanhamayan
1
980
今から始めるCursor / Windsurf / Cline
kengo_hayano
0
110
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
180
ローコードサービスの進化のためのモノレポ移行
taro28
1
330
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.5k
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
360
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
570
Windows版PHPのビルド手順とPHP 8.4における変更点
matsuo_atsushi
0
370
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
41
2.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Automating Front-end Workflow
addyosmani
1369
200k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
How STYLIGHT went responsive
nonsquared
99
5.4k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
GitHub's CSS Performance
jonrohan
1030
460k
Gamification - CAS2011
davidbonilla
81
5.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
102
18k
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