IT 技書の森

マイクロフロントエンド

フロントエンドをチームごとに独立した小さなアプリケーションに分割し、個別にデプロイ可能にするアーキテクチャ

フロントエンドアーキテクチャ

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

マイクロフロントエンド (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)

// チーム 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 でのホスティング

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

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

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

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

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

関連用語