# Angular マイクロフロントエンド (Angular)

> Module federation、マイクロフロントエンドアーキテクチャ、共有依存関係、デプロイ戦略、通信パターン

- 20 面接問題
- Senior
- [面接問題: Angular](https://sharpskill.dev/ja/technologies/angular/interview-questions.md)

## 1. Angularのコンテキストにおけるマイクロフロントエンドアーキテクチャとは何ですか？

**回答**

マイクロフロントエンドアーキテクチャは、モノリシックなAngularアプリケーションをより小さく独立したアプリケーションに分割し、それぞれを個別に開発・デプロイします。各マイクロフロントエンドは独自のrepository、CI/CDパイプライン、専任チームを持つことができます。Webpack 5のModule Federationは、Angularでこのアーキテクチャを実装するための推奨技術であり、他のアプリケーションからのコードをruntimeで動的にロードできます。

## 2. AngularマイクロフロントエンドアーキテクチャにおけるModule Federationの役割は何ですか？

**回答**

Module Federationは、rebuildなしでruntimeにAngularアプリケーション間でコードを共有することを可能にします。各マイクロフロントエンドは、他のアプリケーション（host）によって消費されるモジュール（remote）を公開します。これによりコードの重複を回避し、bundleサイズを削減し、独立したデプロイが可能になります。Module Federationは、非同期ロード、依存関係の解決、Angular coreなどの共通ライブラリの共有を自動的に処理します。

## 3. Module Federationにおけるhostアプリケーションとremoteアプリケーションの違いは何ですか？

**回答**

hostアプリケーションは、remoteによって公開されたモジュールを消費します。webpack.configでremoteを設定し、それらのモジュールを動的にロードします。remoteアプリケーションは、他のアプリケーションによって消費されるモジュール（component、service）を公開します。同じアプリケーションがhostとremoteの両方になることができます。hostはアプリケーションのshell（header、navigation、layout）を制御し、remoteはビジネス機能を提供します。

## さらに17問利用可能

- @angular-architects/module-federationを使用してAngularプロジェクトでModule Federationを設定する方法は？
- Module Federationでshared scopeを設定することが重要なのはなぜですか？

無料で登録: https://sharpskill.dev/ja/login

## その他のAngular面接トピック

- [TypeScriptの基礎](https://sharpskill.dev/ja/technologies/angular/interview-questions/typescript-basics.md): 25問, Junior
- [TypeScript上級](https://sharpskill.dev/ja/technologies/angular/interview-questions/typescript-advanced.md): 20問, Junior
- [Angularの基礎](https://sharpskill.dev/ja/technologies/angular/interview-questions/angular-fundamentals.md): 20問, Junior
- [コンポーネントとライフサイクル](https://sharpskill.dev/ja/technologies/angular/interview-questions/components-lifecycle.md): 20問, Junior
- [Services & Dependency Injection](https://sharpskill.dev/ja/technologies/angular/interview-questions/services-dependency-injection.md): 20問, Junior
- [Angularモジュールの構成](https://sharpskill.dev/ja/technologies/angular/interview-questions/modules-organization.md): 22問, Mid-Level
- [Angular CLI](https://sharpskill.dev/ja/technologies/angular/interview-questions/angular-cli.md): 18問, Junior
- [ディレクティブとPipe](https://sharpskill.dev/ja/technologies/angular/interview-questions/directives-pipes.md): 22問, Mid-Level
- [ルーティングとナビゲーション](https://sharpskill.dev/ja/technologies/angular/interview-questions/routing-navigation.md): 24問, Mid-Level
- [リアクティブフォーム](https://sharpskill.dev/ja/technologies/angular/interview-questions/forms-reactive.md): 26問, Mid-Level
- [テンプレート駆動フォーム](https://sharpskill.dev/ja/technologies/angular/interview-questions/forms-template-driven.md): 16問, Mid-Level
- [RxJS の基礎](https://sharpskill.dev/ja/technologies/angular/interview-questions/rxjs-fundamentals.md): 22問, Mid-Level
- [RxJS オペレーター](https://sharpskill.dev/ja/technologies/angular/interview-questions/rxjs-operators.md): 24問, Mid-Level
- [HttpClientとAPI呼び出し](https://sharpskill.dev/ja/technologies/angular/interview-questions/http-client.md): 22問, Mid-Level
- [基本的な状態管理](https://sharpskill.dev/ja/technologies/angular/interview-questions/state-management-basics.md): 20問, Mid-Level
- [Change Detection](https://sharpskill.dev/ja/technologies/angular/interview-questions/change-detection.md): 20問, Mid-Level
- [Angular Signals](https://sharpskill.dev/ja/technologies/angular/interview-questions/angular-signals.md): 20問, Mid-Level
- [Standalone Components](https://sharpskill.dev/ja/technologies/angular/interview-questions/standalone-components.md): 18問, Mid-Level
- [Angularのユニットテスト](https://sharpskill.dev/ja/technologies/angular/interview-questions/testing-unit.md): 22問, Mid-Level
- [エンドツーエンドテスト](https://sharpskill.dev/ja/technologies/angular/interview-questions/testing-e2e.md): 18問, Mid-Level
- [ビルドと最適化](https://sharpskill.dev/ja/technologies/angular/interview-questions/build-optimization.md): 20問, Mid-Level
- [NgRxの基礎](https://sharpskill.dev/ja/technologies/angular/interview-questions/ngrx-fundamentals.md): 24問, Senior
- [NgRx応用](https://sharpskill.dev/ja/technologies/angular/interview-questions/ngrx-advanced.md): 24問, Senior
- [Angularアーキテクチャ](https://sharpskill.dev/ja/technologies/angular/interview-questions/angular-architecture.md): 22問, Senior
- [パフォーマンス最適化](https://sharpskill.dev/ja/technologies/angular/interview-questions/performance-optimization.md): 22問, Senior
- [セキュリティとベストプラクティス](https://sharpskill.dev/ja/technologies/angular/interview-questions/security-best-practices.md): 20問, Senior
- [高度な RxJS パターン](https://sharpskill.dev/ja/technologies/angular/interview-questions/advanced-rxjs-patterns.md): 22問, Senior
- [Angular Universal と SSR](https://sharpskill.dev/ja/technologies/angular/interview-questions/angular-universal-ssr.md): 20問, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ja/technologies/angular/interview-questions/micro-frontends-angular