マイクロフロントエンドなアプリを qiankun を用いて実装する Part.1

はじめに

NRI で主にフロントエンドやバックエンドにおける開発標準化や技術支援の業務を担当している酒井です。先日マイクロフロントエンドについて調査する機会があり、qiankun を用いてアプリケーションを実装しました。本記事ではその内容を紹介しますが、一記事に全て載せると膨大になってしまうため、後日 Part.2、Part.3と続編記事を公開予定です。

最近はマイクロフロントエンドという言葉も一般的になってきましたが、本記事で

マイクロフロントエンドとは何か
実務に活かせそうか

など使うにあたり気になる点をお伝えできればと思います。

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

マイクロフロントエンドを一言で表すと、「マイクロサービスの考え方をフロントエンドに拡張したもの」です。

2016年末にThoughtworks, Inc.が提供する、Technology Radarで言及され、最近は先進的なテック企業やユーザ企業において採用実績も増えてきました。以下にmicrofrontends orgから引用したアーキテクチャ図を引用します。

特徴・メリット

マイクロフロントエンドは様々な特徴やメリットが存在しますが、本記事ではその中でも代表的なものを紹介します。

観点	説明
独立性	・各マイクロフロントエンドを独立して開発・デプロイが可能となる。・ある部分の変更やエラーが他の部分に影響を与えにくくなり、保守性が向上する。
柔軟性	・異なる技術スタックを使用して各マイクロフロントエンドを開発することができる。・適切なツールやフレームワークを選択し、特定のニーズに合わせた最適な解決策を導入できる。・異なるチームが異なる技術を使用することで新しい技術への探求心を促進することが可能となる。
俊敏性	・各チームで独立して開発を進めることができるため、迅速な開発が可能となる。・各マイクロフロントエンドごとに影響範囲が局所化されるため、改修時に影響を特定しやすく、改修～再ビルド・デプロイが迅速化される。

ユースケース

マイクロフロントエンドを採用するにあたり、一般的なユースケースとして以下が挙げられます。
以下のような課題やアプリケーション特性を持つ場合、特にマイクロフロントエンドと相性が良いです。

課題

モノリシックなフロントエンドのコードが肥大化し、以下のような課題が発生している。

コードの認知コストが増大する。
ビルド/デプロイに時間がかかる。
改修に伴う影響調査コストの増加、及びフロントエンドエンド全体の再ビルド・デプロイが発生する。

アプリケーション特性

ポータル・ダッシュボードのように、1画面に複数の異なる情報・業務が集約されている。
UI/UX 向上のため、フロントエンドの部分的な改修が頻繁に発生する。
EC サイトのようにビジネスドメイン境界が明確に定まっている。

上記に合致していないシステムをマイクロフロントエンド化しようとした場合、導入するオーバーヘッドがかえって増加してしまう可能性が高いため、導入は慎重に検討する必要があります。

実装方式

マイクロフロントエンドなアプリの実装方式として、それぞれのマイクロフロントエンドをどのレイヤーで組み合わせるかという議論が存在します。

主な選択肢として、

クライアントサイド
エッジサイド（CDN）
サーバサイド

が存在しますが、近年では React, Angular, Vue といった SPA による開発事例が多く、マイクロフロントエンドを実現する JavaScript フレームワークも整備されてきていることから、「クライアントサイド」の場合の実装方式について紹介します。
他の選択肢の紹介については、O'Reilly Japan - マイクロフロントエンドを参照いただけたらと思います。

実装パターン

クライアントサイドでマイクロフロントエンドを統合する方法として、4つの実装パターンを紹介します。
本記事では以下のパターンの中でも昨今一般的となっており、実装にあたって採用メリットが多い JavaScript 処理方式を採用しています。

実装方式	説明・特徴	実装例
ビルドタイム統合 npm パッケージ方式	マイクロフロントエンドをパッケージ単位でそれぞれビルド、公開し、統合アプリが依存関係として管理する。 ■ 特徴・部分的な変更毎にマイクロフロントエンドを再ビルド、リリースが必要となる。・断面固定を行うリリースプロセスの綿密な整備を要し、生産性低下が懸念される。	`{ "name": "@catalog/container", "version": "1.0.0", "dependencies": { "@catalog/dash-board": "^1.2.3", "@catalog/help": "^4.5.6", "@catalog/user-profile": "^7.8.9" } }`
ランタイム統合 iframe 方式	iframe の性質を利用して独立したサブページをメインアプリ上に表示させる。 ■ 特徴・スタイルや変数がアプリ間で干渉しないため機能・役割分離性に優れる。・セキュリティリスクの懸念から、iframe の有効化を避けたい場合がある。	`<html> <body> <iframe id="mfe"></iframe> <script type="text/javascript"> const i = document.getElementById("mfe"); i.src = route[window.location.pathname]; </script> </body> </html>`
ランタイム統合 JavaScript 処理方式	個々のマイクロフロントエンドをバンドルした JavaScript を作成し、アプリに統合させる。 ■ 特徴・データの受け渡しやルーティング等、フレームワークの提供機能が充実している。・独立したデプロイが可能であり、チーム体制を組み立てやすい。・既存のフレームワーク(React, Angular, Vue 等)をサポートしている。	`<html> <body> <h1>Welcome to the MFE restaurant!</h1> <script src="https://a.jp/main.js"></script> <script src="https://b.jp/main.js"></script> <script src="https://c.jp/main.js"></script> <div id="micro-frontend-root"></div> </body> </html>`
ランタイム統合 WebComponent 方式	独自 HTML タグとして部品を定義し、それらを組み合わせてアプリを構築する。 ■ 特徴・コードをカプセル化できるため、独立性に優れる。・歴史が浅く、スタイリングが容易でない等の課題がある。	`<html> <body> <div><user></user></div> <script src="./user.js"></script> </body> </html>>`

