紹介

Vue Remote とは？

@omnicajs/vue-remote は、Vue 3 の拡張エコシステム向けのレンダリング同期ライブラリです。

これにより、ホスト製品は分離されたリモートランタイムによって記述された UI をレンダリングできます。リモート側はコンポーネントツリーを宣言し、ホスト側は実際にどのコンポーネントを許可し、どのように描画するかを制御します。

なぜ Vue Remote を使うのか？

アプリケーションを拡張プラットフォームにしたい場合、このライブラリが適しています:

あなたの製品がホストランタイムと UI 境界を所有している。
サードパーティのチームが独立して拡張を作る。
拡張 UI を iframe や worker ランタイムのような隔離環境で動かしたい。
それでもレンダリングはホストが制御する UI 契約に統合される必要がある。

基本例

最小構成では、ホストとリモートは 1 つのレンダリングチャネルを交換します:

// host
const provider = createProvider({ VButton, VInput })
const receiver = createReceiver()
// render <HostedTree provider={provider} receiver={receiver} />
// then call remote.run(receiver.receive, hostBridge)

// remote
const root = createRemoteRoot(channel, { components: ['VButton', 'VInput'] })
await root.mount()
createRemoteRenderer(root).createApp(RemoteApp).mount(root)

ここから先は、リモートコンポーネントが props や events を通して意図を表現し、ホストは許可されたレンダリング能力を制御し続けます。

Vue Remote の利点

このモデルは、拡張作者にホスト内部を意識させずに、ホスト製品へプラットフォーム制御を与えます:

ホストチームは provider コンポーネント契約を通じて能力境界を定義する。
拡張作者はプロダクト機能と UI の意図に集中できる。
ランタイム分離によって偶発的な結合が減り、アップグレードが安全になる。
複数のリモート拡張が、同じホスト UX 契約を共有しながら共存できる。

より現実的な例

実運用の製品では、拡張は通常レンダリング同期とビジネスアクセスの両方を必要とします:

レンダリングチャネル: リモートは @omnicajs/vue-remote を通じて、ホストが承認したコンポーネントを描画する。
ビジネスブリッジ: リモートは別契約の hostBridge を通じて製品 API を呼び出す。
能力ポリシー: ホストが各拡張に対し、何を描画し何を呼び出せるかを決定する。

この分離は意図的なものです。ビジネス契約が変化しても、レンダリングのライフサイクルは安定したまま保たれます。

中心となる考え方

2 つのランタイムが協調します:

ホストランタイム: createProvider(...) で許可コンポーネントを登録し、 createReceiver() でリモートツリー更新を受け取り、 HostedTree を描画する。
リモートランタイム: createRemoteRoot(...) で同期ルートを作成し、 createRemoteRenderer(...) を使い、 defineRemoteComponent(...) を通じてホスト公開コンポーネントを参照する。

更新はチャネルトランスポート、一般的には @remote-ui/rpc を通って流れます。

このライブラリが扱う範囲

対象範囲:

ホストとリモート間の UI ツリー同期描画。
ホストが制御するコンポーネント allowlist。
ランタイム境界をまたぐ props、events、slots の契約。
ネイティブなリモートタグ html、svg、mathml をホスト描画ツリーへ反映すること。

対象外:

製品のビジネス API プロトコル。
認証、権限、課金、マーケットプレイス、拡張ディスカバリ。
拡張のパッケージング、公開、ライフサイクルポリシー。
製品固有のガバナンスと信頼管理。

これらの機能は周辺のプラットフォームツール側で担うべきです。

実際のエコシステムで何を意味するか

本番の拡張エコシステムは通常 3 つのレイヤーに分かれます:

レンダリング同期レイヤー: @omnicajs/vue-remote。
プロダクトブリッジレイヤー: ビジネスメソッドとデータ契約。
プラットフォームレイヤー: 権限、ディスカバリ、マネタイズ、ガバナンス。

これらのレイヤーを分離すると結合が減り、独立したバージョニングが可能になります。

直接埋め込み方式との比較

サードパーティ UI コードをホストランタイムへ直接埋め込む方法と比べると:

Vue Remote は、許可されたコンポーネント面に対するホスト側の制御を強化します。
ホスト内部への暗黙的アクセスよりも、明示的な契約を重視します。
リモート側が実 DOM を持たない分離ランタイムで、よりうまく機能します。

その代わり、境界契約とシリアライズルールを慎重に設計する必要があります。

メンタルモデル

リモート側は DOM の直接所有者ではなく、宣言的に UI の意図を生み出す側として捉えると理解しやすいです。

リモートコードは UI を組み立て、意図を発信する。
ホストコードは能力を制約し、境界を検証し、実際の描画を行う。
データがチャネルを横断する箇所では、payload はシリアライズ可能でなければならない。

この分離によって、拡張エコシステムはより安全になり、時間とともに進化させやすくなります。

向いていないケース

以下のような場合、@omnicajs/vue-remote は不要かもしれません:

両側を自分で管理しており、ランタイム分離が不要。
ホストが制御するコンポーネント境界が不要。
単純なローカルコンポーネントライブラリで問題が解決する。

また、完全なプラグインプラットフォームランタイムが今すぐ必要なら、このライブラリ単体では不十分かもしれません。その場合は、本ライブラリをレンダリングのコアとして使い、その周囲にプラットフォームサービスを追加してください。

典型的な利用フロー

ホスト製品が拡張ランタイムシェルとレンダー receiver を起動する。
リモート拡張が run/release API を公開する。
ホストがレンダリングチャネルと、必要ならビジネスブリッジ契約を提供する。
リモートが同期チャネル更新を通じてマウントと描画を行う。
セッションは release() で終了する。

トランスポート非依存の接続方法は概要を、iframe 固有の詳細は Iframe 統合を参照してください。

次に読むべきもの

このモデルを初めて学ぶなら: クイックスタート。
ホスト契約を設計するなら: ホストコンポーネント。
リモート拡張 UI を作るなら: リモートコンポーネント。
ランタイムアーキテクチャを考えるなら: 概要。
iframe 統合を計画するなら: Iframe 統合。