マイクロフロントエンド

―マイクロサービスアーキテクチャの概念をフロントエンドに拡張し、信頼性、自律性の高いシステムを構築する

[cover photo]
TOPICS
Web
発行年月日
PRINT LENGTH
404
ISBN
978-4-8144-0002-7
原書
Building Micro-Frontends
FORMAT
Print PDF EPUB
Ebook
3,740円
Ebookを購入する
Print
3,740円

DAZNでアーキテクトを務めた著者が、マイクロフロントエンドアーキテクチャの概念、長所と短所、導入のポイントなどを俯瞰的に説明します。プロジェクトに適したアーキテクチャをどのように見極めるべきかについて、デプロイ可能性、モジュール性、テスト容易性、パフォーマンス、開発者体験といった観点から、多角的に分析することの重要性を強調します。また、マイクロフロントエンドを導入する予定がない組織にとっても、自律性、生産性の高いチーム作りのヒントを得ることができます。巻末の付録では、開発の最前線で活躍する8人にインタビュー。マイクロフロントエンドの威力、可能性、落とし穴など、開発現場の貴重な「生の声」を収録。一筋縄ではいかない開発の風景を垣間見ることができます。実装サンプルはすべてGitHubから利用可能です。

目次

序
まえがき

1章 フロントエンドのいま
    1.1 マイクロフロントエンドアプリケーション
    1.2 シングルページアプリケーション
    1.3 アイソモーフィックアプリケーション
    1.4 静的ページのWebサイト
    1.5 Jamstack
    1.6 まとめ

2章 マイクロフロントエンドの原則
    2.1 モノリスからマイクロサービスへ
        2.1.1 マイクロサービスへの移行
        2.1.2 マイクロフロントエンドの導入
    2.2 マイクロサービスの原則
        2.2.1 ビジネスドメインのモデル化
        2.2.2 自動化の文化
        2.2.3 実装の詳細を隠す
        2.2.4 ガバナンスの分散
        2.2.5 独立デプロイ可能性
        2.2.6 障害の分離
        2.2.7 高い観測性
    2.3 マイクロフロントエンドに原則を適用する
        2.3.1 ビジネスドメインのモデル化
        2.3.2 自動化の文化
        2.3.3 実装の詳細を隠す
        2.3.4 ガバナンスの分散
        2.3.5 独立デプロイ可能性
        2.3.6 障害の分離
        2.3.7 高い観測性
    2.4 マイクロフロントエンドは銀の弾丸ではない
    2.5 まとめ

3章 マイクロフロントエンドアーキテクチャとその課題
    3.1 マイクロフロントエンドの意思決定フレームワーク
        3.1.1 マイクロフロントエンドの定義
        3.1.2 マイクロフロントエンドによるドメイン駆動型設計
        3.1.3 コンテキストの境界をどう定義するか
        3.1.4 マイクロフロントエンドの構成
        3.1.5 マイクロフロントエンドのルーティング
        3.1.6 マイクロフロントエンドのコミュニケーション
    3.2 マイクロフロントエンドの実践例
        3.2.1 Zalando
        3.2.2 HelloFresh
        3.2.3 AllegroTech
        3.2.4 Spotify
        3.2.5 SAP
        3.2.6 OpenTable
        3.2.7 DAZN
    3.3 まとめ

4章 マイクロフロントエンドアーキテクチャの発見
    4.1 マイクロフロントエンドの意思決定フレームワークの適用
        4.1.1 垂直分割
        4.1.2 水平分割
    4.2 アーキテクチャ分析
        4.2.1 アーキテクチャとトレードオフ
    4.3 垂直分割アーキテクチャ
        4.3.1 アプリケーションシェル
        4.3.2 課題
        4.3.3 デザインシステムを実装する
        4.3.4 開発者体験
        4.3.5 検索エンジン最適化
        4.3.6 パフォーマンスとマイクロフロントエンド
        4.3.7 利用可能なフレームワーク
        4.3.8 ユースケース
        4.3.9 アーキテクチャの特徴
    4.4 水平分割アーキテクチャ
        4.4.1 クライアントサイド
        4.4.2 課題
        4.4.3 検索エンジン最適化
        4.4.4 開発者体験
        4.4.5 ユースケース
        4.4.6 モジュールフェデレーション
        4.4.7 iframe
        4.4.8 Webコンポーネント
        4.4.9 サーバサイド
        4.4.10 エッジサイド
    4.5 まとめ

