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

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

-

シェアする

フォローする

次のページ

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

前のページ

ObsidianでiPhoneからGit Commitする

関連する記事

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

ヒューマンインターフェース ガイドライン という言葉を知りました。

最近、ヒューマンインターフェース ガイドライン(HIG)という言葉を知りました。 「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれてい

2026-01-24

フロントエンド
AIの利用上限に達した時にすることを残しておく

主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル

2026-01-22

フロントエンド
AI
CSSで頑張らなくても、SVGで楽にできるときもある

個人サイトをリニューアルをしています。 ノート風のデザインを目指して、スタイルを調整していました。 ノートの見た目は、現実にあるノートを再現しようとCSSを書いていました。 現在、以下の画像のようなノートになっています。 ノート風デザインの

2026-01-20

フロントエンド

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

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

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

2025-07-02

書籍レビュー
『マイクロインタラクション―UI/UXデザインの神が宿る細部』を読みました。

マイクロインタラクションという言葉をネットで見かけて、興味を持ちました。詳しく知るには書籍が最適だと思い、オライリー社の『マイクロインタラクション ―UI/UXデザインの神が宿る細部』https://www.oreilly.co.jp/books/9784873116594/を読みました。本書を通じて、細部にこだわることで、「仕方なく使う」から「次も使いたくなる」Webサービスを目指したいと感じました。以下は、その感想です。

2025-02-22

書籍レビュー
『レタースペーシング タイポグラフィにおける文字間調整の考え方』を読みました。

書店の本棚を眺めていると、「レタースペーシング タイポグラフィにおける文字間調整の考え方」というタイトルが目に留まりました。興味を引かれ、手に取って購入しました。読み終えたので、その感想をまとめます。

2025-02-11

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