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

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

by Luca Mezzalira, 嶋田 健志
Released October 2022
Publisher(s): O'Reilly Japan, Inc.
ISBN: 9784814400027

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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

Table of contents

  1. 大扉
  2. 原書大扉
  3. クレジット
  4. 序
  5. はじめに
    1. この本を書いた理由
    2. 対象読者
    3. 本書の構成
    4. 本書の表記法
    5. 連絡先
    6. 謝辞
  6. 1章　フロントエンドのいま
    1. 1.1　マイクロフロントエンドアプリケーション
    2. 1.2　シングルページアプリケーション
    3. 1.3　アイソモーフィックアプリケーション
    4. 1.4　静的ページのWebサイト
    5. 1.5　Jamstack
    6. 1.6　まとめ
  7. 2章　マイクロフロントエンドの原則
    1. 2.1　モノリスからマイクロサービスへ
      1. 2.1.1　マイクロサービスへの移行
      2. 2.1.2　マイクロフロントエンドの導入
    2. 2.2　マイクロサービスの原則
      1. 2.2.1　ビジネスドメインのモデル化
      2. 2.2.2　自動化の文化
      3. 2.2.3　実装の詳細を隠す
      4. 2.2.4　ガバナンスの分散
      5. 2.2.5　独立デプロイ可能性
      6. 2.2.6　障害の分離
      7. 2.2.7　高い観測性
    3. 2.3　マイクロフロントエンドに原則を適用する
      1. 2.3.1　ビジネスドメインのモデル化
      2. 2.3.2　自動化の文化
      3. 2.3.3　実装の詳細を隠す
      4. 2.3.4　ガバナンスの分散
      5. 2.3.5　独立デプロイ可能性
      6. 2.3.6　障害の分離
      7. 2.3.7　高い観測性
    4. 2.4　マイクロフロントエンドは銀の弾丸ではない
    5. 2.5　まとめ
  8. 3章　マイクロフロントエンドアーキテクチャとその課題
    1. 3.1　マイクロフロントエンドの意思決定フレームワーク
      1. 3.1.1　マイクロフロントエンドの定義
      2. 3.1.2　マイクロフロントエンドによるドメイン駆動型設計
      3. 3.1.3　コンテキストの境界をどう定義するか
      4. 3.1.4　マイクロフロントエンドの構成
      5. 3.1.5　マイクロフロントエンドのルーティング
      6. 3.1.6　マイクロフロントエンドのコミュニケーション
    2. 3.2　マイクロフロントエンドの実践例
      1. 3.2.1　Zalando
      2. 3.2.2　HelloFresh
      3. 3.2.3　AllegroTech
      4. 3.2.4　Spotify
      5. 3.2.5　SAP
      6. 3.2.6　OpenTable
      7. 3.2.7　DAZN
    3. 3.3　まとめ
  9. 4章　マイクロフロントエンドアーキテクチャの発見
    1. 4.1　マイクロフロントエンドの意思決定フレームワークの適用
      1. 4.1.1　垂直分割
      2. 4.1.2　水平分割
      3. オブザーバパターン
    2. 4.2　アーキテクチャ分析
      1. 4.2.1　アーキテクチャとトレードオフ
    3. 4.3　垂直分割アーキテクチャ
      1. 4.3.1　アプリケーションシェル
      2. 4.3.2　課題
      3. 誤った抽象化によるコードの重複
      4. 4.3.3　デザインシステムを実装する
      5. 4.3.4　開発者体験
      6. 4.3.5　検索エンジン最適化
      7. 4.3.6　パフォーマンスとマイクロフロントエンド
      8. 4.3.7　利用可能なフレームワーク
      9. 4.3.8　ユースケース
      10. 4.3.9　アーキテクチャの特徴
    4. 4.4　水平分割アーキテクチャ
      1. コンポーネントとマイクロフロントエンドの違い
      2. 4.4.1　クライアントサイド
      3. 4.4.2　課題
      4. 4.4.3　検索エンジン最適化
      5. 4.4.4　開発者体験
      6. 4.4.5　ユースケース
      7. 4.4.6　モジュールフェデレーション
      8. 一方向のデータフロー
      9. 4.4.7　iframe
      10. 4.4.8　Webコンポーネント
      11. 4.4.9　サーバサイド
      12. 4.4.10　エッジサイド
    5. 4.5　まとめ
  10. 5章　マイクロフロントエンドの技術的実装
    1. 5.1　プロジェクト
    2. 5.2　モジュールフェデレーション入門
    3. 5.3　技術的実装
      1. 5.3.1　プロジェクト構成
      2. 5.3.2　アプリケーションシェル
      3. 共有ライブラリのバージョン
      4. 5.3.3　認証マイクロフロントエンド
      5. 5.3.4　カタログマイクロフロントエンド
      6. 5.3.5　アカウント管理マイクロフロントエンド
    4. 5.4　プロジェクトの進化
      1. 5.4.1　レガシーアプリケーションを埋め込む
      2. 5.4.2　決済体験の開発
      3. 5.4.3　ダイナミックリモートコンテナの実装
    5. 5.5　webpackのロックイン
    6. 5.6　まとめ
  11. 6章　マイクロフロントエンドの構築とデプロイ
    1. 6.1　自動化の原則
      1. 継続的インテグレーションと継続的デリバリーと継続的デプロイ
      2. 6.1.1　フィードバックループを高速に保つ
      3. Infrastructure as Code
      4. 6.1.2　頻繁に反復する
      5. 6.1.3　チームを強化する
      6. 6.1.4　ガードレールを定義する
      7. 6.1.5　テスト戦略を定義する
    2. 6.2　開発者体験
      1. 開発者体験（デベロッパーエクスペリエンス）とは
      2. 6.2.1　水平分割と垂直分割
      3. 6.2.2　摩擦のないマイクロフロントエンド計画
      4. 6.2.3　環境戦略
    3. 6.3　バージョン管理
      1. 6.3.1　単一リポジトリ運用
      2. Sparse-Checkout
      3. 6.3.2　複数リポジトリ運用
      4. 6.3.3　バージョン管理システムの将来像
    4. 6.4　継続的インテグレーション戦略
      1. DevOpsについて
      2. 6.4.1　マイクロフロントエンドをテストする
      3. テスト戦略
      4. webpack DevServerのプロキシ設定
      5. 6.4.2　適応度関数
      6. 6.4.3　マイクロフロントエンド固有の運用
    5. 6.5　デプロイ戦略
      1. 6.5.1　ブルーグリーンデプロイとカナリアリリースの違い
      2. Lambda@Edgeカナリアリリース
      3. 6.5.2　ストラングラーフィグパターン
      4. 6.5.3　可観測性
    6. 6.6　まとめ
  12. 7章　事例：マイクロフロントエンドのための自動化パイプライン
    1. 7.1　状況設定
      1. 不具合を修正するコストは時間とともに増大する
      2. 7.1.1　バージョン管理
      3. 7.1.2　パイプラインの管理
      4. 7.1.3　コード品質レビュー
      5. 7.1.4　ビルド
      6. 7.1.5　ビルド後のレビュー
      7. 7.1.6　デプロイ
      8. 7.1.7　自動化戦略のまとめ
    2. 7.2　まとめ
  13. 8章　マイクロフロントエンド用のバックエンドパターン
    1. 8.1　APIの実装とマイクロフロントエンド
      1. 8.1.1　サービスディクショナリを使う
      2. 2枚のピザのチーム
      3. モジュラーモノリス
      4. 8.1.2　APIゲートウェイを使う
      5. 8.1.3　BFFパターンを使う
      6. 8.1.4　マイクロフロントエンドでGraphQLを使う
      7. 8.1.5　ベストプラクティス
    2. 8.2　まとめ
  14. 9章　事例：モノリスからマイクロフロントエンドへ
    1. 9.1　コンテキスト
      1. 9.1.1　技術スタック
      2. 9.1.2　プラットフォームとメインユーザフロー
      3. 9.1.3　技術的目標
    2. 9.2　マイグレーション戦略
      1. 9.2.1　マイクロフロントエンドの意思決定フレームワークの適用
      2. 9.2.2　SPAを複数のサブドメインに分割する
      3. 9.2.3　技術選定
    3. 9.3　実装の詳細
      1. 9.3.1　アプリケーションシェルの責任
      2. 9.3.2　アプリケーション初期化
      3. 9.3.3　通信ブリッジ
      4. 9.3.4　バックエンドの統合
      5. 9.3.5　マイクロフロントエンドにおける認証の統合
      6. ローカルストレージのセキュリティモデル
      7. クロスサイトスクリプティング
      8. 9.3.6　依存関係の管理
      9. 9.3.7　デザインシステムの統合
      10. 9.3.8　コンポーネントの共有
      11. 9.3.9　カナリアリリースの実装
      12. セマンティックバージョン
      13. 9.3.10　ローカライゼーション
    4. 9.4　まとめ
  15. 10章　組織にマイクロフロントエンドを導入する
    1. 10.1　なぜマイクロフロントエンドを使うのか
    2. 10.2　組織とソフトウェアアーキテクチャとの関連
      1. 10.2.1　委員会を組織する
      2. 10.2.2　機能チームv.s.コンポーネントチーム
    3. 10.3　コミュニケーションの流れをスムーズにするガバナンスの実装
      1. 10.3.1　RFC
      2. 10.3.2　ADR
    4. 10.4　コミュニケーションの流れを良くするテクニック
      1. 10.4.1　後方支援
      2. 10.4.2　実践共同体とタウンホール
      3. モブプログラミング
      4. 10.4.3　外部依存を管理する
    5. 10.5　分散された組織
      1. 複雑さに対応する組織
      2. 10.5.1　マイクロフロントエンドによる分散の意味
    6. 10.6　まとめ
  16. 付録A　開発者インタビュー：マイクロフロントエンドとの向き合い方
    1. ニミシャ・アスタギリ（Nimisha Asthagiri）　edXチーフアーキテクト
    2. フェリペ・ギザール（Felipe Guizar）　Wizelineシニアソフトウェアエンジニア
    3. アンソニー・フレナー（Anthony Frehner）　フロントエンドアーキテクト
    4. ジョエル・デニング（Joel Denning）　フロントエンドソフトウェア開発者、独立コンサルタント
    5. ザック・ジャクソン（Zack Jackson）　Lululemonプリンシパルエンジニア
    6. エリック・グライゼン（Erik Grijzen）　ソフトウェアエンジニア
    7. デビット・ライトナー（David Leitner）　SQUER Solutions共同設立者
    8. フィリップ・プラハト（Philipp Pracht）　SAPアーキテクト兼プロダクトオーナー
  17. 著者・訳者紹介
  18. 奥付

