0Pricing
Vue Academy · レッスン

マイクロフロントエンド間での共有状態

Piniaストアの共有、CustomEventによるイベントバス、共有状態としてのURL

「マイクロフロントエンド間での共有状態」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

共有状態の課題

独立したマイクロフロントエンドでも、連携が必要になることがあります。たとえば、あるスライスでのログインによって、別のスライスのヘッダーを更新する必要があります。しかし、強い結合はマイクロフロントエンドの目的に反します。目標は疎結合で意図的な通信です。

暗黙的なグローバル状態を避ける

すべてをwindowや巨大な共有ストアに詰め込むと、モノリスの結合を再現してしまいます。スライス間には明示的で最小限のコントラクトを用意し、チームが独立して進化できるようにします。

通信にCustomEventを使う

ブラウザのCustomEvent APIは、フレームワークに依存しないバスです。1つのマイクロフロントエンドがwindowでイベントを発行し、他のマイクロフロントエンドがリッスンします。共有インポートは必要ありません。

const event = new CustomEvent("cart:add", {
  detail: { productId: 42, qty: 1 },
})
window.dispatchEvent(event)

イベントをリッスンする

他のスライスはaddEventListenerで購読し、event.detailからペイロードを読み取ります。送信側と受信側はイベント名とデータ形式に合意するだけでよく、両者を疎結合にできます。

window.addEventListener("cart:add", (e) => {
  console.log("Added", e.detail.productId)
})

Vueでリスナーをクリーンアップする

onMountedでリスナーを登録し、onUnmountedで削除します。これにより、コンポーネントの再マウント時にメモリリークやハンドラーの重複が発生するのを防げます。

import { onMounted, onUnmounted } from "vue"

function onAdd(e) { /* ... */ }
onMounted(() => window.addEventListener("cart:add", onAdd))
onUnmounted(() => window.removeEventListener("cart:add", onAdd))

型付きイベントコントラクト

すべてのチームがイベント名とペイロードの形式を把握できるように、イベントをコントラクトとして文書化します。これはマイクロフロントエンド間の公開APIです。

// events contract
// "cart:add"    -> { productId: number, qty: number }
// "auth:login"  -> { userId: string }
// "auth:logout" -> {}

共有状態としてのURL

URLは、ナビゲーションやフィルターの共有ストアとして自然な選択肢です。グローバルで、ブックマークでき、すべてのスライスから読み取れます。アクティブなフィルターやページなど、横断的な状態はクエリパラメーターに入れます。

const params = new URLSearchParams(location.search)
const category = params.get("category") // shared across slices

URL状態の更新

共有するフィルターやナビゲーションの状態は、History APIを使ってURLに書き込みます。これにより、共有しやすく、戻るボタンにも対応できます。すべてのスライスは新しいURLを読み取って反応します。

function setCategory(value) {
  const url = new URL(location.href)
  url.searchParams.set("category", value)
  history.pushState({}, "", url)
}

シングルトンPiniaストア

1つのページ内でより豊かな共有状態を扱う場合は、シングルトンPiniaストアが有効です。ただし、フェデレーション全体でPiniaをシングルトンとして共有し、すべてのスライスが同じインスタンスを使う場合に限ります。

// federation config (both sides)
shared: {
  pinia: { singleton: true },
  vue: { singleton: true },
}

共有ストアの利用

Piniaをシングルトンとして共有すると、2つのスライスがインポートしたストアは同じストアインスタンスになります。一方が書き込んだ状態を、もう一方がリアクティブに読み取れます。

// slice A writes
const auth = useAuthStore()
auth.login(user)

// slice B reads the same reactive state
const auth = useAuthStore()
console.log(auth.user)

戦略の選択

  • CustomEvent — 疎結合でフレームワークに依存しない通知
  • URL — ナビゲーション、フィルター、その他の共有・ブックマーク可能な情報
  • シングルトンPinia — ページ内の豊かなリアクティブ状態。singleton: trueが必要

要件を満たす中で、最も疎結合な選択肢を優先します。

クイックチェック

マイクロフロントエンド間の状態共有について、理解度を確認しましょう。

まとめ

マイクロフロントエンド間で状態を共有する方法を学びました：

  • 暗黙的なグローバル状態よりも、疎結合で明示的なコントラクトを優先します。
  • window上のCustomEventとaddEventListenerで、フレームワークに依存しないメッセージングを実現します。onUnmountedでクリーンアップします。
  • URLには、共有可能なナビゲーションやフィルターの状態を保持します（History API経由のクエリパラメーター）。
  • シングルトンPiniaストアで豊かなリアクティブ状態を共有できますが、フェデレーションでsingleton: trueを指定する必要があります。

よくある質問

「マイクロフロントエンド間での共有状態」レッスンは無料ですか？

はい。「マイクロフロントエンド間での共有状態」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「マイクロフロントエンド間での共有状態」で何を学びますか？

Piniaストアの共有、CustomEventによるイベントバス、共有状態としてのURL ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

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

「マイクロフロントエンド間での共有状態」レッスンにはどのくらい時間がかかりますか？

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

このVue Academyレッスンでコードを書いて実行できますか？

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

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

  1. マイクロフロントエンドアーキテクチャの原則
  2. VueでのWebpack Module Federation
  3. Vite Federation Plugin
  4. マイクロフロントエンド間での共有状態
← Vue Academyに戻る