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

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 分とかです。 効率化できている訳じゃなく、単純に時間がなくなってきたなと思います。

-

読者になる

|

シェアする

|

ブログを応援する

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

おふせぼたん

関連する記事

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

Webmention 使ってみた

Webmention というのを最近知りました。 名前の通り、Web 上でメンションすることができます。 受信側、送信側、どちらも対応したので感想を残そうと思います。 Webmention ざっくりと Web AサイトにBサイトのリンクをつ

2026年09月08日

フロントエンド

個人開発

モジュールアップデートでやっていること

ITヲタクな AI くんにピッタリな仕事の一つは、モジュールアップデート。 特に、メジャーアップデートが超助かる。 昔だったら 数ヶ月掛かった移行も、数日たらずに対応できるようになったので、 さすが ITヲタクくん。 対応してよかったフロー

2026年07月24日

AI

フロントエンド

写経テストコードを全部消した

以下で書いた通り、プロダクトコードを写経したテストコードを削除しました。 "こぶりー" ( https://kobliy.vercel.app/ ) という個人ブログを読むアプリのコードです。 https://silverbirder.gi

2026年06月08日

AI

フロントエンド

テスト

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

ブローガスト15日目: 『ウェブ配色 決める! チカラ』を読みました。

前回同様、昔読んだけど感想が残せていない以下の本『ウェブ配色 決める! 』について、 簡単に感想をまとめておこうと思います。 https://www.color-fortuna.com/writing/deciding-power-for-

2026年08月15日

書籍レビュー

ブローガスト14日目: 『カラー・アクセシビリティ』を読みました。

前回同様、今回は『カラー・アクセシビリティ』の本の書籍レビューを書きます。 https://book.mynavi.jp/ec/products/detail/id=138894 色盲 色盲の人は、日本では男性の約5％（20人に1人）、女性

2026年08月14日

書籍レビュー

ブローガスト13日目: 『いろいろな、いろ』を読みました。

前回同様、過去読んだ本の書籍レビューを残したいため、 今回は『いろいろな、いろ』 について書き残そうと思います。 https://ingectar-e.com/books/iroironairo あまり書けることがありませんでした...。

2026年08月13日

書籍レビュー

← ブログ一覧へ