テーマJSの設計：バニラJSとWeb Components
バンドラ無しのテーマでCustom Elementsパターンを使い、再利用できて壊れにくいJSを書ける
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、テーマエディタがDOMをあとから差し替えても壊れないJSを、Custom Elementsで書けるようになります。
受託では「エディタで並べ替えたら数量ボタンが効かなくなった」という報告の多くを、この書き方で防げます。
Custom Elementsとは
Custom Elementsは、自分で名前を付けたHTML要素を作るブラウザの仕組みで、DawnもHorizonも使っています。class QuantityInput extends HTMLElementを定義し、customElements.define("quantity-input", QuantityInput)で登録します。
要素がDOMに置かれた時点で自動的に初期化されるので、DOMContentLoadedで一度だけ配線する書き方と違い、あとから挿入されたDOMでも動きます。
初期化はconnectedCallback（DOMに入った時に呼ばれる関数）に書き、querySelectorもここで行います。
コンストラクタの時点では、子要素がまだ無いからです。
JSが動かなくても買える形にするには
購入フォームもカートフォームも、素のHTMLとして送信できる状態にしておきます。
JavaScriptは「ページ遷移なしにする」ための、上に重ねる層と考えます。
こうしておくと、JSが落ちても買えるサイトになります。
テーマのJSにビルド工程はあるか
ありません。assets/に置いたファイルが、そのまま配信されます。<script type="module">は使えます。
TypeScriptやバンドラ（複数のファイルを1つにまとめる道具）を使うなら、自分でビルドして出力を`assets/`に入れます。
発展：二重定義のガードを必ず入れる
customElements.defineは、必ずif (!customElements.get(name))で囲みます。
同じ名前で2回呼ぶと例外が出て、それ以降のスクリプトが全部止まるからです。
セクションが複数回読み込まれると、同じスクリプトが2回読まれる状況は普通に起きます。
次は演習で、数量ボタンをCustom Elementで作ってみましょう。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。