マイクロフロントエンドの設計をClaudeと考える

大規模なフロントエンド開発では、チームが増えるほど「誰がどこを担当するか」が曖昧になりがちです。マイクロフロントエンドはその解決策のひとつですが、設計の選択肢が多くて迷うことも多いでしょう。そんなときこそ、Claude Codeを設計パートナーとして活用してみましょう。

まずClaudeに構成の選択肢を整理させる

プロジェクトの状況を伝えて、アーキテクチャの候補を出してもらうところから始めましょう。たとえば次のように入力します。

現在Reactで構築されたECサイトを3チームで開発しています。
チームAが商品一覧、チームBがカート、チームCが会員機能を担当します。
デプロイを独立させたいのですが、Module FederationとIframeどちらが向いていますか？
トレードオフを表形式でまとめてください。

Claudeはルーティングの独立性・共有ライブラリの扱い・ビルドツールの制約などを整理した比較表を返してくれます。この出力をそのままチームのドキュメントに貼り付けられるレベルの内容が得られることが多いです。

※デプロイ: 開発したコードを本番サーバーに公開・適用すること。

Module Federationの設定ファイルを生成させる

方針が決まったら、実際の設定コードも任せましょう。Webpack 5のModule Federationでホスト側とリモート側の設定を同時に生成させると効率的です。

Webpack 5のModule Federationを使って、以下の構成を実装してください。
- ホスト: shell-app（ポート3000）
- リモート1: product-app（ポート3001）がProductListコンポーネントを公開
- リモート2: cart-app（ポート3002）がCartSummaryコンポーネントを公開
- 共有ライブラリ: react, react-domをsingleton設定で共有
各アプリのwebpack.config.jsを出力してください。

すると、それぞれのModuleFederationPlugin設定が揃った状態で出力されます。

// shell-app/webpack.config.js（抜粋）
new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    productApp: "product@http://localhost:3001/remoteEntry.js",
    cartApp: "cart@http://localhost:3002/remoteEntry.js",
  },
  shared: { react: { singleton: true }, "react-dom": { singleton: true } },
});

認証・状態共有の設計をレビューさせる

マイクロフロントエンドで最も議論になるのが、認証トークンやグローバル状態の扱いです。自分が考えた設計をClaudeに貼り付けて、セキュリティや保守性の観点からレビューを依頼しましょう。

各マイクロフロントエンドがlocalStorageからJWTを読み取る設計を考えています。
セキュリティリスクと、CustomEventを使ったアプローチとの比較を教えてください。

「XSSリスクの範囲」「イベントバスの実装コスト」「サーバーサイドセッションとの比較」といった多角的な視点が返ってきます。設計の抜け漏れを人間のレビュアーを待たずに発見できるのが、Claude Codeとの協業の大きなメリットです。構成が固まったら、実装フェーズでも引き続きClaude Codeに伴走してもらいましょう。

※トークン: AIがテキストを処理する最小単位。日本語は1文字あたり約1〜2トークン。使用量に応じてAPIコストが変わる。※JWT: JSON Web Token の略。ユーザー認証情報をJSON形式でエンコードしたトークン。ヘッダーに付けてAPIを呼び出す際に使う。