マイクロフロントエンドは、バックエンドのマイクロサービスの考え方をフロントエンドに適用したアーキテクチャパターンです。大規模なフロントエンドアプリケーションを独立してデプロイ可能な小さな単位に分割し、各チームが自律的に開発・運用できるようにします。
Spotify、IKEA、Zalandoなどの企業が採用しており、特に複数のチームが一つのフロントエンドを共同開発する大規模プロジェクトで効果を発揮します。チーム間の技術的な依存関係を減らし、独立したデプロイサイクルを実現することが主な目的です。
Webpack 5のModule Federationは、マイクロフロントエンドを実現する最も人気のある技術の一つです。複数の独立したビルドが、ランタイムでモジュールを動的に共有できます。
入会申込
ログイン// shell (ホストアプリケーション) - webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'shell',
remotes: {
productApp: 'productApp@http://localhost:3001/remoteEntry.js',
cartApp: 'cartApp@http://localhost:3002/remoteEntry.js',
},
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
},
}),
],
};
// product (リモートアプリケーション) - webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'productApp',
filename: 'remoteEntry.js',
exposes: {
'./ProductList': './src/components/ProductList',
'./ProductDetail': './src/components/ProductDetail',
},
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
},
}),
],
};
ホストアプリケーション（shell）がリモートアプリケーション（productApp、cartApp）のモジュールを動的にロードします。shared設定により、Reactなどのライブラリはシングルトンとして一度だけロードされます。
リモートモジュールをReactコンポーネントとして使用する例です。
import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const ProductList = lazy(() => import('productApp/ProductList'));
const Cart = lazy(() => import('cartApp/Cart'));
function App() {
return (
<suspense fallback="{Loading...}>
<route path="/products" element="{} />
<route path="/cart" element="{} />
);
}
lazy importとSuspenseを組み合わせることで、各マイクロフロントエンドが必要なタイミングでのみロードされます。
マイクロフロントエンドには複雑性が伴います。共有ライブラリのバージョン管理、CSS の衝突回避、アプリ間の状態共有、パフォーマンスへの影響など、考慮すべき点が多くあります。小規模なチーム（2〜3チーム以下）や、単一のフレームワークで統一されたプロジェクトでは、モノリポ構成の方が適切な場合がほとんどです。マイクロフロントエンドは組織のスケーリング問題を解決する手段でして、技術的な課題の解決手段ではないことを理解した上で導入を判断してください。
