第三回：マイクロフロントエンドの実装パターン入門
「マイクロフロントエンドはいいことは分かったけど、実際どうやって作るの？」
「うちのプロジェクトにはどの方法が合ってるんだろう？」
マイクロフロントエンドの実装方法は実は複数あります。
今回は、主要な実装パターンを、できるだけ分かりやすく解説していきます。
よく使われる3つの実装パターン
マイクロフロントエンドの実装パターンは、大きく分けて3つあります
iframeで分ける
JavaScriptで動的に組み込む
サーバーサイドで組み立てる
それぞれの特徴を見ていきましょう。
1. iframeパターン - いちばんシンプル！
<!-- メインのHTML -->
<html>
<body>
<h1>私のECサイト</h1>
<!-- 商品検索アプリ -->
<iframe src="http://search.myapp.com"></iframe>
<!-- カートアプリ -->
<iframe src="http://cart.myapp.com"></iframe>
</body>
</html>メリット
実装が超カンタン
アプリ同士が完全に分離される
既存サイトへの導入が容易
デメリット
アプリ間の連携が難しい
画面遷移が不自然になりがち
レスポンシブ対応が大変
2. JavaScriptパターン - 柔軟な実装が可能！
// メインのアプリ
async function loadApp(name) {
// 各アプリを動的にロード
const content = await fetch(`http://${name}.myapp.com`);
const container = document.getElementById(name);
container.innerHTML = await content.text();
}
// 使い方
loadApp('search'); // 商品検索アプリを読み込み
loadApp('cart'); // カートアプリを読み込みメリット
なめらかな画面遷移
アプリ間の連携が容易
モダンな開発手法が使える
デメリット
実装が少し複雑
初期ロードに時間がかかる可能性
3. サーバーサイドパターン - SEOにも強い！
// サーバーサイドでHTMLを組み立てる
async function renderPage() {
const header = await fetchComponent('header');
const search = await fetchComponent('search');
const cart = await fetchComponent('cart');
return `
<div>${header}</div>
<div>${search}</div>
<div>${cart}</div>
`;
}メリット
SEO対策がしやすい
初期表示が早い
従来のSSR知識が活かせる
デメリット
サーバーの負荷が高い
開発環境の準備が必要
どのパターンを選べばいい？
以下のような基準で選んでみましょう
iframeパターンが向いているケース
とにかく早く始めたい
アプリ間の独立性を重視
既存システムへの影響を最小限にしたい
JavaScriptパターンが向いているケース
SPAのような体験を提供したい
アプリ間の連携が多い
モダンな開発手法を使いたい
サーバーサイドパターンが向いているケース
SEOが重要
初期表示の速度を重視
サーバーサイドの知見が豊富
実装の具体例
簡単な商品検索とカートの例を見てみましょう
// JavaScriptパターンでの実装例
const apps = {
search: {
url: 'http://search.myapp.com',
container: 'search-container'
},
cart: {
url: 'http://cart.myapp.com',
container: 'cart-container'
}
};
// アプリをロードする関数
async function loadApp(name) {
const app = apps[name];
const response = await fetch(app.url);
const html = await response.text();
document.getElementById(app.container).innerHTML = html;
}
// 画面遷移時の処理
window.addEventListener('popstate', () => {
const page = getCurrentPage();
loadApp(page);
});次のステップ
今回は基本的な実装パターンを見てきましたが、実際の開発ではもっと詳細な実装方法を知る必要があります。
次回は、最近特に注目を集めている「Module Federation」という実装方法について、より詳しく解説していきます。