Product information

  • Title: マイクロフロントエンド ―マイクロサービスアーキテクチャの概念をフロントエンドに拡張し、信頼性、自律性の高いシステムを構築する
  • Author(s): Luca Mezzalira, 嶋田 健志
  • Release date: October 2022
  • Publisher(s): O'Reilly Japan, Inc.
  • ISBN: 9784814400027

You might also like

book

サイトリライアビリティワークブック ―SREの実践方法

by Betsy Beyer, Niall Richard Murphy, David K. Rensin, Kent Kawahara, Stephen Thorne, 澤田 武男, 関根 達夫, 細川 一茂, 矢吹 大輔, 玉川 竜司

『SRE サイトリライアビリティエンジニアリング』で、サイトリライアビリティエンジニアリング（SRE）はプロダクションサービスの稼働と信頼性の維持がサービス設計の基本であるとし、行動の基礎となる原則と理論を述べました。その実践編であり副読本でもある本書は、SREを組織やプロジェクトで導入するにあたり、必要となる具体的な方法や手順を解説します。またこれまでGoogle内部で得た技術的ノウハウを解説し、さらにEvernote、The Home Depot、New York Timesなどさまざまな企業での事例を紹介します。

book

進化的アーキテクチャ ―絶え間ない変化を支える

by Neal Ford, Rebecca Parsons, Patrick Kua, 島田 浩二

