セクション再描画とイベント
エディタとSection Renderingの再描画に対応し、コンポーネント間をイベントで疎結合にできる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、「カートが更新された」という出来事をイベントで知らせ、部品どうしを疎結合（お互いを知らなくても動く関係）にできるようになります。
受託では、自作したカートがこの通知を出さないと、定期購入やギフト系のアプリがカートの更新を検知できず動かない、という事故を防げます。
エディタの再描画に対応するには
テーマエディタは、設定を変えるたびにセクションのDOMを差し替えます。
テーマはshopify:section:load / unload / select、shopify:block:selectなどのイベントを受けて、初期化と破棄を行います。
Custom ElementならconnectedCallback / disconnectedCallbackがそのまま初期化と破棄になるので、この対応が自然に済みます。
Pub/Sub（発行と購読）とは
「カートが更新された」という出来事を1つ発行し、知りたい側がそれぞれ購読する仕組みです。
追加する側がバッジやドロワーを知らなくてよいので、部品を足しても追加処理を直さずに済みます。
Dawnはsubscribe / publishとPUB_SUB_EVENTS（cartUpdate / variantChange / quantityUpdate）を持っています。
標準のCustomEvent（document.dispatchEvent(new CustomEvent('cart:updated', { detail }))）でも同じ設計ができ、ライブラリは要りません。
差し替えたあとの状態はどうなるか
Section RenderingでDOMを置き換えると、その中に付けたリスナーや開閉の状態は消えます。documentに付けたリスナーは残ります。
差し替える前にフォーカス位置や開いているドロワーを記録し、差し替えたあとに復元します。
発展：標準ストアフロントイベントとアクション
テーマがshopify:cart:lines-update / shopify:product:view / shopify:search:updateなどの標準イベントを発行し、アプリやAIエージェントが購読します。
逆にアプリはShopify.actions.updateCart / getCart / openCartを呼び、テーマはconfigureで自分のカートUIに接続します。
テーマのカートのマークアップを認識できない場合は、ページ全体のリロードにフォールバックします。
自前のイベント名に加えて標準イベントも発行すると、アプリとの互換性が上がります。
公開時期・対応テーマ・イベント名とdetailの形は、公式リファレンスで確認します。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。