5章 マイクロフロントエンドの技術的実装
    5.1 プロジェクト
    5.2 モジュールフェデレーション入門
    5.3 技術的実装
        5.3.1 プロジェクト構成
        5.3.2 アプリケーションシェル
        5.3.3 認証マイクロフロントエンド
        5.3.4 カタログマイクロフロントエンド
        5.3.5 アカウント管理マイクロフロントエンド
    5.4 プロジェクトの進化
        5.4.1 レガシーアプリケーションを埋め込む
        5.4.2 決済体験の開発
        5.4.3 ダイナミックリモートコンテナの実装
    5.5 webpackのロックイン
    5.6 まとめ

6章 マイクロフロントエンドの構築とデプロイ
    6.1 自動化の原則
        6.1.1 フィードバックループを高速に保つ
        6.1.2 頻繁に反復する
        6.1.3 チームを強化する
        6.1.4 ガードレールを定義する
        6.1.5 テスト戦略を定義する
    6.2 開発者体験
        6.2.1 水平分割と垂直分割
        6.2.2 摩擦のないマイクロフロントエンド計画
        6.2.3 環境戦略
    6.3 バージョン管理
        6.3.1 単一リポジトリ運用
        6.3.2 複数リポジトリ運用
        6.3.3 バージョン管理システムの将来像
    6.4 継続的インテグレーション戦略
        6.4.1 マイクロフロントエンドをテストする
        6.4.2 適応度関数
        6.4.3 マイクロフロントエンド固有の運用
    6.5 デプロイ戦略
        6.5.1 ブルーグリーンデプロイとカナリアリリースの違い
        6.5.2 ストラングラーフィグパターン
        6.5.3 可観測性
    6.6 まとめ

7章 事例:マイクロフロントエンドのための自動化パイプライン
    7.1 状況設定
        7.1.1 バージョン管理
        7.1.2 パイプラインの管理
        7.1.3 コード品質レビュー
        7.1.4 ビルド
        7.1.5 ビルド後のレビュー
        7.1.6 デプロイ
        7.1.7 自動化戦略のまとめ
    7.2 まとめ

8章 マイクロフロントエンド用のバックエンドパターン
    8.1 APIの実装とマイクロフロントエンド
        8.1.1 サービスディクショナリを使う
        8.1.2 APIゲートウェイを使う
        8.1.3 BFFパターンを使う
        8.1.4 マイクロフロントエンドでGraphQLを使う
        8.1.5 ベストプラクティス
    8.2 まとめ

9章 事例:モノリスからマイクロフロントエンドへ
    9.1 コンテキスト
        9.1.1 技術スタック
        9.1.2 プラットフォームとメインユーザフロー
        9.1.3 技術的目標
    9.2 マイグレーション戦略
        9.2.1 マイクロフロントエンドの意思決定フレームワークの適用
        9.2.2 SPAを複数のサブドメインに分割する
        9.2.3 技術選定
    9.3 実装の詳細
        9.3.1 アプリケーションシェルの責任
        9.3.2 アプリケーション初期化
        9.3.3 通信ブリッジ
        9.3.4 バックエンドの統合
        9.3.5 マイクロフロントエンドにおける認証の統合
        9.3.6 依存関係の管理
        9.3.7 デザインシステムの統合
        9.3.8 コンポーネントの共有
        9.3.9 カナリアリリースの実装
        9.3.10 ローカライゼーション
    9.4 まとめ

10章 組織にマイクロフロントエンドを導入する
    10.1 なぜマイクロフロントエンドを使うのか
    10.2 組織とソフトウェアアーキテクチャとの関連
        10.2.1 委員会を組織する
        10.2.2 機能チームv.s.コンポーネントチーム
    10.3 コミュニケーションの流れをスムーズにするガバナンスの実装
        10.3.1 RFC
        10.3.2 ADR
    10.4 コミュニケーションの流れを良くするテクニック
        10.4.1 後方支援
        10.4.2 実践共同体とタウンホール
        10.4.3 外部依存を管理する
    10.5 分散された組織
        10.5.1 マイクロフロントエンドによる分散の意味
    10.6 まとめ

付録 開発者インタビュー:マイクロフロントエンドとの向き合い方
索引