Contents
スポンサーリンク
概要
「マイクロフロントエンド ―マイクロサービスアーキテクチャの概念をフロントエンドに拡張し、信頼性、自律性の高いシステムを構築する」を読んだので感想を書こうと思います。
スポンサーリンク
書籍概要
どんな本？
DAZNでアーキテクトを務めた著者が、マイクロフロントエンドアーキテクチャの概念、長所と短所、導入のポイントなどを俯瞰的に説明します。プロジェクトに適したアーキテクチャをどのように見極めるべきかについて、デプロイ可能性、モジュール性、テスト容易性、パフォーマンス、開発者体験といった観点から、多角的に分析することの重要性を強調します。
また、マイクロフロントエンドを導入する予定がない組織にとっても、自律性、生産性の高いチーム作りのヒントを得ることができます。
巻末の付録では、開発の最前線で活躍する8人にインタビュー。マイクロフロントエンドの威力、可能性、落とし穴など、開発現場の貴重な「生の声」を収録。一筋縄ではいかない開発の風景を垣間見ることができます。実装サンプルはすべてGitHubから利用可能です。
- Luca Mezzalira 著、嶋田 健志 訳
- 2022年10月 発行
- 404ページ
- 定価3,740円(税込)
スポンサーリンク
内容のまとめと感想
本書は「マイクロフロントエンド」という、フロントエンドの新しいアーキテクチャに関して書かれた書籍です。
昨今耳にする事が多くなったマイクロサービスは、基本的にバックエンド側の処理を細かく分割しようというアーキテクチャの考え方ですが、フロントエンド側をマイクロサービス化して細かく分割しようというのがマイクロフロントエンドと呼ばれるものになります。
基本的にReactやVueといったSPAフレームワークを使用する前提になるので、これらの考え方を理解している必要があります。(本書で出てくる多くのコードはReact。)
抽象度が高い話が中心
マイクロフロントエンドの概念や考え方、トレードオフといった抽象的な話が多く、具体的な実装やフレームワークの使用方法を学ぶといったものではありません。
(一部にReactを使用した一連の流れの例などはあります。)
これは以前紹介した、マイクロサービスを学ぶための書籍である「ソフトウェアアーキテクチャ・ハードパーツ」でも何度も挙げられていましたが、アーキテクチャ自体の最適解はケースバイケースとなるため、単一の答えは無く、判断するための考え方や評価方法を知って各が判断する必要がある事に起因しているのだと思います。
本書でも、マイクロフロントエンドの実現パターンとして大きく分けて２種類のパターン(+その中で細かく分かれた実装パターンが数種類)が特性の評価付きで紹介されており、トレードオフを理解してケースに応じてどれを使用するのかを判断するための考え方を学ぶ事ができるようになっています。
マイクロフロントエンド化する理由
従来のWebアプリケーションでは、多くのロジックはバックエンドで実行され、フロントエンドは薄く、大規模になってもマイクロサービス化の必要性があまり生じなかったためと書かれています。
しかしながら昨今のSPAの隆盛により、フロントエンド側もロジックを持ち大規模になったため、部分的なリリース可能な必要性が発生しています。
この構造を採用する事で、各チームが独立してフロントエンドのデプロイが可能になる事がメリットとして挙げられています。
２種類の分割方法
どのようにUIを分割するのかといった方法として、垂直分割と水平分割の2種類の方法が本書では紹介されています。
分割方法は違えど基本的にマイクロサービスと同じく、ドメインによる分割が重要となります。
垂直分割
認証、カタログ、カスタマーサポートなどドメインによる機能のページの塊ごとに分割する方法。
アプリケーションシェルといった薄いルートのレイヤがURLに応じて、機能のモジュールのロードとアンロードを行う。
従来のSPAに近く、学習コストが低く導入の敷居が低い。各ドメインごとのモジュールや機能の共有が難しくなる。
水平分割
画面を構成するモジュール単位で分割する方法。データの共有方法や管理など学習コストの増加するが、細かいレベルでのモジュールの共有化が可能になる。
フロント、エッジ、サーバー、どのレイヤでUIを組み立てるのかなど、幅広い選択肢がある。
分割の方法に関しても、WebPackのモジュールフェデレーションやiframeによる分割など、色々な選択肢があり、それぞれのトレードオフが紹介されている。
本書ではこの水平分割によるReactを使用したアプリケーションのコード例が紹介されている。
付随する環境関連の内容もカバー
DevOpsや自動テスト、レポジトリの構造など、マイクロフロントエンド化することで新たに生じる問題や知見が多く語られていて、プログラムの構造だけではなく、多くの考慮すべき事項に関して書かれていて参考になります。
自動テストなどは分割することで、テストの責任の所在などが分断されてしまう可能性などが書かれていてなるほどなぁと思いました。
加えてバックエンドとの連携の方法などにも触れられています。
インタビューが載っている
文末にはマイクロフロントエンドに関わったことがある、エンジニア数名のインタビューが載っています。
マイクロサービスと比較して、まだまだ一般化されていない概念なので実際に関わった事のあるエンジニアのインタビューはより実践的な含蓄を含んでいて面白いですね。
まとめ
マイクロフロントエンドという概念自体がまだまだ一般化していない中で、基本的な概念や構造などを学ぶ事ができる書籍です。
このアーキテクチャ自体が決まった1つのパターンというわけではなく、様々な選択肢があるため、その選択のためのトレードオフを学ぶ事ができるのが本書の特徴かと思います。
実装コードも部分的ではありますが、Reactベースに書かれていて、読むだけでもある程度雰囲気を掴む事ができます。
マイクロフロントエンドを導入しようという事自体はまだまだ少ないと思いますが、どういったものなのかを知るには最適な一冊だと思います。