Web Componentsで実現する共通化と柔軟性　マネーフォワードのマイクロフロントエンド実践

マネーフォワードクラウドでは、さまざまな目的でマイクロフロントエンド（MFE）を導入しています。
今回はその中でも、複数サービスで共通して必要とされる承認機能を「共通ワークフロー」として切り出し、開発を進めた事例を紹介します。

マイクロフロントエンド導入の背景

マネーフォワードクラウドにおいて、MFEを導入した主な目的は、次の3点です。

• 複数サービスにまたがる共通機能の実装・更新を一元化し、各サービス側での開発・保守の負荷を大幅に軽減すること
• UIや操作フローを統一し、サービス間をまたいでも違和感のない一貫したユーザー体験を提供すること
• 各MFEチームがUIも含めて自律的に改善できる体制を整え、変化への柔軟な対応を可能にすること

マネーフォワードクラウドには多くのサービスがあり、ユーザーの課題に迅速に応えるために、それぞれが独立して開発・運用されています。
一方で、UIや共通機能が各サービスごとに個別実装されていたことで、UIの不統一やデータの二重管理、同様の機能の再実装による開発コストの増加といった課題が生じていました。

こうした背景から、ユーザーにとっては一貫した操作感を、開発者にとっては複数サービスで再利用可能な設計を両立する必要がありました。

導入時の課題と工夫

アプリケーション構成図

私たちはMFEの統合方式として、各サービスのビルドに依存しないランタイム統合を採用しました。
これにより、共通機能を即時に展開できるようになり、ユーザーに対して価値をすばやく届けることが可能になります。
一方で、障害が発生した際には全サービスに影響が及ぶリスクもありますが、その対応責任をMFEチームが担うことで、スピードと安定性のバランスを保っています。

技術選定では、スタイルの衝突を避けられる独立性や、特定のフレームワークに縛られず幅広い環境で活用できる拡張性を重視し、Web Componentsを採用しています。

また、主要な機能は動的に読み込む一方で、ボタンなどの共通UIコンポーネントはnpmパッケージとして提供し、各サービスに静的に組み込んでいます。これにより、ランタイム統合とUIの一貫性を両立し、MFEと各サービス間で統一されたユーザー体験を実現しています。

疎結合な連携のための工夫

MFEの設計においては、ホストアプリケーションがMFEの内部実装を意識せずに利用できるよう、両者の関係を疎結合に保つことを前提としました。
さらに、MFE同士の連携が必要な場面では、CustomEventを活用して、ホストアプリケーションを介さずにイベントを直接伝達できる仕組みを用いており、全体の結合度を抑えつつ、安全かつ柔軟な機能連携が可能になりました。

この設計により、異なる技術スタックを採用する複数サービス間でも、統一されたユーザー体験と、継続的な機能提供の両立を実現しています。

現在の課題や今後の展望について

これまでは、チームごとに目的に応じてMFEを導入してきました。

その結果、実装方式や認証、バージョン管理にばらつきが生まれ、新たにMFEを取り入れる際にどのように進めるのが最も効果的か分かりづらい状況になっていました。また、知見の共有が進まず、似たような機能を何度も実装してしまうなど、非効率も目立つようになってきました。

今後は、Web Componentsを軸とした共通ライブラリの整備や、セキュリティを意識した連携方式の標準化、技術方針の明確化などを通じて、誰もが安心してMFEを導入・運用できるような基盤を整えていきます。個別最適ではなく、組織全体として一貫性のある取り組みができるよう、開発者にとって迷わない選択肢を用意していく方針です。

また、MFEの活用が広がる中で、複数のサービスが連携してひとつの画面や体験を構成するケースも増えています。これにより柔軟な設計や再利用がしやすくなる一方で、ユーザーの操作に対してどこで何が起きているのか、全体の動きを把握しづらい場面も出てきました。特に、サービスをまたいで起こる事象の確認や対応には工夫が必要で、調査や改善に時間がかかることもあります。
今後は、そうした全体の流れをより把握しやすくする仕組みを整えることで、継続的な改善と安定した運用につなげていきたいと考えています。

◆執筆：
株式会社マネーフォワード マネーフォワードビジネスカンパニー
業務基盤開発本部 ワークフロー基盤開発部 ワークフローエンジングループ
金子優斗
@kyntk_1128