PR：この記事にはアフィリエイトリンクが含まれます。
マイクロフロントエンドは大規模なWebアプリを業務領域やチームごとに分けて開発する設計です。担当チームが機能を変更し、個別にリリースしやすくする狙いがあります。
分けたアプリをどうつなぐか。その方法としてModule FederationやWeb Componentsがあります。技術名から本を決めるより、境界設計や統合、テスト、チーム運用のどこに課題があるかを考えると、読む本を絞れます。
実務を広く扱う本からReactに焦点を絞った本まで紹介します。すべて英語版です。専門用語に慣れていない方は目次やサンプルページも見ると、読み進めるときのイメージがつかみやすいですよ。
基本の役割
マイクロフロントエンドでは、ひとつのWeb画面を複数の独立したフロントエンドで構成します。ECサイトなら商品一覧、カート、会員情報といった領域を別々に開発する形です。
担当チームが自分たちの機能を変更し、個別に公開しやすくなるのが利点です。一方で、画面の接続や共通データ、障害時の表示など、ひとつのアプリなら不要だった調整は増えていきます。
分割数を増やせば成功するわけではありません。公開や保守の単位がチームの体制に合わないと、アプリ間の調整に手間がかかります。
本の早見表
各書籍の内容とおすすめの読者を一覧にまとめました。ページ数は紙版の目安です。刊行時期も扱う範囲もさまざまなので、実装の手順を知りたいのか、設計から運用まで学びたいのかで候補が変わります。
| 書籍 | 発行時期・ページ数 | 主な内容 | おすすめの読者 |
|---|---|---|---|
 Building Micro-Frontends, 2nd Edition | 2025年10月・451ページ | 分割設計、統合、テスト、運用 | 設計からデプロイまで学びたい人 |
 The Art of Micro Frontends, Second Edition | 2024年10月・356ページ | 構成パターン、Module Federation、チーム運用 | ガバナンスや運用も知りたい人 |
 Micro Frontends in Action | 2020年8月・296ページ | ECサイトの例、ルーティング、開発手順 | 具体例から構成をつかみたい人 |
 Building Micro Frontends with React 18 | 2023年10月・218ページ | React、Module Federation、デプロイ | Reactで実装したい人 |
書籍の価格は販売店や在庫、為替によって変わります。英語の紙版を注文する際は、購入時点の価格と配送条件を確認してください。
JavaScriptやWebアプリ開発の経験があると、どの本も読み進めやすくなります。前提知識が浅い方は用語を調べながら読むと、技術の位置づけを追いやすいでしょう。
境界の設計
設計では見た目の部品を並べるように分割するより、変更のまとまりを見つけることが大切です。商品検索と注文処理のように業務上の責任や変更理由が異なる機能は、分割の候補になりやすいですね。
ボタンやヘッダーなどの共通部品をすぐ別アプリにするのは慎重に考えたいところです。共通化したアプリに変更が集中し、利用する側との調整も必要になれば、修正に時間がかかることがあります。
境界は画面だけでなく、データと責任の分け方も合わせて考えます。注文アプリが会員情報を直接書き換えるのか、会員側が用意した操作を呼ぶのかで、障害対応や変更時の連絡先も変わります。
こうした設計を体系的に学ぶなら、ドメイン駆動設計や境界づけられたコンテキストを扱う本が役立ちます。Building Micro-Frontendsの第2版は垂直・水平分割や境界のテストも取り上げ、設計判断の材料を広く示します。
Module Federation
Module Federationはホスト側のアプリがリモート側のコードを読み込み、実行時に組み合わせる仕組みです。アプリごとにビルドや配信を進めやすく、Reactを使う複数チームの統合にも利用されます。
ただし、コードを読み込めただけでは統合は完了しません。共有ライブラリのバージョンや画面間でデータを渡す方法が曖昧だと、更新のタイミングによって片方のアプリだけ動かなくなる恐れがあります。
障害時に代替表示へ切り替えるのか、リモートの読み込みに失敗した領域を隠すのか。こうした動きも決めておく必要があります。依存関係の共有や構成パターンを学ぶなら、The Art of Micro Frontendsがおすすめです。統合の仕組みをチーム運用と結びつけて理解できます。
Web Components
Web Componentsはブラウザー標準のカスタム要素などを使い、独立したUIを組み立てる技術です。ReactやVueなど異なるフレームワークを使うアプリ間で部品を共有する方法として利用できます。
スタイルや要素の振る舞いをまとめやすいのは利点です。画面全体の分割やリリース管理には別の設計が必要になります。イベント名や属性、表示状態の持たせ方を定め、利用側が安定して組み込める契約を整えます。
Module Federationはアプリやモジュールの実行時統合、Web ComponentsはUI要素の標準化に重心があります。両方を含む複数の構成を扱うのがBuilding Micro-Frontends第2版です。統合方法を一冊で見渡せます。
運用の契約
独立デプロイを目指す場合も、ルート設定や認証、画面遷移、共通データの担当が曖昧だと、公開のたびにチーム間の調整が発生します。何をどのチームが変更できるのか、コードと運用ルールの両方でそろえておきたいところです。
テストでは個々のアプリを単独で確認するものと、複数アプリをつないだE2Eテストの両方が必要です。境界の契約もテストすれば、片方の変更で連携が崩れたときに公開前に気づきやすくなります。
テストやセキュリティに加えて開発者体験やデプロイ方式も知りたい方には、The Art of Micro Frontendsをおすすめします。HTML、CSS、JavaScriptの基礎を前提に、設計からチーム運用まで幅広く扱っています。
実例から学ぶ
Micro Frontends in ActionはECアプリを例に、独立したアプリの構成やルーティング、複数のJavaScriptフレームワークの統合を説明します。用語だけでは全体像をつかみにくい方も、具体的な構成を追いながら学べます。
ローカル開発やフラグメントのモック、テスト、チームのワークフローも扱います。分割後に各チームがどう並行して開発するかを考える材料になるでしょう。ページ数は296ページです。
2020年刊なので、構成の考え方やチーム間の連携を学ぶ本として読むのがおすすめです。ECの具体例に沿って、マイクロフロントエンドの基本構造を知りたい人に適しています。
React実装を深掘り
Building Micro Frontends with React 18はReactで実装を進めたい開発者向けです。multi-SPAとmicro-apps、モノレポと複数リポジトリの構成を扱い、ホストとリモートを使うModule Federationの流れも追えます。
状態管理やルーティング、サーバー側レンダリングも取り上げます。接続部分の考え方を押さえたい人に実践的な内容です。FirebaseやKubernetesへのデプロイ、変更したアプリだけを公開する方法も扱い、実装と運用を結びつけています。
全218ページと短めです。ReactとJavaScriptまたはTypeScriptを使った経験がある中級から上級の開発者に向けた本で、ReactチームがModule Federationを試す際におすすめします。
結論
設計と運用をまとめて学ぶなら、2025年刊のBuilding Micro-Frontends, 2nd Editionを第一候補にできます。Module FederationやWeb Componentsを含む構成に加え、テストや独立デプロイも扱っています。実務の判断材料を広く得られる一冊です。
分割後のガバナンスやセキュリティまで知りたい方にはThe Art of Micro Frontends、具体例を通じて全体像をつかみたい方にはMicro Frontends in Actionをおすすめします。Reactで実装する方にはBuilding Micro Frontends with React 18が合います。
導入を検討中のチームは、自分たちの課題に近い章から読み進めてください。マイクロフロントエンドが必要かどうかも、境界設計と運用にかかる手間を知れば判断しやすくなります。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
