ホーム自己紹介ブログ
NO.96
DATE2022. 11. 13

「マイクロフロントエンド」を読みました

DAZN の Luca Mezzalira さんが書かれたマイクロフロントエンド を読みました。簡単な書籍レビューを残しておこうかなと思います。

なぜマイクロフロントエンドを使うのか

従来のモノリスなフロントエンドから、マイクロフロントエンドに置き換えることで、どういう価値があるのでしょうか。 書籍に書いてある内容と、自身の意見を混ぜて以下に列挙します。

  • 機能開発のイテレーションが短くなる
    • 1 チームに 1 サブドメインという小さなスコープのため
  • チーム内の意思決定がしやすい
    • コードベースが小さいため
  • リリース速度が早い
    • 各チームが独立しているため

1 チームが小さなサブドメインで独立することで、開発やコミュニケーション、リリースなどのコスト低減ができます。 これは、最終的には顧客への価値提供するサイクルを短くすることに繋がります。

マイクロフロントエンドの導入方法

書籍には、実例として既存アプリケーションをマイクロフロントエンドへマイグレーションする話があります。 マイクロフロントエンドは、その設計の性質上、基本的に(既存アプリケーションからの)マイグレーションとセットです。 そのため、マイグレーションをどのように進めるかというのは、とても重要です。

その中で、マイクロフロントエンドへの最初の一歩として、次のパターンがあります。

  • 共有コンポーネントをマイクロフロントエンドとしてリリース
  • 新機能をマイクロフロントエンドとしてリリース
  • 既存アプリケーションの一部をマイクロフロントエンドとしてリリース

要は、段階的に導入しましょうという話です。 また、マイクロフロントエンドには、従来の SPA 開発に似ている垂直分割という方法が最初の一歩としてお勧めのようです。

  • 垂直分割
    • 1 つの画面に 1 つのマイクロフロントエンド
  • 水平分割
    • 1 つの画面に複数のマイクロフロンエンド

ちなみに、マイクロフロントエンドとコンポーネントは、次のように区別します。

  • マイクロフロントエンド
    • サブドメインのビジネス表現
    • ロジックをカプセル化し、イベント通信
  • コンポーネント
    • 再利用性の目的で使用される技術的ソリューション
    • 拡張しやすく複数のプロパティを公開

書籍にあった好きな言葉

付録にある、New Relic で働かれている Erik Grijzen さんのインタビュー記事にて、

  • Q. マイクロフロントエンドを 3 語で表現すると
  • A. Scaling UI Development

という回答がありました。 Scaling UI Development という言葉、めちゃくちゃ好きになりました。

マイクロフロントエンドは、フロントエンドをサブドメインで分割し、小さく独立した開発が可能となります。 大規模な 1 つのアプリケーション開発や、1 つのブランド内の様々なプロダクトを提供するアプリケーション開発に対しては、マイクロフロントエンドは効果的だと思っています。

終わりに

余談ですが、ブログを書く時間が、徐々に減っています。 1 年前とかは、1 日とか使っていたんですが、今日は 30 分とかです。 効率化できている訳じゃなく、単純に時間がなくなってきたなと思います。

フロントエンド
書籍レビュー

-

読者になる

|

シェアする

|

silverbirders

silverbirder

Webソフトウェアエンジニア

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

※ ログイン不要で投稿できます。

※ 同じブラウザから投稿を削除できます。

0

読み込み中...

次の記事へ前の記事へ

関連する記事

タグ「フロントエンド」の記事

Webフロントエンドのコードレビューメモ2

また、以下の記事の続きを書こうと思います。 https://silverbirder.github.io/blog/contents/20260312/ ビジネスロジック アプリケーションのビジネスロジックに関することについて書きます。 複

2026年03月18日

フロントエンド
Webフロントエンドのコードレビューメモ

Webフロントエンドのコードレビューをしているときに考えていることについて書きます。 毎日1記事投稿、1記事30分という制約を課していますので、本記事は完璧ではありません。(言い訳) また希望的な考えもあるので、実践していないものもあります

2026年03月12日

フロントエンド
AIの書いたコードの手直しを減らすお作法

AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht

2026年02月25日

AI
フロントエンド

タグ「書籍レビュー」の記事

『Webブラウザエンジニアリング』を買いました。

以下の書籍を購入しました。 Chrome開発者による、ブラウザの仕組みについて解説されています。 https://www.oreilly.co.jp//books/9784814401574/ ちょうど今朝、自宅へ届きました。 ページ数が5

2026年03月17日

書籍レビュー
『CSS 優良デザイン×アイデア事典 プロがシェアする現場の即戦力テクニック』を読みました。

以下の書籍を読みました。 感想について書こうと思います。 https://books.mdn.co.jp/books/3225303033/ 概要 本書では、数年以内に流行った比較的新しいCSSテクニックについて紹介されていました。 例えば

2026年03月15日

書籍レビュー
『CSS 優良デザイン×アイデア事典 プロがシェアする現場の即戦力テクニック』を買いました。

Googleレコメンドで、以下のCSSに関する書籍が流れてきました。 CSS 優良デザイン×アイデア事典 プロがシェアする現場の即戦力テクニック｜株式会社エムディエヌコーポレーション - books.mdn.co.jp なんとなくレコメンド

2026年03月10日

書籍レビュー
← ブログ一覧へ