テーマエディタと連動する仕組み
テーマエディタがセクションを再描画する仕組みを理解し、再描画しても壊れないJSを書ける
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、テーマエディタがセクションを再描画する仕組みを知り、再描画しても壊れないJavaScriptを書けるようになります。
受託では「エディタで色を変えたらスライダーが止まった」という問い合わせを、この回の初期化の仕組みで防げます。
エディタはページ全体ではなく、セクションだけ差し替える
エディタは設定を変えるたびに、?section_id=でサーバー描画したHTMLを取得します。
そして該当するセクションだけを差し替えます（Section Rendering API）。
ページ全体はリロードされません。
このAPIは、ストアフロントのJavaScriptからも使えます。
エディタのイベントで、差し替えを知る
shopify:section:load / unload / select / deselect / reorderと、shopify:block:select / deselectがあります。
対象のセクション要素から発火して、バブル（親の要素へ伝わる）します。event.detail.sectionId（ブロックならblockIdも）で、対象が分かります。documentにリスナーを1つ付ければ、全部拾えます。
イベントごとに何をするか
loadで初期化し、unloadでリスナーやタイマーを破棄します。block:selectで該当するスライドへ移動し、section:selectでドロワーを開きます。selectのevent.detail.loadが真なら再描画由来、偽ならクリック由来です。
Liquidではrequest.design_modeでエディタ内かどうかを分岐できます（自動再生を止める、注意書きを出す）。
JS側はShopify.designModeです。
発展：よくある落とし穴
DOMContentLoadedでしか初期化しないスライダーは、再描画後に動きません。customElements.defineを二重に定義すると、例外になります。
Custom ElementならconnectedCallbackが差し替え後にも自動で走るので、この問題自体が消えます。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。