Shopifyのテーマをチームで開発するとき、Gitでファイルを管理していても、Shopifyへテーマをpushすると、pushしたファイルによってテーマの内容が上書きされます。

そのため、誰かが作業中のテーマに気づかず上書きしてしまう、といった事故が起こる可能性があります。

現時点では、ShopifyのテーマとGitを連携するものはありません。

しかし、GitのブランチとShopifyのテーマをそれぞれ役割分担させることで、上書きのリスクを抑えながらチーム開発を行うことができます。

今回は、Shopifyでテスト環境を用意して修正内容を確認し、その後本番環境へ反映するまでの流れをご紹介します。

前提

Gitのブランチの扱い

• 「main」ブランチ：本番環境と同じ状態
• 「develop（dev）」ブランチ：テスト環境と同じ状態
• 修正ブランチ：作業するブランチ

基本は「main」と「develop（dev）」が常にある状態で、修正ブランチは作業内容によって任意のブランチ名を付けてください。

ファイルを修正する前にローカルを最新の状態にする

1. mainブランチの状態で、下記コマンドを実行します。

   shopify theme pull

   現在適用されているテーマを選択してローカルにpullします。

2. 差分があったらコミットしてリモートリポジトリへpushします。
3. main→developへマージして同じ状態にする。

作業をする

1. developブランチから作業用のブランチを作成します。（修正ブランチとする）
2. その修正ブランチでファイルを変更します。
   作業するときは、developブランチを直接編集するのではなく、作業内容ごとにブランチを分けるようにします。

   たとえば、複数人がdevelopブランチを直接編集していると、それぞれの変更がぶつかり、コンフリクトが起きる可能性が高くなります。

   また、どの変更がどの作業によるものなのか分かりにくくなってしまいます。

   そのため、「developから作業ブランチを作成 → 作業 → developへマージ」という流れで進めます。

3. 作業が終わったらコミットします。
4. developブランチへマージします。マージしたら、developブランチをリモートリポジトリへpushします。

テスト環境を作って修正内容を確認する

1. shopifyサイトのホームから「販売チャネル」→「オンラインストア」で、テーマ一覧へ移動します。
2. 「現在のテーマ」となっているテーマを複製します。複製したテーマがテスト環境として使用します。
   複製したテーマ名をテスト環境だと分かりやすいようリネームしておきましょう。
3. 念の為、ここで「shopify theme pull」で複製したテーマとローカルのテーマの差分を確認します。
   ここで確認するポイントは、自分が今回変更した内容以外に差分がないかです。
   差分が自分が変更した内容だけであればOK。
   関係ない差分があった場合、作業中に変更された可能性があるため、上書きして消してしまわないために必要に応じてコミットして変更内容を保存しておきましょう。
4. 下記コマンドを実行して、テスト環境へpushします。

   shopify theme push

   先ほど作成したテスト用テーマを選択し、pushします。

5. Shopifyの方で、テスト環境に反映されたか確認します。
   「…」→「プレビュー」で確認できます。

テスト環境を本番にアップする

1. 本番にアップする前に、「現在のテーマ」が数分前に変更されてないか、確認しておきましょう。
2. 問題がなければ、テスト環境として使用していたテーマの「公開する」ボタンをクリックします。
3. これで、テストしていたテーマが本番環境として公開されます。最後に本番環境を確認しましょう。

最後に

1. develop→mainブランチへマージしてmainブランチをリモートリポジトリへpushします。
2. 念の為、mainブランチの状態で本番からpullコマンドを実行して、Git上の状態と本番環境に差分がないか確認します。

   shopify theme pull

   これにて一通りの流れは終了です。

まとめ

ShopifyのテーマをGitで管理しながらチーム開発する場合、特に重要なのは次の3つです。

• 本番環境へ直接pushしない
  • 本番環境にアップするのは「公開する」ボタンを押した時だけ。
• mainやdevelopを直接編集しない
  • 作業ごとにブランチを作成し、作業が完了したらdevelopへマージする
• 本番公開後もGitの状態を最新にする
  • 本番環境とmainブランチの状態が一致していることを確認する

この3点を意識しておくと、Shopify上のテーマを誤って上書きしてしまうリスクを減らしながら、チームで開発しやすくなります。

最初は確認する項目が多く感じるかもしれませんが、慣れてくるとスムーズに進められるようになります。

Shopifyのテーマを複数人で開発する場合は、「Gitで管理しているから安心」ではなく、「Shopify上のテーマとGit上の状態を常に意識して合わせる」ことが、安全なチーム開発につながります。