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
sainu
March 30, 2023
Programming
2
860
基盤システムへのマイクロフロントエンドの活用事例
「Fintech SaaSにおける品質を高めるためのフロントエンド開発論」での発表で利用したスライドです。
sainu
March 30, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
Swift Concurrency - 状態監視の罠
objectiveaudio
2
520
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
150
理論と実務のギャップを超える
eycjur
0
140
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.7k
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
開発生産性を上げるための生成AI活用術
starfish719
3
970
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
420
CSC509 Lecture 06
javiergs
PRO
0
260
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
4.1k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
220
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
It's Worth the Effort
3n
187
28k
Context Engineering - Making Every Token Count
addyosmani
6
250
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Bash Introduction
62gerente
615
210k
How STYLIGHT went responsive
nonsquared
100
5.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
We Have a Design System, Now What?
morganepeng
53
7.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Transcript
基盤システムへのマイクロ フロントエンドの活用事例 2023/03/30 @sainu(株式会社マネーフォワード)
自己紹介
自己紹介 • sainu / 道祖克理(さいのうかつとし) • Ruby, TypeScript • マネーフォワードでは基盤プロダクトを開発
• 2022/09〜 岐阜市に移住 冷やしたぬきそば / 更科 みそベトコンラーメン / 香楽 カプサイメン / カプサイメン 岐阜タンメンも良いが...
このスライドについて 全てを話すには時間が足りないので、薄く広くなってしまいました 🙏 消化不良の方はこちら👇 マイクロサービスのその先へ。マネーフォワードのビジネスを加速するマイクロフロントエンドという選 択 ただ、記事に書けてないことも話します 🤭
目次 • 解決したい課題 • マイクロフロントエンドとは • どのように実践したか • 課題 •
所感
解決したい課題
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続ける 📈
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続けた 📈 • これらサービスの基盤となる機能がサービスに個別最適化さ れリリース🚢
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続ける 📈 • これらサービスの基盤となる機能がサービスに個別最適化さ れリリース🚢 • 各サービスで似たような機能がリリースされても複数サービス を併用するユーザーは少なかった
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続ける 📈 • これらサービスの基盤となる機能がサービスに個別最適化さ れリリース🚢 • 各サービスで似たような機能がリリースされても複数サービス を併用するユーザーは少なかった
• が...事業が成長しサービスを併用するするユーザーが増えて 課題が顕著に ◦ サービス間でデータが同期されておらず、持っている データ構造が違うために、 ユーザーが複数のサービス でデータを同期する手間が繰り返し発生 😇
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続ける 📈 • これらサービスの基盤となる機能がサービスに個別最適化さ れリリース🚢 • 各サービスで似たような機能がリリースされても複数サービス を併用するユーザーは少なかった
• が...事業が成長しサービスを併用するするユーザーが増えて 課題が顕著に ◦ サービス間でデータが同期されておらず、持っている データ構造が違うために、 ユーザーが複数のサービス でデータを同期する手間が繰り返し発生 😇 • いくつもの開発チームが同じ機能を繰り返し開発するコストが 発生。UI/UX、品質がバラバラ
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続ける 📈 • これらサービスの基盤となる機能がサービスに個別最適化さ れリリース🚢 • 各サービスで似たような機能がリリースされても複数サービス を併用するユーザーは少なかった
• が...事業が成長しサービスを併用するするユーザーが増えて 課題が顕著に ◦ サービス間でデータが同期されておらず、持っている データ構造が違うために、 ユーザーが複数のサービス でデータを同期する手間が繰り返し発生 😇 • いくつもの開発チームが同じ機能を繰り返し開発するコストが 発生。UI/UX、品質がバラバラ • 今後も新規サービスに同様の開発が発生することが想定
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続ける 📈 • これらサービスの基盤となる機能がサービスに個別最適化さ れリリース🚢 • 各サービスで似たような機能がリリースされても複数サービス を併用するユーザーは少なかった
• が...事業が成長しサービスを併用するするユーザーが増えて 課題が顕著に ◦ サービス間でデータが同期されておらず、持っている データ構造が違うために、 ユーザーが複数のサービス でデータを同期する手間が繰り返し発生 😇 • いくつもの開発チームが同じ機能を繰り返し開発するコストが 発生。UI/UX、品質がバラバラ • 今後も新規サービスに同様の開発が発生することが想定 なんとかせにゃいかん!!
マイクロフロントエンドとは
マイクロ フロントエンド 複数の小さなフロントエンドアプリケー ションを組み合わせて大きなアプリ ケーションを構築するアーキテクチャ パターン
マイクロフロントエンドの利点 1.開発速度向上 開発・デプロイが独立したことで開発速度が向上 2.技術異質性 サービスに適した言語で開発が可能に 3.障害の局所化 障害時に影響範囲が限定的に 4.変更容易性 バグ修正や機能追加が容易に 5.再利用性
サービスが他のプロジェクトで再利用できる 出典: micro-frontends.org
マイクロフロントエンドの統合パターン ビルドタイム ランタイム アプローチ コンテナアプリのビルド時にマイクロフロント エンドをインストールする 独立して配置されたマイクロフロント エンドを動的にロードする パフォーマンス ⚠(重複リソースをバンドルしないように注
意) ❌ セキュリティ ✅ ⚠(適切なセキュリティポリシーや CORS設定を適用する) 技術スタックの柔軟さ ❌ ✅ デプロイ ❌ ✅高いスケーラビリティ 依存管理の複雑さ ✅ ⚠(マイクロフロントエンド間の互換 性を保つためのガバナンスやコミュニ ケーションが必要) ユーザーに一つのアプリケーションとして見せるために ...
マイクロフロントエンドの分割パターン 1.水平分割 画面内の要素で分割、 1つの画面上に複数のフロントエンドアプリケーションが同居 例 Spotify、マクアケ 2.垂直分割 ルーティング単位で分割、 1画面に1アプリケーション 例
CircleCI、日経電子版 出典: マイクロフロントエンド
思うに...
「こうあるべき」という形は無い
「こうあるべき」という形は無い 0か100かでもない
型にハメる必要はない コンテナ アプリ 水平分割なら... 構成要素は全てマイクロフロントエンドになっ ているのが理想! そんなことは無い マイクロフロント エンド
マイクロフロント エンド マイクロフロント エンド マイクロフロント エンド
型にハメる必要はない ページ 垂直分割なら... 全てのページがマイクロフロントエンドとして分 離されているのが理想! そんなことは無い ページ ページ ページ
ページ ページ ページ マイクロフロントエ ンド
サービス特性や規模、抱えている課題、開発組織の文化や状況 置かれている状況によって解は違う
今自分が置かれている状況で どうあるべきかを柔軟に考えるのが大事
どのように実践したか
分割、統合 分割 • 特定URLのコンテンツ(垂直) • あるボタン(水平) • 画面の一部のUI(水平) 水平or垂直はあまり意識せず、どの機能をどういう形で提供すべきか?で考えた 統合方法
• ビルドタイム? ランタイム? 👉 ランタイム ◦ デプロイの独立性を優先 • iframe? JS? web components? FW? SSI? 👉 web components ◦ Web標準API ◦ 属性値の変更検知やライフサイクルをサポート • クライアント? サーバー? エッジ? 👉 クライアント ◦ SSOの要件なし ◦ CSRやSSR様々なアプリがある
どう実装したか • アプリケーションはReactで開発 • Reactアプリをカスタム要素として登録する JSを配信 • コンテナアプリはHTMLにカスタム要素を記述しJSを読み込むことでランタイム統合を実現 • 後方互換性のない変更に備えて
JSのURLにバージョンを含める (https://path/to/v1/xxx.js ) • サービスのバックエンドをAPI Gateway兼認証サーバーとしてリクエストを認証 • マイクロフロントエンド間のデータ共有 ◦ URLのクエリ ◦ CustomEventで変更通知 詳しくはzennの記事に書いてます 👉マイクロサービスのその先へ。マネーフォワードのビジネスを加速するマイクロ フロントエンドという選択
意識したこと • なるべく特定フレームワークに依存せずに Web標準APIで作ること。 • 統合されるサービス数が多く、使われている技術も多種多様。 • サービスチームに統合のために新たなツールの導入をさせない。
課題
課題 • フロントエンドとバックエンドを統合テストするために統合レイヤーとなるサービス をセットアップする必要がある。 ◦ マイクロフロントエンド単体でエンドツーエンドの開発ができる状態が理想 ...
所感
所感 1. 特定領域の開発をUIからインフラまで専門チームに移譲することには成功した 2. たくさんの製品を抱えるマネーフォワードクラウドにおいては、共通基盤機能を UI/UXごと再利 用性を持たせて切り出せるマイクロフロントエンドは、ビジネスとの相性は良いと思った。 3. システムの作りが複雑化することは避けられないので、それなりに組織やシステムが大きくなけ れば、得られる価値よりも運用コストの方が高そう。
4. マイクロフロントエンドに、ベストプラクティスが あるない 5. 1チームで複数のマイクロフロントエンドを管理するような状態は間違っている 6. 異なるチームのマイクロフロントエンドでブラウザ上の通信が必要な時は慎重に a. 依存関係の管理が必要になって運用難易度が上がる b. データの同期はバックエンドで行う
ご清聴ありがとう ございました