ホーム自己紹介ブログ
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 分とかです。 効率化できている訳じゃなく、単純に時間がなくなってきたなと思います。

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

-

コメント

0

読み込み中...

シェアする

フォローする

購読する

次のページ

2022年の振り返り。転職と妊活

前のページ

ObsidianでiPhoneからGit Commitする

関連する記事

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

AIの書いたコードの手直しを減らすお作法

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

2026年02月25日

AI
フロントエンド
iframeの難しさ

最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ

2026年02月18日

フロントエンド
ブラウザ
SVGを書くと数学の知識が必要だった

紙を積んだイラストをSVGで書こうとしていました。 (当たり前ですが)図形を表現するためには数学の知識が必要で、学生の頃の記憶を思い出したので疲れました。 所感について、諸々書こうと思います。 成果物 実際に完成したのは、以下の画像ができま

2026年02月17日

フロントエンド

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

『Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ』を読みました。

たまたま、Googleレコメンドに "Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ" の本へのリンクが流れてきました。 Webフォントの記事って、あまり見かけなかったのでAmazonでポチりまし

2026年02月12日

書籍レビュー
久々に本を読んでよかったこと

今日、4ヶ月以上放置していた本を読み始めています。 読み始めて、本ってやっぱ良いものだなと思うことがありました。 そのことについて、簡単に書こうかなと思います。 今読んでいる本 "Webフォント実践ガイド Google Fontsではじめる

2026年02月11日

書籍レビュー
『ザ・ダークパターン ユーザーの心や行動をあざむくデザイン』書籍レビュー

今回、以下の書籍を読みました。『ザ・ダークパターン ユーザーの心や行動をあざむくデザイン』せっかくなので、感じたことや気づきをまとめてみます。

2025年07月02日

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