マイクロフロントエンドは、大規模なフロントエンドアプリケーションを独立してデプロイ可能な小さな単位に分割するアーキテクチャです。従来の「水平的(Horizontal)」なアプローチ（1ページ内のコンポーネントごとの分割）とは異なり、垂直マイクロフロントエンド(Vertical Microfrontend, VMFE) では、URLパス全体を1つのチームが完全に所有します。例えば、/blog パスのすべて（フレームワーク、ライブラリ、CI/CD）を1つのチームが責任を持ちます。これにより、マーケティングサイトはAstroで、ダッシュボードはReactで構築するなど、チームごとに最適な技術スタックを選択しながら、ユーザーには1つの統合されたアプリケーションのように見せることが可能になります。Cloudflareが最近発表した新しいWorkerテンプレートは、このVMFE構築を簡素化します。詳細な根拠資料は Cloudflare公式ブログ でご確認いただけます。
核心概念：ルーターワーカーとサービスバインディング
垂直マイクロフロントエンドアーキテクチャの核心は、入ってくるリクエストを適切なチームのワーカーにルーティングする 「ルーターワーカー(Router Worker)」 にあります。Cloudflareの サービスバインディング(Service Binding) 機能を使用すると、ルーターワーカーは公開URLを経由せずに、他のワーカー（マーケティング、ドキュメント、ダッシュボードチームのワーカー）を直接呼び出すことができます。
ルーターワーカーの wrangler.toml（または wrangler.json）設定の例は以下の通りです。
{
"$schema": "./node_modules/wrangler/config-schema.json",
"name": "router",
"main": "./src/router.js",
"services": [
{ "binding": "HOME", "service": "worker_marketing" },
{ "binding": "DOCS", "service": "worker_docs" },
{ "binding": "DASH", "service": "worker_dash" }
]
}
上記の設定により、HOME、DOCS、DASH というバインディング名を通じて、それぞれの独立したワーカーサービスを参照できるようになります。
実務適用時の考慮点比較
| 項目 | 垂直マイクロフロントエンド(VMFE) | 従来型モノリス/水平的MFE |
|---|---|---|
| チーム自律性 | 非常に高い。パスごとにフレームワーク、ツール、デプロイパイプラインを独立して選択可能。 | 低い。統合された技術スタックとデプロイプロセスを共有する必要がある。 |
| デプロイリスク | 低い。1つのチームのデプロイ失敗が他のパスに影響を与えない。 | 高い。モノリス内の変更がアプリ全体のロールバックを引き起こす可能性がある。 |
| UX統合の難易度 | 中程度。CSS View Transitions、Speculation Rulesで補完可能。 | 低い。単一コードベース内で自然に統合される。 |
| 運用複雑さ | 高い。複数の独立サービスにわたる監視、ロギング、デバッグが必要。 | 低い。単一アプリケーションとして統合管理される。 |
ユーザー体験(UX)統合の秘訣：CSSとプリフェッチ
2つの完全に異なるワーカーから提供されるページを1つのアプリのように感じさせるには、CSS View Transitions と Speculation Rules API が核心です。ルーターワーカー設定で smoothTransitions と preload オプションを有効にすると、ルーターが必要なコードをHTMLレスポンスに自動的に挿入します。
// ルーター設定例 (ROUTES変数)
{
"smoothTransitions": true,
"routes": [
{ "binding": "APP1", "path": "/app1", "preload": true },
{ "binding": "APP2", "path": "/app2", "preload": true }
]
}
preload: true が設定されたパスは、ブラウザが次のページを予測して事前読み込み（プリフェッチ）するため、SPAのような高速なナビゲーションを実現します。
垂直マイクロフロントエンドは、成長する組織が必然的に直面する「チーム間依存性とデプロイのボトルネック」問題を解決する強力なパラダイムです。Cloudflareの新しいテンプレートは、このアーキテクチャをエッジで簡単に始められる基盤を提供します。
実務適用のアドバイス:
- 漸進的導入: 既存のモノリスを一度に分割するのではなく、新機能（例：新しいダッシュボードページ
/dash/v2）や独立性の高いモジュール（例：/blog）からVMFEとして構築してみてください。 - 共通基準の定義: チームごとに完全に独立していても、ログフォーマット、エラー処理、監視指標といった運用基準は共通で定義すべきです。デバッグが容易になります。
- UX統合に集中: 技術的な分離がユーザーに露出しないよう、CSS View Transitionsとプリフェッチを積極的に活用してください。ユーザーは1つの滑らかなアプリを体験するべきです。
このアーキテクチャは、チームの自律性とデプロイ速度を最大化しつつ、エッジコンピューティングの利点を活かして世界中のユーザーに高速な体験を提供できます。Cloudflareダッシュボードの「Workers & Pages」＞「Create application」をクリックし、「Create microfrontend」テンプレートを選択すれば、すぐに開始できます。