# 画面設計書 20-MFE-B (Remote)

## 概要

本ドキュメントは、webpackサンプルプロジェクト「module-federation」に含まれるMFE-B (Remote)の設計仕様を記載する。Module FederationのリモートBとして、Componentを外部に公開するマイクロフロントエンドである。reactをsingleton制約で共有し、date-fnsを他のリモートと共有する構成である。

### 本画面の処理概要

MFE-B (Remote)は、module-federationサンプルにおけるリモートBマイクロフロントエンドであり、ContainerPluginによりFederationコンテナを作成し、Componentモジュールを外部に公開（expose）する。

**業務上の目的・背景**：本画面はModule Federationにおけるリモート（プロバイダ）側の実装パターンを検証するために存在する。リモートBは`mfeBBB`という名前でFederationコンテナを作成し、`./Component`パスでComponentを公開する。ホスト（App）はこのコンテナからコンポーネントを取得して使用する。reactをsingleton制約で共有し、date-fnsをリモートC（mfe-c）とも共有するパターンを実証する。

**画面へのアクセス方法**：MFE-Bは単独で表示されるページではなく、ホストアプリケーション（App）がリモートエントリ`mfeBBB.js`を読み込むことでComponentが利用可能になる。`/dist/bbb/mfeBBB.js`がリモートエントリポイントである。

**主要な操作・処理内容**：
1. webpack.config.jsのModuleFederationPlugin設定により、mfeBBBコンテナが作成される
2. `./Component`として`src-b/Component.js`が公開（expose）される
3. Component.jsはReactとdate-fnsをインポートし、JSXで青ボーダー付きのdiv要素を返す
4. date-fnsの`formatRelative`と`subDays`を使用して相対日付を表示する
5. localeプロパティを受け取り、日付フォーマットに適用する

**画面遷移**：MFE-Bは独立したリモートコンテナであり、画面遷移の概念は適用されない。ホスト（App）から`mfe-b/Component`としてインポートされて使用される。

**権限による表示制御**：権限による表示制御は実装されていない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 37 | ModuleFederationPlugin | 主機能 | リモートBとしてComponentを外部に公開 |
| 38 | コンテナ管理 | 主機能 | ContainerPluginによるFederationコンテナの作成・モジュール公開 |
| 40 | SharePlugin | 補助機能 | reactをsingleton制約で共有 |
| 41 | 共有モジュール提供・消費 | 補助機能 | ProvideSharedPluginによる共有モジュールの提供 |

## 画面種別

マイクロフロントエンド（リモートコンポーネント）

## URL/ルーティング

- リモートエントリ: `/dist/bbb/mfeBBB.js`
- publicPath: `dist/bbb/`
- uniqueName: `module-federation-bbb`
- コンテナ名: `mfeBBB`
- 公開モジュール: `./Component` -> `./src-b/Component`

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| locale | プロパティ（入力） | Locale (date-fns) | No | 日付フォーマットに使用するロケールオブジェクト |

## 表示項目

| 項目名 | 種別 | コンポーネント | 説明 |
|--------|------|----------------|------|
| コンテナ識別テキスト | テキスト | p | "I'm a Component exposed from container B!" |
| 日付表示 | テキスト | p | "Using date-fn in Remote: {相対日付}" （2日前の日付をformatRelativeで表示） |
| ボーダー付きdiv | スタイル | div | `border: "5px solid darkblue"` のインラインスタイル |

## イベント仕様

### 1-コンポーネント初期化

リモートエントリ（mfeBBB.js）がロードされると、ModuleFederationPluginのコンテナランタイムが初期化される。共有モジュール（react, date-fns）のバージョン交渉が行われ、利用可能な共有モジュールが決定される。

### 2-コンポーネントレンダリング

ホストアプリケーションがComponentBをレンダリングすると以下が実行される：
1. Reactがインポートされる（singleton共有モジュール）
2. date-fnsの`formatRelative`と`subDays`がインポートされる（共有モジュール）
3. `subDays(new Date(), 2)` で2日前のDateオブジェクトを生成
4. `formatRelative(2日前の日付, 現在日時, { locale })` でロケールに応じた相対日付文字列を生成
5. JSXテンプレートがレンダリングされ、青ボーダーのdivと日付テキストが描画される

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | - | 本コンポーネントはフロントエンドのみのデモであり、データベース操作は存在しない |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| M-01 | 画面表示 | "I'm a Component exposed from container B!" | コンポーネントレンダリング時 |
| M-02 | 画面表示 | "Using date-fn in Remote: {相対日付}" | コンポーネントレンダリング時 |

## 例外処理

| 例外 | 条件 | 動作 |
|------|------|------|
| reactバージョン不整合 | ホストとリモートでreactのバージョンが互換性なしの場合 | singleton制約によりランタイムエラー |
| date-fns未共有 | date-fnsがどのコンテナからも提供されない場合 | モジュール解決エラー |
| localeプロパティ未指定 | localeがundefinedの場合 | formatRelativeがデフォルトロケールで動作する |
| リモートエントリロード失敗 | mfeBBB.jsが読み込めない場合 | ホストでのComponentBの解決に失敗 |

## 備考