コンポーネント分割単位

マイクロフロントエンドなアプリを実装するにあたり重要になるのは、どの単位（コンポーネント）でマイクロフロントエンドを分割するかを決定することです。
分割の単位については導入プロジェクトの特性によりますが、大きな分割の考え方として技術的な観点から以下の2通りが存在します。

水平分割：複数のマイクロフロントエンドを同一ビュー上に配置する。
垂直分割：ビジネスドメイン単位でマイクロフロントエンドを実装する。

qiankun を用いたマイクロフロントエンドの実装

qiankun は JavaScript 処理方式を実現するマイクロフロントエンドをより簡単かつ容易に構築するための OSS フレームワークです。公式ドキュメントは主に中国語で記載されていますが、英語版も公開されています。
最も主流なマイクロフロントエンドのフレームワークであるsingle-spaをベースに機能拡張されており、アリババグループや Ant Financial 等大規模企業での利用実績があることから堅牢性と信頼性が高いことで知られています。

また、今記事の実装例は React を用いて紹介します。qiankun のチュートリアルにも各 SPA フレームワークにおける実装例が紹介されていますので、そちらも合わせてご参照ください。

まず、プロジェクトをcreate-react-appで作成し、qiankun をインストールします。以下ではプロジェクト名にqiankun-sample、テンプレートにtypescriptを用いています。

$ npx create-react-app qiankun-sample --template typescript
$ cd qiankun-sample
$ npm install qiankun

続いてマイクロフロントエンドのメインアプリ（http://localhost:2000）の実装例を紹介します。qiankun を用いてマイクロフロントエンドなアプリを実装する場合、メインアプリにおいて内包するサブアプリを登録する必要があります。そこで、上記で紹介した垂直分割と水平分割の例を紹介します。
また、以下ではサブアプリがhttp://localhost:3000とhttp://localhost:4000で2つ起動していることを前提としています。

qiankun を用いた垂直分割の実装

垂直分割の場合、以下のように同じ DOM（vt-container）に各サブアプリが表示されるように登録する必要があります。

function App() {
  return <div id="vt-container"></div>;
}

export default App;

import { registerMicroApps, start } from 'qiankun';
const registerSubApps = () => {
  registerMicroApps([
    {
      name: 'vertical-sub1',
      entry: '//localhost:3000',
      container: '#vt-container', // 垂直分割の場合はサブアプリを入れるDOMのidが同一となる
      activeRule: '/vt-sub1',
    },
    {
      name: 'vertical-sub2',
      entry: '//localhost:4000',
      container: '#vt-container', // 垂直分割の場合はサブアプリを入れるDOMのidが同一となる
      activeRule: '/vt-sub2',
    },
  ]);
  start();
};
export default registerSubApps;

上記のような実装を行うことで、以下のようにhttp://localhost:2000/vt-sub1にアクセスするとhttp://localhost:3000で起動しているアプリが表示され、http://localhost:2000/vt-sub2にアクセスするとhttp://localhost:4000で起動しているアプリが表示されます。

qiankun を用いた水平分割の実装

水平分割の場合、以下のようにそれぞれ別の DOM（hr-container1、hr-container2）に各サブアプリが表示されるように登録する必要があります。
また、注意として複数のマイクロフロントエンドを同じ画面に出す場合、singular: falseと設定する必要があります（参考：qiankun の FAQ）。

function App() {
  return (
    <div style={{ display: 'flex' }}>
      <div style={{ width: 'calc(100% - 400px)' }} id="hr-container1"></div>
      <div style={{ width: '400px' }} id="hr-container2"></div>
    </div>
  );
}

export default App;

import { registerMicroApps, start } from 'qiankun';
const registerSubApps = () => {
  registerMicroApps([
    {
      name: 'horizontal-sub1',
      entry: '//localhost:3000',
      container: '#hr-container1',
      activeRule: '/hr',
    },
    {
      name: 'horizontal-sub2',
      entry: '//localhost:4000',
      container: '#hr-container2',
      activeRule: '/hr',
    },
  ]);
  start({ singular: false }); // 水平分割の場合はsingular: falseの設定が必要
};
export default registerSubApps;

上記のような実装を行うことで、以下のようにhttp://localhost:2000/hrにアクセスするとhttp://localhost:3000で起動しているアプリと、http://localhost:4000で起動しているアプリが同時に表示されます。

おわりに

本記事では、マイクロフロントエンドの概要から qiankun を用いたマイクロフロントエンドの実装までをご紹介しました。ご興味のある方は是非試してみてください。
後日、開発したアプリケーションやマイクロフロントエンドを導入する際のアプローチや組織論についてもご紹介予定ですので、楽しみにお待ちいただけたらと思います。