マイクロフロントエンドとは？特徴やメリット、Webpackを使った実装例。

Webアプリケーションの開発の世界では、毎年、新しいトレンドが生まれては、消えていったりしている。そんな中で最近よく耳にするようになったのが「マイクロフロントエンド」というコンセプト。

名前からも察することが出来る通り、近年バックエンドで主流となってきているマイクロサービスアーキテクチャに触発されたアーキテクチャモデルであることは分かるが、実際のその特徴やメリットを理解している人はまだ少ない印象だ。

この記事では、マイクロフロントエンドについてそのコンセプトやメリットなどを説明するとともに簡単な実装の例も紹介したい。

業務で使用することになるかどうかはまだ分からないが、その概要は知っておいたほうがいいだろう。

マイクロフロントエンドとは？

マイクロフロントエンドはフロントエンドで用いられるアーキテクチャの名称。

バックエンドのアーキテクチャとして標準になりつつある、マイクロサービスアーキテクチャの発想をフロントエンドに持ち込んだものでもある。

マイクロフロントエンドの仕組み

マイクロフロントエンドのアプリケーションでは、メインとなるアプリケーションに複数のアプリケーションを読み込んで画面を構成する。

それぞれのアプリは単独でも動作するSPA（シングルページアプリケーション）であり、異なるURLポートを持つ。

マイクロフロントエンドでは、コンテナーとなるアプリを「ホスト」、呼び出されるアプリを「リモート」などと呼ぶ。

それぞれのアプリでは任意のフレームワークを使用することができる。上の図で例を挙げると、ホストアプリをAngular・アプリAをReact・アプリBをVue.jsといった具合だ。

それぞれのフレームワークは置き換え可能であるようにするため、各アプリを結合する際はフレームワークに依存するような実装は避けることが重要だ。

マイクロフロントエンドの長所

では、マイクロフロントエンドの長所を確認したい。

• 開発チームのそれぞれが自分達の要望にあったフレームワークを使用することができる。
• 複数のチームが並行して作業を進めることが容易となるため開発速度が上がる。
• アプリの一部のみを一から作り直すといった要望に対処しやすい。
• 開発の際にアプリ全体を読み込まなくもいいので開発スピードは早くなる。

マイクロフロントエンドの短所

マイクロフロントエンドにはまだまだ技術的な問題も少なくない。

• ユーザ認証とユーザ権限の管理が複雑になる
• CSSクラスの予期せぬ上書きによるデザインの崩壊
• アプリ間でルーティングを同期する必要がある
• ブラウザナビゲーションの管理が複雑になる

また、マイクロフロントエンドをサポートするライブラリなどは変更が頻繁にあるため、不具合が発生することも多い。

Webpack

マイクロフロントエンドの実装にはWebpackというライブラリが使用されることが多い。

Webpackはモジュールバンドラーであり、プロジェクト内のHTML・CSS・画像データなどを静的なアセットへと変換する役割を担う。

マイクロフロントエンドの実装においては、Webpackに含まれる「ModuleFederationPlugin」と「HtmlWebpackPlugin」を使用することが多い。