- MFE-Bのwebpack設定ではentry: {}（空オブジェクト）であり、通常のエントリポイントを持たない
- ModuleFederationPluginのexposes設定によりComponentが公開される
- date-fnsはmfe-bとmfe-cの間で共有されるが、ホスト（app）はdate-fnsの存在を認知していない
- reactはsingleton: trueで設定されており、ホスト・リモート間で必ず同一インスタンスが使用される
- exposingモジュールが非同期境界として機能するため、Component.js内でのimportに追加の非同期境界は不要（コメントで説明あり）
- ビルド設定で`nodeEnv: "production"`が設定されており、Reactのプロダクション版が使用される

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

Module Federationのリモート側の構成を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | webpack.config.js | `examples/module-federation/webpack.config.js` | 行81-116: mfe-bビルド設定。行84: entry:{}（空）。行93-113: ModuleFederationPlugin設定。name: "mfeBBB"、exposes: {"./Component": "./src-b/Component"}、shared: ["date-fns", {react: {singleton: true}}] |

**読解のコツ**: リモート側のentry:{}は意図的に空である。ModuleFederationPluginがリモートエントリ（mfeBBB.js）を自動生成し、これがコンテナランタイムとして機能する。exposesで指定したモジュールが実際の公開コンテンツである。

#### Step 2: 公開コンポーネントを理解する

リモートBが公開するComponentの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Component.js | `examples/module-federation/src-b/Component.js` | 行1: Reactのインポート。行2: date-fnsのformatRelativeとsubDaysのインポート。行3-7: コメント（共有モジュールの非同期境界に関する説明）。行9-17: Componentの定義 |

**主要処理フロー**:
- **行1**: `import React from "react"` - React（singleton共有）のインポート
- **行2**: `import { formatRelative, subDays } from "date-fns"` - date-fns（リモート間共有）のインポート
- **行9**: `const Component = ({ locale }) =>` - localeプロパティを受け取る関数コンポーネント
- **行10**: `<div style={{ border: "5px solid darkblue" }}>` - 青ボーダーのスタイル
- **行11**: `<p>I'm a Component exposed from container B!</p>` - 識別テキスト
- **行13**: `{formatRelative(subDays(new Date(), 2), new Date(), { locale })}` - 2日前の相対日付表示
- **行18**: `export default Component` - デフォルトエクスポート

#### Step 3: webpack設定のshared構成を理解する

共有モジュールの設定を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | webpack.config.js | `examples/module-federation/webpack.config.js` | 行104-112: shared設定。date-fnsとreact（singleton:true）を共有。date-fnsはmfe-cとも共有される |

**主要処理フロー**:
- **行96**: `name: "mfeBBB"` - Federationコンテナ名
- **行99-101**: `exposes: { "./Component": "./src-b/Component" }` - コンポーネントの公開
- **行104**: `shared: [` - 共有モジュール設定の開始
- **行106**: `"date-fns"` - date-fnsを共有モジュールとして登録
- **行108-110**: `react: { singleton: true }` - reactをsingleton制約付きで共有

#### Step 4: ホスト側での消費パターンを理解する

ホストアプリケーションがMFE-Bのコンポーネントをどのように消費するかを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | App.js | `examples/module-federation/src/App.js` | 行2: `import ComponentB from "mfe-b/Component"` - リモートモジュールを通常のパッケージとして使用。行15: `<ComponentB locale={de} />` でレンダリング |

### プログラム呼び出し階層図

```
mfeBBB.js [リモートエントリ（自動生成）]
    |
    +-- Federationコンテナランタイム
    |       |
    |       +-- 共有モジュール交渉（react, date-fns）
    |
    +-- exposes: "./Component"
            |
            +-- src-b/Component.js [公開コンポーネント]
                    |
                    +-- import React (singleton共有)
                    +-- import { formatRelative, subDays } from "date-fns" (共有)
                    +-- Component({ locale })
                            |
                            +-- subDays(new Date(), 2)
                            +-- formatRelative(日付, 現在, { locale })
                            +-- JSX描画
```

### データフロー図

```
[入力]                         [処理]                              [出力]

mfeBBB.js読み込み         Federationコンテナ初期化
(ホストから)                    |
                          共有モジュール交渉
                          (react:singleton,
                           date-fns:shared)
                                |
ホストがComponentBを      Component.js実行
レンダリング要求               |
                          +----+----+
                          |         |
locale={de}          React(shared)  date-fns(shared)
(プロパティ)              |         |
                     JSX描画    formatRelative          <div>
                          |    (2日前, 現在, locale) --> コンテナB識別テキスト
                          |         |                   + 相対日付表示
                          +---------+                   (青ボーダー)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Component.js | `examples/module-federation/src-b/Component.js` | ソース | リモートBが公開するReactコンポーネント |
| webpack.config.js | `examples/module-federation/webpack.config.js` | 設定 | mfe-bビルド設定（行81-116）。ModuleFederationPlugin設定含む |
| App.js | `examples/module-federation/src/App.js` | ソース | ホストのAppコンポーネント（コンシューマ側） |
| index.html | `examples/module-federation/index.html` | テンプレート | mfeBBB.jsの読み込みを含むHTMLテンプレート |
| Component.js (C) | `examples/module-federation/src-c/Component.js` | ソース | リモートCコンポーネント（date-fns共有先） |
| LazyComponent.js | `examples/module-federation/src-c/LazyComponent.js` | ソース | リモートCの遅延コンポーネント |
| index.js | `examples/module-federation/src/index.js` | ソース | ホストエントリポイント |
| bootstrap.js | `examples/module-federation/src/bootstrap.js` | ソース | ホストのブートストラップ処理 |
