Wippy マイクロフロントエンド
Wippy のフロントエンドコードは Web ホストの分離境界の内側で動作します。作成できるアーティファクトには2種類あります。マイクロフロントエンドアプリと Web コンポーネントです。どちらも独立した Vite プロジェクトであり、どちらも @wippy-fe/proxy を通じてプラットフォームと通信し、どちらも _index.yaml のレジストリエントリによってバックエンドへ宣言されます。違いは、どのようにレンダリングされ、何に向いているかです。
マイクロフロントエンドアプリと Web コンポーネント
マイクロフロントエンドアプリ (view.page) |
Web コンポーネント (view.component) |
|
|---|---|---|
| レンダリング形態 | 完全な iframe、分離されたブラウジングコンテキスト | ページ内、Shadow DOM 中のカスタム要素 |
| 独自の URL / ナビゲーションエントリを持つ | はい — バックエンドの mountRoute を主張します |
いいえ — 別のページやチャットアーティファクトに埋め込まれます |
| 内部ルーティング | あり — メモリー履歴を用いた vue-router |
なし — 単一コンポーネント、ルーターなし |
| ビューポートを制御する | はい | いいえ — 周囲のレイアウトによってサイズが決まります |
| ページをまたいで再利用できる | いいえ — 1つの URL、1か所 | はい — どのページでもタグを埋め込めます |
| 型付き props を受け取る | いいえ — AppConfig を読みます |
はい — スキーマで宣言された HTML 属性 |
| 型付きイベントを発行する | いいえ — プロキシ API 経由で通信します | はい — スキーマで宣言された CustomEvent |
| CSS の分離 | iframe 境界 | Shadow DOM（完全なカプセル化） |
手早い判断基準: vue-router、専用の URL が必要、またはビューポート全体を所有するなら、マイクロフロントエンドアプリです。埋め込み可能で、再利用可能で、自己完結しているなら、Web コンポーネントです。
迷ったら Web コンポーネントから始めてください。後からマイクロフロントエンドアプリへ昇格させるほうが、逆よりも簡単です。
次に読むもの
急いでいますか？ クイックスタート には、Vue のマイクロフロントエンドアプリと Vue の Web コンポーネントの両方について、最小限のエンドツーエンドの例と、公開の app リポジトリへのリンクがあります。
マイクロフロントエンドアプリを作る:
- マイクロフロントエンドアプリ — スキャフォールド、
package.jsonの wippy ブロック、Vite の設定、ブートストラップのシーケンス、ルーター同期 - ビルドシステム —
@wippy-fe/vite-plugin、wippy-meta.json、externals - プロキシ API — ホストと通信するための
@wippy-fe/proxyリファレンス - テーミング → テーミング: マイクロフロントエンドアプリ — CSS 変数のカタログと、プロキシインジェクション経由での受け取り方
Web コンポーネントを作る:
- Web コンポーネント — スキャフォールド、
WippyVueElement、props、events、shadow DOM の CSS - ビルドシステム — 同じ Vite ツールチェーン、異なるプラグインと出力フォーマット
- プロキシ API — 同じ API を
@wippy-fe/proxyから直接 import します - テーミング → テーミング: Web コンポーネント — CSS 変数のカタログと、shadow DOM 境界を越えて受け取る方法
両方に共通:
- ホストレスモード — Web ホスト全体を動かさずに開発・テストする
- コンプライアンスルール索引 — 正典のルール所有者と決定的なゲート
- デバッグ — もっとも一般的な障害シナリオを症状から引くガイド
前提条件
wippy/viewsを依存関係として宣言した Wippy バックエンドモジュール（Views を参照）- Web ホストのエントリーポイント用の
wippy/facade（ファサードのエントリーポイント を参照） - 選択した Web ホストのソースが宣言する Node.js 22 以降および Vite 7。対象リリースが変わったらそのパッケージを再確認してください