マイクロフロントエンド

マイクロフロントエンドとは

マイクロフロントエンド (Micro Frontends) は、マイクロサービスの考え方をフロントエンドに適用し、1 つの Web アプリケーションを複数の独立したフロントエンドアプリに分割するアーキテクチャである。各チームが独立して開発・デプロイできる。

モノリシック vs マイクロフロントエンド

モノリシックとマイクロフロントエンドの違いを以下にまとめる。

観点	モノリシック SPA	マイクロフロントエンド
デプロイ	全体を一括デプロイ	チームごとに個別デプロイ
技術スタック	統一 (React のみ等)	チームごとに選択可能
チーム独立性	低い (コンフリクト多発)	高い
初期コスト	低い	高い
適するチーム規模	小〜中	大規模 (3 チーム以上)

統合パターン

統合パターンを以下にまとめる。

パターン	説明	例
ビルド時統合	npm パッケージとして統合	Module Federation
ランタイム統合	iframe や Web Components で統合	single-spa
サーバーサイド統合	サーバーで HTML を合成	Tailor, Podium
エッジサイド統合	CDN で HTML を合成	CloudFront Functions

Module Federation (webpack 5)

Module Federation (webpack 5) のコード例を示す。

// チーム A: ヘッダーを公開
new ModuleFederationPlugin({
  name: 'header',
  filename: 'remoteEntry.js',
  exposes: { './Header': './src/Header' },
});

// チーム B: ヘッダーを利用
new ModuleFederationPlugin({
  name: 'main',
  remotes: { header: 'header@https://header.example.com/remoteEntry.js' },
});

// チーム B のコード
const Header = React.lazy(() => import('header/Header'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Header />
      <MainContent />
    </Suspense>
  );
}

AWS でのホスティング

AWS でのホスティングを図で示す。

CloudFront
  ├── /header/*  → S3 (チーム A)
  ├── /product/* → S3 (チーム B)
  └── /cart/*    → S3 (チーム C)

各チームが独立した S3 バケットにデプロイし、CloudFront のパスベースルーティングで統合する。

使うべきケース / 使うべきでないケース

使うべきケース / 使うべきでないケースを以下に示す。

✅ 使うべき	❌ 使うべきでない
3 チーム以上が 1 つの Web アプリを開発	小規模チーム (1〜2 人)
チームごとに独立したデプロイが必要	シンプルな SPA
レガシーの段階的な移行	新規プロジェクト (初期コストが高い)

実務での活用方法は関連書籍にも詳しい。