一覧に戻る
Lv.2

マイクロフロントエンド

Micro Frontends

Webサイトの見た目を作る部分を、機能ごとに細かく分けて別々に開発する仕組み。

簡単に説明すると

マイクロフロントエンドは、かんたんに言うと、1つの大きなWebサイトをいくつかの小さな画面や機能の集まりとして開発する仕組みだよ。 例えば、大手のネットショッピングサイトなどで、商品の検索機能、買い物かごのページ、決済画面などを別々のチームが同時に開発しているんだ。 それぞれのチームが作った部品が合体して、ユーザーには1つの整ったWebサイトに見えるようになっているよ。

名前のヒミツ

マイクロフロントエンドは、英語で『極めて小さい』を意味する『Micro』と、Webサイトでユーザーが直接目にする部分を指す『Frontend』を組み合わせた言葉だよ。 大きなWebサイトの画面を小さな部品に切り分けて、それぞれの部品を異なるチームが別々に開発できるようにした構造を指しているんだ。

くわしく見てみよう!

マイクロフロントエンドとは、Webサイトの画面や機能を細かく分割して、それぞれを別々のチームが独立して開発し、最終的に1つのサイトに組み合わせる開発手法のことだよ。
従来の開発では、Webサイト全体を1つの巨大なプログラムとして作ることが多かったため、どこか1箇所を直すだけで全体に影響が出る問題があったんだよ。

この仕組みを使うことで、それぞれの開発チームは自分たちが担当する機能の設計やプログラムの書き方をある程度自由に決められるようになり、開発の進行ペースもチームごとに調整しやすくなるんだ。
また、機能ごとに独立してリリース(公開)できるようになるため、サイト全体を一度にまとめて作り直さなくても、担当している部分だけを少しずつ新しい技術に置き換えていく、といった段階的な刷新もしやすくなるメリットがあるよ。

ただし、バラバラに作った部品を1つのサイトとしてうまく合体させるためには、あらかじめ連携のためのルールを取り決めたり、デザインに統一感を持たせるための調整を行ったりする必要があるんだ。
開発チームが少人数の場合は管理の手間が増えてしまうため、大人数で大規模なWebサイトを開発する際によく使われているよ。