ローカル開発サーバー：theme dev
theme devでホットリロードしながら開発し、プレビューURLをクライアントに共有できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、theme dev（手元の変更をすぐ画面で確かめる仕組み）で開発し、プレビューURLをクライアントに共有できるようになります。
受託では、仕組みを知っていれば、共有もエディタの差分が消える事故の回避もできます。
theme devとは、手元のファイルをストアで描画して見る仕組み
theme devは、ローカルのファイルを「開発テーマ」としてストアに同期し、http://127.0.0.1:9292でプレビューします。
Liquidの描画はShopifyのサーバーで行われるので、接続先ストアの実データが見えます。
商品もコレクションも本物が出ます。
ファイルを保存すると、すぐに反映されます。
プレビューをクライアントに共有できる
起動時に出る共有用のURLをクライアントに渡せば、公開前の状態を確認してもらえます。
パスワード保護中のストアでも、プレビューは見られます。
エディタの変更を消さないために--theme-editor-syncを付ける
--theme-editor-syncを付けると、テーマエディタ側の変更（settings_data.jsonやJSONテンプレート）をローカルに取り込めます。
付けずにエディタで触ると、その差分が消える事故が起きます。
エディタで設定を触る可能性があるなら、必ず付けます。
発展：ローカルで再現できないものと、本番を守る仕組み
チェックアウト、アプリの一部、Shopify Functions、通知メールは、ローカルで再現できません。
「theme devで見えた＝本番で動く」ではないので、公開前チェックで本番の挙動を確認します。
また、theme devは既定で開発テーマに同期します。--themeで公開テーマを指定すると--allow-liveが要る設計で、うっかり本番を書き換えないようになっています。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。