はじめに
各チームが独自の MFE を構築すると、UX は簡単に 断片化 します。 Design System は、MFE 全体で UX の一貫性を保つ唯一のソリューションです。
1. システムアーキテクチャの設計
Design System:
├── Design Tokens (CSS Variables)
│ ├── Colors, Typography, Spacing
│ └── Shadows, Border radius
├── Core Components (@company/ui)
│ ├── Button, Input, Select, Modal
│ ├── Table, Pagination, Toast
│ └── Layout: Grid, Stack, Container
├── Patterns (Form, Navigation, Data display)
└── Documentation (Storybook)
2. マイクロフロントエンドの CSS 戦略
2.1 CSS の競合の問題
MFE A: .btn { background: blue; }
MFE B: .btn { background: red; }
→ CSS cascade conflict!
2.2 解決策
| 戦略 | 隔離 | DX | パフォーマンス |
|---|---|---|---|
| CSS モジュール | ✅ スコープ付き | 良い | ベスト |
| Tailwind CSS | ✅ 実用性第一 | すばらしい | 良い |
| JS 内の CSS | ✅ ランタイム | 良い | OK |
| シャドウ DOM | ✅ 厳しい境界線 | 複雑な | OK |
推奨: Tailwind CSS — 競合のない、一貫したユーティリティ クラス。
2.3 テーマ用の CSS 変数
:root {
--color-primary: #2563eb;
--color-error: #dc2626;
--color-background: #ffffff;
--color-text: #1f2937;
--font-family: 'Inter', sans-serif;
--radius-md: 0.375rem;
}
[data-theme="dark"] {
--color-background: #111827;
--color-text: #f9fafb;
}
MFE は CSS 変数を使用します → テーマに従って自動的に:
<button style={{ background: 'var(--color-primary)' }}>Click</button>
3. 共有コンポーネント ライブラリ
@company/ui/
├── src/Button/, Input/, Modal/
├── package.json
└── tailwind.config.js (shared config)
共有モジュールフェデレーションによる配布:
shared: {
'@company/ui': { singleton: true, requiredVersion: '^3.0.0' },
}
4. ストーリーブック — 生きたドキュメント
export default { title: 'Components/Button', component: Button };
export const Primary = { args: { variant: 'primary', children: 'Click me' } };
export const Disabled = { args: { disabled: true, children: 'Disabled' } };
Storybook を展開し、すべてのチームに単一の信頼できる情報源を提供します。
5. バージョン管理戦略
- セマンティック バージョニング: メジャー = 破壊、マイナー = 機能、パッチ = 修正
- カナリア リリース: 展開前に 1 つの MFE でテスト
- 下位互換性: 削除する前に非推奨にします
概要
- マイクロ フロントエンドにはデザイン システムが必要です
- テーマ用の CSS 変数 — ダーク モード、ブランディング
- Tailwind CSS 推奨 — 競合なし
- ストーリーブック = 生きたドキュメント