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
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
130
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.3k
Go製CLIツールをnpmで配布するには
syumai
0
240
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
690
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
200
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
460
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
190
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
A Tale of Four Properties
chriscoyier
160
23k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Building an army of robots
kneath
306
45k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Done Done
chrislema
184
16k
It's Worth the Effort
3n
185
28k
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