Remote DOMの仕組みとShopifyでのUI拡張の安全かつ柔軟なアプローチ

オンラインストアにおける顧客体験を向上させるためには、柔軟かつ安全なUI拡張が不可欠です。本記事では、Shopifyが採用する「Remote DOM」の仕組みとその利点を解説し、具体的な活用方法を紹介します。
近年、サードパーティのアプリやエクステンションを活用する店舗が増える中で、プライバシーやセキュリティ面の懸念が高まりつつあります。Remote DOMを活用すれば、これらの課題を解消しながら、開発者が望むユーザー体験を実現しやすくなります。

Remote DOMとは？

Remote DOMは、サンドボックス化されたJavaScript環境で生成されたDOMツリーを、別の環境（ホスト）に同期してレンダリングする技術です。これにより、以下のような利点が得られます：

1. セキュリティ：リモートコードをメインスレッドから分離し、安全な環境で実行。
2. 柔軟性：異なる技術スタックを組み合わせて利用可能。
3. パフォーマンス：メインスレッドの負荷を軽減。

Remote DOMの基本構造

Remote DOMは以下の2つの主要な環境で動作します：

• リモート環境：UIを定義し、ホストへ更新情報を送信。
• ホスト環境：リモート環境からの更新を受け取り、DOMをレンダリング。

基本的な仕組み

リモート環境とホスト環境の通信にはpostMessageが利用されます。リモート環境で生成された要素は、JSON形式でホストに送信され、ホスト側で再構築されます。

以下は基本的なコード例です：

// ホスト環境
import { DOMRemoteReceiver } from '@remote-dom/core/receivers';

const root = document.querySelector('#root');
const receiver = new DOMRemoteReceiver();
receiver.connect(root);

// リモート環境
import { RemoteMutationObserver } from '@remote-dom/core/elements';

const root = document.querySelector('#remote-root');
const observer = new RemoteMutationObserver({
  mutate(mutations) {
    window.parent.postMessage(mutations, '*');
  },
});

observer.observe(root);

Remote DOMの利点

1. セキュリティの確保 Remote DOMでは、リモート環境をサンドボックス化することで、ホストDOMやグローバルオブジェクトへの直接アクセスを制限できます。サードパーティのウィジェットやアプリを導入する場合でも、万が一悪意のあるコードが仕込まれていたときの被害を最小限に抑えられます。
2. 柔軟性の向上 リモート環境では、任意のJavaScriptフレームワーク（React、Vue、Svelteなど）が利用可能です。これにより、開発者は既存の技術スタックを活かしながら、新しい機能を素早く追加できます。複数のアプリを同時に統合したい場合にも、衝突を回避しやすい点がメリットです。
3. パフォーマンスの最適化 メインスレッドでの負荷を軽減し、大量のDOM操作をリモート環境で行うことで、スムーズなUIを実現します。店舗運営者にとって、ページ読み込み速度やスクロール時のカクつきはコンバージョンレートに直結する重要な要素です。Remote DOMを活用すれば、ユーザーが複数の機能を同時に使用してもストレスなく操作できる可能性が高まります。

Remote DOMの活用例

Shopifyにおける事例

Shopifyでは、Remote DOMを利用して拡張機能を実装しています。たとえば、購入後のカスタマイズページやサブスクリプション管理ページなどで採用されており、プライバシーを担保しつつ、自由度の高いUI拡張を行う仕組みが整備されています。Shopifyアプリ開発者は、JavaScriptのビルド環境にとらわれず、リモートでUIを構築できるため、自身の好みのフレームワークとツールチェーンを活用しやすいのが特長です。

以下はShopifyの実装例です：

// リモート環境でボタン要素を定義
import { RemoteElement } from '@remote-dom/core/elements';

class UIButton extends RemoteElement {
  static get remoteAttributes() {
    return ['primary'];
  }

  static get remoteEvents() {
    return ['click'];
  }
}

customElements.define('ui-button', UIButton);

このように、リモート環境でカスタム要素を定義し、ホスト側にデータを送ることで、複雑なUIロジックを隔離しつつ再利用可能なコンポーネントを作れます。

カスタムUIの実装

Remote DOMを利用すれば、ブランド固有のUIを簡単に実装できます。以下は、カスタムボタンの例です：

// ホスト環境でのボタンレンダリング
class UIButtonHost extends HTMLElement {
  static get observedAttributes() {
    return ['primary'];
  }

  connectedCallback() {
    this.innerHTML = `<button class="${this.primary ? 'primary' : ''}">${this.textContent}</button>`;
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'primary') {
      this.classList.toggle('primary', newValue !== null);
    }
  }
}

customElements.define('ui-button', UIButtonHost);

これにより、Shopifyのテーマや他のアプリとスタイルを共存させながら、リモートで定義したUIコンポーネントをホスト側でも表示できます。ボタン以外にも、バナーやカードなど、さまざまなUI要素を同じ仕組みで実装可能です。

Remote DOMを利用する際の注意点

1. 通信の最適化：リモート環境とホスト環境間でのやり取りが頻繁に行われると、パフォーマンスに悪影響が出る可能性があります。バッチ処理や差分更新などのテクニックを取り入れ、無駄な通信を減らす工夫が重要です。
2. デバッグの難易度：リモート環境とホスト環境が分離されているため、従来のブラウザ開発ツールでは原因追及が難しいケースがあります。Chrome DevToolsなどの拡張機能やリモート環境向けのログ取得手段を活用し、問題箇所の特定をスムーズに行う仕組みを整備しましょう。
3. イベント伝播の扱い：リモート環境で生成されたイベントをホスト環境で適切に扱うには、イベントバインディングの方法やデータ形式に注意が必要です。両環境間で共通のインタフェースを設計するとスムーズです。

まとめ

Remote DOMは、柔軟性とセキュリティを両立したUI拡張のための強力な技術です。Shopifyを含む多くのプラットフォームで既に取り入れられ、サードパーティアプリの追加やブランド独自のUI実装を安全かつ容易に行えます。オンラインストアで競争力を高めるためには、顧客体験をより良くする施策が欠かせません。Remote DOMを使った拡張は、その実装手段として今後ますます重要性を増すと予想されます。ぜひこの技術を活用して、高品質かつ保守性の高いUIを提供してみてください。

参考

• remote-dom
• Remote Rendering: Shopify’s Take on Extensible UI