0Pricing
Micro Frontends Architecture with Module Federation · レッスン

カスタムDOMイベントによる通信

ブラウザー標準のCustomEvent APIを、軽量でフレームワークに依存しないマイクロフロントエンド間の通信手段として使う方法を学びます。

「カスタムDOMイベントによる通信」はCoddyKit上の無料Micro Frontends Architecture with Module Federationレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはMicro Frontends Architecture with Module Federation学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Micro Frontends Architecture with Module Federationコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Why Native Events?

The browser already has a built-in pub/sub system: the DOM event model. Using it for MFE communication needs no library and works across any framework.

The CustomEvent API

CustomEvent lets you create your own named events carrying a detail payload, dispatched on any DOM element including window.

const evt = new CustomEvent("cart:add", {
  detail: { productId: 42, qty: 1 }
});

Dispatching an Event

Any micro frontend can broadcast an event on a shared target such as window. Others do not need a direct reference to the sender.

window.dispatchEvent(new CustomEvent("cart:add", {
  detail: { productId: 42 }
}));

Listening for Events

A consuming MFE subscribes with addEventListener and reads the payload from event.detail.

window.addEventListener("cart:add", (e) => {
  updateCart(e.detail.productId);
});

Naming Conventions

Namespace event names to avoid collisions, for example cart:add or auth:login. A shared naming convention is part of your communication contract.

Cleaning Up Listeners

When a micro frontend unmounts, remove its listeners to prevent memory leaks and duplicate handling.

const handler = (e) => updateCart(e.detail);
window.addEventListener("cart:add", handler);
// on unmount:
window.removeEventListener("cart:add", handler);

Two-Way Communication

For request/response style flows, one MFE dispatches a request event and another replies with a separate response event, keeping each direction explicit.

window.dispatchEvent(new CustomEvent("user:request"));
window.addEventListener("user:response", e => show(e.detail));

Strengths of DOM Events

Native events are appealing because they are:

  • Framework-agnostic
  • Zero-dependency
  • Familiar to all web developers
  • Naturally decoupled (no shared references)

Limitations to Know

They also have downsides:

  • No type safety on detail
  • Easy to misspell event names
  • Hard to trace who listens to what
  • Not ideal for large or frequent payloads

Wrapping Events in a Typed Helper

To reduce mistakes, wrap dispatch and listen in a small typed module shared across MFEs, centralizing event names and payload shapes.

export function emit(name, detail) {
  window.dispatchEvent(new CustomEvent(name, { detail }));
}

When to Choose This Pattern

Custom DOM events shine for simple, occasional notifications between loosely coupled MFEs. For complex shared data, prefer a dedicated event bus or shared store.

Quick Check

Test your custom-event knowledge.

Recap

You learned native event communication:

  • CustomEvent carries data in detail
  • Dispatch on window; listen with addEventListener
  • Namespace names and clean up listeners
  • Great for simple, decoupled notifications
  • Wrap in a typed helper to avoid mistakes

DOM events are a zero-dependency MFE channel.

よくある質問

「カスタムDOMイベントによる通信」レッスンは無料ですか？

はい。「カスタムDOMイベントによる通信」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Micro Frontends Architecture with Module Federationコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Micro Frontends Architecture with Module Federationコースには全4レッスンが含まれています。

「カスタムDOMイベントによる通信」で何を学びますか？

ブラウザー標準のCustomEvent APIを、軽量でフレームワークに依存しないマイクロフロントエンド間の通信手段として使う方法を学びます。 ブラウザで直接実行するハンズオンコードでMicro Frontends Architecture with Module Federationを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Micro Frontends Architecture with Module Federationを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのMicro Frontends Architecture with Module Federationは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「カスタムDOMイベントによる通信」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このMicro Frontends Architecture with Module Federationレッスンでコードを書いて実行できますか？

はい。すべてのMicro Frontends Architecture with Module Federationレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. アプリ間通信のためのイベントバス
  2. 共有状態の管理
  3. カスタム通信ソリューション
  4. カスタムDOMイベントによる通信
← Micro Frontends Architecture with Module Federationに戻る