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
k2491p
February 22, 2023
Programming
1
380
モノリスからマイクロフロントエンドに踏み出した話
k2491p
February 22, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
生成AI時代のコンポーネントライブラリの作り方
touyou
1
180
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
140
Discover Metal 4
rei315
2
130
AIともっと楽するE2Eテスト
myohei
3
950
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
640
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
6.7k
XP, Testing and ninja testing
m_seki
3
240
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
350
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Navigating Team Friction
lara
187
15k
Become a Pro
speakerdeck
PRO
29
5.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Building an army of robots
kneath
306
45k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Visualization
eitanlees
146
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Six Lessons from altMBA
skipperchong
28
3.9k
How STYLIGHT went responsive
nonsquared
100
5.6k
Transcript
モノリスからマイクロフロ ントエンドに踏み出した話 2023/02/22 1
技術戦略って何? プロダクトの抱える問題点 解決策 よさ と つらみ 将来的な話 01 02 03
04 05 2
| 01 技術戦略って何? | SaaSにおける フロントエンドの技術戦略 3
SaaSにおけるフロントエンドの技術戦略 4
”技術戦略”って何? 5
辞書で調べてみると... ① いくさのはかりごと。特に、戦いに勝つための大局的な方法や策略。戦術より上位の概念。 ② ある目的を達成するために大局的に事を運ぶ方策。特に、政治闘争、企業競争などの長期的な策略。 6 戦略とは – コトバンク 精選版
日本国語大辞典より https://kotobank.jp/word/%E6%88%A6%E7%95%A5-89017
フロントエンドの技術戦略 ↓ フロントエンドの技術において、 ある目的を達成するための方策 7
”ある目的”って何? 8
今回はSaaSという文脈なので... ユーザーに価値を提供すること 9 ある目的とは
変化に柔軟に対応し ユーザーに継続的に価値を提供すること 10 ある目的とは(もう一声)
フロントエンドの技術戦略 ↓ フロントエンドの技術において、 ユーザーに継続的に価値を提供するための方策 11
FORCASの開発における問題 ユーザーに継続的に価値を提供する という視点を踏まえて | 02 プロダクトの抱える問題点 | 12
営業DXソリューション • ABMの実践や営業生産性向上を支援する ◦ 国内企業150万社、業界560区分、利用サービス1,600種 類など、様々なデータを分析し、戦略実行と効果測定 を行う • 2017年5月にリリース ◦
以降、6年にわたって新規開発や保守を行っている 13 FORCASとは
アーキテクチャーはざっくりこんな感じ 14 FORCASの開発における問題点 そこそこでかい front そこそこでかい core-api api1 api2 api3
モノリス 認証に必要 な情報
こんな問題が浮上しました • 他の画面の修正が影響を与える可能性がある • デプロイに時間がかかる ◦ リグレッションテスト全部通す • ビッグバンリリースになりがち •
認知負荷が高い 15 FORCASの開発における問題点 “変化に柔軟に対応し、ユーザーに継続的に価値を提供すること” に反している
マイクロフロントエンド導入 ユーザーに継続的に価値を提供する という視点を踏まえて | 03 解決策 | 16
17 マイクロフロントエンド https://micro-frontends.org
18 マイクロフロントエンド https://micro-frontends.org
19 マイクロフロントエンド https://micro-frontends.org micro frontend1 bff1 micro service1 micro frontend2
bff2 micro service2
20 FORCASに導入したマイクロフロントエンドのアーキテクチャー そこそこでかい front そこそこでかい core-api api1 api2 api3 Micro
Frontend auth-api bff api モノリス 認証に必要 な情報
マイクロフロントエンド導入 して感じたこと ユーザーに継続的に価値を提供する という視点を踏まえて | 04 よさ と つらみ |
21
よかったこと FORCASにマイクロフロントエンドを導入してみて • 独立したデプロイが可能 ◦ デプロイの時間が抑えられる ◦ モノリス側にとらわれない • マイクロフロントエンドの修正時に、モノリス側にバグ混入の可能性が(基本的に)ない
• 細かいリリースをした • 認知負荷の減少 • 技術選択ができた 22 “変化に柔軟に対応し、ユーザーに継続的に価値を提供すること
つらかったこと FORCASにマイクロフロントエンドを導入してみて • モノリスに追加していくより短期的にはコストが高い ◦ パイプラインの作成 ◦ 認証周りの実装 • 情報がそれほど豊富ではない
23
マイクロフロントエンドで こんな世界が作れたらいいな ユーザーに継続的に価値を提供する という視点を踏まえて | 05 将来的な話| 24
25 プロダクト間でマイクロフロントエンドをシェア Product B Micro Frontend Product A
26 プロダクト間でマイクロフロントエンドをシェア Product B マイクロフロントエンド群 Micro Frontend1 Micro Frontend2 Micro
Frontend3 Micro Frontend4 Micro Frontend5 Micro Frontend6 Product C Product D Product A
今日の結論 | xx 余談 | 27
マイクロフロントエンドはいいぞ 28
「この技術便利そう」「この技術面白い」と 興味を持って取り組むことは、とても良いこ と。ただ”戦略”という枠組みにおいては、組 織としての目的や課題を踏まえた選択をする と良いかもしれませんね。 目的と課題に沿って 技術戦略を策定する 29
最後までご清聴ありがとうございました。 Thank you 30