Microfrontend

マイクロフロントエンドを分かりやすく

マイクロフロントエンドとは、大規模なフロントエンド開発を小さな部分に分割し、それぞれを独立して開発・デプロイできる設計原則のことを指します。バックエンドのマイクロサービスアーキテクチャが前提とするような、サービスの独立性やスケーラビリティをフロントエンドにも持ち込むことが目指されています。

このアプローチは、大規模なアプリケーションでも各機能を個々のマイクロフロントエンドとして開発することで、より直感的に管理しやすく、拡張性も増します。たとえば、商業ウェブサイトの場合、ホームページ、製品ページ、ショッピングカート、ユーザープロフィールなど、それぞれが独立したマイクロフロントエンドとして開発できます。

それぞれのマイクロフロントエンドは独自のコードベースを持つことができ、異なるフレームワークやライブラリを使用して開発することも可能です。これにより、各チームは自分たちのニーズに最適なツールを自由に選ぶことができます。

マイクロフロントエンドの歴史的変遷

マイクロフロントエンドの概念は2010年代中頃に始まり、バックエンドのマイクロサービスアーキテクチャの成功を受けて生まれました。これにより、各サービスが独立してスケールし、自身のライフサイクルを持つことが可能になりました。

この考え方がフロントエンドにも適用されると、大規模なフロントエンドアプリケーションも独立した部分に分割できるようになり、それぞれが自身のライフサイクルを持つことが可能となりました。これにより、全体のコードベースが大きくなる問題を回

避し、また各部分を独立して更新、デプロイできるようになりました。

マイクロフロントエンドとJamstackの関係

Jamstackとは、JavaScript、API、Markupからなるモダンなウェブ開発アーキテクチャです。このアーキテクチャを使うと、ウェブサイトのパフォーマンスを向上させ、開発者の生産性を高め、セキュリティを強化することができます。

Jamstackとマイクロフロントエンドは、実は結構親和性が高いのです。なぜなら、Jamstackの原則は、事前に生成された静的ファイルを利用することで高速化とセキュリティを実現することに焦点を当てています。これらの静的ファイルは、各マイクロフロントエンドから生成されることが可能です。これにより、各マイクロフロントエンドは独立して開発し、更新し、デプロイすることが可能となります。

マイクロフロントエンドを使うメリット

技術スタックの自由度

マイクロフロントエンドでは、各部分は独立したコードベースを持つため、自由に技術スタックを選ぶことができます。これにより、最適なツールを用いて各部分を最適化することが可能になります。

開発速度と生産性

マイクロフロントエンドのアーキテクチャは、チーム間の依存関係を減らし、それぞれが自立して動作することを可能にします。これにより、開発速度と生産性が向上します。

リスクの軽減

一部のマイクロフロントエンドで問題が発生したとしても、他の部分に影響を与えずに修正やアップデートを行うことができます。これにより、全体のリスクを軽減することができます。

マイクロフロントエンドを学ぶ

以下に、マイクロフロントエンドを学ぶのに役立つリソースをいくつか紹介します。

リソース名	説明
Micro Frontends - Martin Fowler	マイクロフロントエンドの基本概念や利点、デメリットを詳しく説明しています。
Micro Frontends by Cam Jackson	マイクロフロントエンドの概念とその実装方法について深く掘り下げています。
Micro Frontends in Action by Michael Geers	マイクロフロントエンドの開発について実践的なアドバイスを提供しています。