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
790
進化的フロントエンドリアーキテクトの事例
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
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
300
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.5k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
630
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
870
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
390
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
CSC509 Lecture 02
javiergs
PRO
0
410
Advance Your Career with Open Source
ivargrimstad
0
340
Featured
See All Featured
Site-Speed That Sticks
csswizardry
11
880
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Think Like a Performance Engineer
csswizardry
27
2k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Side Projects
sachag
455
43k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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