マイクロフロントエンドとは何ですか？

フロントエンドアプリケーションを複数の小さなアプリに分割し、独立したチームがそれぞれを開発・デプロイできるようにするアーキテクチャです。マイクロサービスの考え方をフロントエンドに適用したものです。

マイクロフロントエンドのポイントは？

フロントエンドを機能ごとに分割し、別々のチーム・技術スタックで独立開発できる。マイクロサービスの考え方をフロントエンドに適用したアーキテクチャ。Module Federation・Single-SPA・Web Componentsなどの技術で実現される

【まいくろふろんとえんど】

💡 巨大フロントエンドを小分けにして、チームごとに独立開発する戦略

📌 このページのポイント

マイクロフロントエンドによる独立開発

ひよこ

マイクロフロントエンドって、マイクロサービスのフロントエンド版みたいなもの？

ペンギン先生

まさにそう！バックエンドをマイクロサービスで分割しても、フロントエンドが巨大な一枚岩だとチーム間の調整が大変でしょ？フロントエンドも機能ごとに分割して、各チームが独立して開発できるようにする考え方だよ

ひよこ

具体的にどう分けるの？

ペンギン先生

たとえばECサイトなら「商品検索」「カート」「レビュー」「決済」をそれぞれ別のフロントエンドアプリとして作るんだ。チームAはReactで検索を、チームBはVueでカートを作る、なんてことも可能だよ

ひよこ

別々に作ったものをどうやって1つのページにまとめるの？

ペンギン先生

主な方法が3つあるよ。WebpackのModule Federationで実行時に合体させる方法、iframeやWeb Componentsで埋め込む方法、それからサーバーサイドでHTMLを組み立てる方法。最近はModule Federationが人気だね

ひよこ

デメリットはないの？

ペンギン先生

あるよ。各アプリのJSバンドルが重複してページ全体のサイズが膨らんだり、アプリ間の状態共有が複雑になったりするんだ。小規模チームだと運用コストが利点を上回ることもあるから、「チーム間の調整がボトルネックになっている」という明確な課題がある組織で効果を発揮するよ

まとめ：ざっくりこれだけ覚えればOK！

「マイクロフロントエンド」って出てきたら「フロントエンドを小さく分割して独立開発する手法」と思えればだいたいOK！

📖 おまけ：英語の意味

「Micro Frontends」＝小さなフロントエンド群

💬 バックエンドのマイクロサービスと対になる概念で、2016年のThoughtWorks Technology Radarで紹介されたのが広まるきっかけだよ