マイクロフロントエンドとは?特徴やメリット、Webpackを使った実装例。APIコラム海外エンジニアエンジニア論PC機器・書籍HOMEJavaScriptJavaScript実践マイクロフロントエンドとは?特徴やメリット、Webpackを使った実装例。マイクロフロントエンドとは?特徴やメリット、Webpackを使った実装例。経験者向けWebアプリケーションの開発の世界では、毎年、新しいトレンドが生まれては、消えていったりしている。そんな中で最近よく耳にするようになったのが「マイクロフロントエンド」というコンセプト。名前からも察することが出来る通り、近年バックエンドで主流となってきているマイクロサービスアーキテクチャに触発されたアーキテクチャモデルであることは分かるが、実際のその特徴やメリットを理解している人はまだ少ない印象だ。この記事では、マイクロフロントエンドについてそのコンセプトやメリットなどを説明するとともに簡単な実装の例も紹介したい。業務で使用することになるかどうかはまだ分からないが、その概要は知っておいたほうがいいだろう。Webpackマイクロフロントエンドとは?マイクロフロントエンドはフロントエンドで用いられるアーキテクチャの名称。バックエンドのアーキテクチャとして標準になりつつある、マイクロサービスアーキテクチャの発想をフロントエンドに持ち込んだものでもある。マイクロフロントエンドの仕組みマイクロフロントエンドのアプリケーションでは、メインとなるアプリケーションに複数のアプリケーションを読み込んで画面を構成する。それぞれのアプリは単独でも動作するSPA(シングルページアプリケーション)であり、異なるURLポートを持つ。マイクロフロントエンドでは、コンテナーとなるアプリを「ホスト」、呼び出されるアプリを「リモート」などと呼ぶ。マイクロフロントエンドアーキテクチャのイメージ図それぞれのアプリでは任意のフレームワークを使用することができる。上の図で例を挙げると、ホストアプリをAngular・アプリAをReact・アプリBをVue.jsといった具合だ。それぞれのフレームワークは置き換え可能であるようにするため、各アプリを結合する際はフレームワークに依存するような実装は避けることが重要だ。マイクロフロントエンドの長所では、マイクロフロントエンドの長所を確認したい。開発チームのそれぞれが自分達の要望にあったフレームワークを使用することができる。複数のチームが並行して作業を進めることが容易となるため開発速度が上がる。アプリの一部のみを一から作り直すといった要望に対処しやすい。開発の際にアプリ全体を読み込まなくもいいので開発スピードは早くなる。マイクロフロントエンドの短所マイクロフロントエンドにはまだまだ技術的な問題も少なくない。ユーザ認証とユーザ権限の管理が複雑になるCSSクラスの予期せぬ上書きによるデザインの崩壊アプリ間でルーティングを同期する必要があるブラウザナビゲーションの管理が複雑になるまた、マイクロフロントエンドをサポートするライブラリなどは変更が頻繁にあるため、不具合が発生することも多い。Webpackマイクロフロントエンドの実装にはWebpackというライブラリが使用されることが多い。Webpackはモジュールバンドラーであり、プロジェクト内のHTML・CSS・画像データなどを静的なアセットへと変換する役割を担う。マイクロフロントエンドの実装においては、Webpackに含まれる「ModuleFederationPlugin」と「HtmlWebpackPlugin」を使用することが多い。執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。関連する記事StorybookをReactアプリで使う!導入のメリットとセットアップの手順。2021.12.16この記事では、フロントエンド開発に新しい波を巻き起こしているライブラリ「Storybook」についてその特徴やセットアップの手順などを説明する。Jest!JSテストフレームワークを徹底比較。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。