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
820
基盤システムへのマイクロフロントエンドの活用事例
「Fintech SaaSにおける品質を高めるためのフロントエンド開発論」での発表で利用したスライドです。
sainu
March 30, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
890
ふつうの技術スタックでアート作品を作ってみる
akira888
1
830
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
PipeCDのプラグイン化で目指すところ
warashi
1
270
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
5つのアンチパターンから学ぶLT設計
narihara
1
170
NPOでのDevinの活用
codeforeveryone
0
830
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Code Reviewing Like a Champion
maltzj
524
40k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Faster Mobile Websites
deanohume
307
31k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Scaling GitHub
holman
460
140k
Designing Experiences People Love
moore
142
24k
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. データの同期はバックエンドで行う
ご清聴ありがとう ございました