Chapter 02無料公開

Micro Frontends in 3 minutes

Micro Frontendsは、スケールする組織が疎結合かつ柔軟に機能開発することを大きな目的としています。

そのため、Micro Frontendsでは、Cross Functionalなチームの重要性を説いています(Cross Functional Teamはスクラムにも登場するベースとなる考え方です)。Microservicesはバックエンドアーキテクチャが中心の話で、それだと自律的な組織を実現するのにいくつかの問題がありました。例えば、Microservicesを結合するレイヤー(フロントエンドなど)が結局モノリスになりがちなところ、バックエンドエンジニア以外には適応できず、スクラムのセオリーから外れてしまうこと、などがあります。Micro Frontendsの発想としては、「フロントエンドをMicroservices化しよう」というよりも、「フロントエンドもバックエンドもデザインもビジネスサイドも含め、Cross Functionalなチームを切り出し、自律的に素早く開発できる組織にしよう」というものが根本的にあります。

技術的には、「Web Componentでいい感じにUIパーツをMicroservices化する」のようなイメージを持っているかもしれません。しかし、Micro Frontends自体は昔から存在していて、その代表例としてiframeがあります。また、昨今では、切り出したコンポーネント(Fragmentsと呼ばれます)のコンポジションパターンもいくつかありますし、レンダリング用にリバースプロキシを用意するようなアーキテクチャもあります。それらの昔ながらの手法や、昨今の分散システム・組織的な課題に応える手法に対して、Micro Frontendsという名前を付けた、というのが正しい理解です。

故に、Micro Frontendsは、単に「UIを共通コンポーネントに切り出そうね」という話ではありません。また、「何か特定の手段や技術」について述べているものでもありません。前述したようなMicro Frontendsのコンセプトがあり、それらを実現するいくつかの手法が存在します(後述する micro-frontends.org の「The DOM is the API」という言葉のインパクトも誤解を招く一因だと筆者は考えます)。そのため、組織の課題によっても解決方法は変化すると考えています。

Micro Frontendsのコンセプトについてもっと知りたい方は、以下の2つを一読することをおすすめします。

さらに詳しく知りたい方は、ぜひMicro Frontends in Actionという書籍を読んでみてください。コンセプトや具体的な手法、パフォーマンスやデザインシステム、アセット管理まで体系的に網羅されています。

また、本書のReading Listでは、実際の事例も含め、筆者が有用だと判断した情報をまとめています。このReading Listは、本書以上に価値のあるチャプターになっておりますので、ぜひご活用ください。

本書では、はじめにで述べたようなアーキテクチャの紹介をメインとし、Micro Frontendsにどう関わりがあるかもあわせてお伝えできればと思います。