現代におけるエンタープライズアーキテクチャは、もはや静的な計画をあてにすることはできなくなっています。そしてソフトウェア開発エコシステムは、ツールやフレームワーク、技術イノベーションの流れと共に絶え間なく変化しています。こうした状況の中で、いったん構築したシステムを成長させていくには、さまざまな変化に適応しながら進化するアーキテクチャをシステムに組み込む必要があります。本書は、そうしたアーキテクチャを「進化的アーキテクチャ」と名付け、その構築に必要な考え方や技術、実践方法などについて解説するものです。

book

ドメイン駆動設計をはじめよう ―ソフトウェアの実装と事業戦略を結びつける実践技法

by Vlad Khononov, 増田 亨, 綿引 琢磨

ドメイン駆動設計はエリック・エヴァンスにより提唱されたソフトウェア設計の手法です。対象とする事業活動（ドメイン）とその課題の観点から、より良いソフトウェアを構築するために関係者が協力する方法を提供します。本書は4部構成になっており、第Ⅰ部「設計の基本方針」では、ソフトウェアの設計方針を大きな視点から決めるための考え方とやり方を取り上げます。第Ⅱ部「実装方法の選択」ではソースコードに焦点を合わせ、業務ロジックをどう実装するかの選択肢を学びます。第Ⅲ部「ドメイン駆動設計の実践」では、ソフトウェア開発の現場にドメイン駆動設計を実践的に取り入れるための方法を紹介します。第Ⅳ部「他の方法論や設計技法との関係」では、ドメイン駆動設計とそれ以外の方法論や設計技法との関係を検討します。最新の技術トレンドを取り入れながら、ドメイン駆動設計の基本概念と実践方法をわかりやすく解説します。

book

Googleのソフトウェアエンジニアリング ―持続可能なプログラミングを支える技術、文化、プロセス

by Titus Winters, Tom Manshreck, Hyrum Wright, 竹辺 靖昭, 久富木 隆一

Googleの現役ソフトウェアエンジニアたちが、超大規模ソフトウェアの開発と保守を長期的に支えてきたGoogle社内の多様なベストプラクティスを、文化、プロセス、ツールの側面からこの一冊に凝縮。時間と変化、規模と成長、トレードオフとコストという3つの基本原理に沿って、コードを持続可能にする方法論を紐解きます。「謙虚、尊敬、信頼」、心理的安全性、ダイバーシティとインクルージョンなど公正を重んじる文化から、コードレビューやテスト構成法など人間の行動を規定するプロセス、継続的インテグレーションや大規模変更システムなど変化への対応を支援する自動化ツールの基盤技術まで、Googleが試行錯誤を経て獲得した教訓を余すところなく紹介しています。経済学、心理学、マネジメント論などを背景にした人間への深い洞察をふまえ、データ駆動かつトレードオフから導かれる、定量的かつ定性的な決定プロセスも解説。Googleの成長力の源泉を理解でき、得られる知見は、学生から組織の意思決定者、小規模スタートアップからデジタルトランスフォーメーション（DX）を目指す大企業まで、幅広く活用できます。