モジュールフェデレーション とは？

別々にビルドしたアプリのコードを、実行時に読み込んで組み合わせられるよ。Webpack 5で導入された機能として知られるけれど、それだけに限定された考え方ではなく、ほかのビルドツール向けの実装もある。ここではWebpackの仕組みを例に考えよう。

たとえば画面全体をまとめるHostが、カート用Remoteと決済用Remoteから画面部品を取得するんだ。別チームが作った部品を、一つの画面へ組み込める。HostとRemoteは役割の呼び方で、一つのアプリが公開と利用の両方を担うこともあるよ。

独立して公開できるのは利点だけれど、Hostが参照するURLや配信・キャッシュ、版の扱いによるよ。新しい部品がHostの想定と互換かも確認する必要がある。無条件に最新版へ切り替わって安全に動く、と保証する仕組みではないんだ。

sharedで依存関係を共有できるけれど、設定とバージョンの条件によるよ。要求する版が違えば、複数の版を使う場合もある。singletonは一つのインスタンスを使うための指定だが、それで互換性まで保証されるわけではない。共有しただけで必ず通信量が最小になるとは限らないんだ。

Webpackではexposesで公開する部品、remotesで参照先、sharedで共有する依存関係を設定するよ。その上で、取得失敗や互換性の崩れをどう扱うかを決める。マイクロフロントエンドを実現する手段の一つなので、独立公開の利点と、接続先や版を管理する手間を合わせて考えよう。