こんにちは、エンジニアの川島です。

前回の記事にて、Shopifyのテスト環境構築についてご紹介しましたが、Shopify開発において特に悩ましいのが各環境の同期とバージョン管理ではないでしょうか。
管理画面上のコードエディタ・テーマエディタから誰でも編集できること、そしてTheme Kitのdeploy機能でShopifyサーバーへ容易にファイルを反映できることは、長所でもあるのですが、複数人で開発を行う場合には先祖返りのリスクにもなります。

そこで本記事では、複数人でのShopifyテーマ開発を安全に進めるために、私たちが行っているバージョン管理の工夫について、ご紹介したいと思います。

先祖返りを防ぐTheme Kitのtheme deploy手順

Theme Kitは、ローカルでコーディングしたファイルをShopifyサーバーへ反映するには、とても便利なツールです。（Theme Kitの初期設定についてはこちらの過去記事をご参照ください）
ですが、Shopify側で——管理画面上のテーマエディタやコードエディタで——編集が行われていた場合、Theme Kitは変更を感知できません。 theme watch や theme deploy で該当ファイルをアップロードすると、Shopify側の編集内容は容赦なく上書きされ、先祖返りを起こしてしまいます。
テーマエディタから編集できる内容は多岐に渡るため、既に運用されているストアの開発に加わる場合には特に、先祖返りを防ぐ運用ルールの策定が欠かせません。

Theme Kitのファイル上書きをめぐるGitHub上のやりとりにおいて、Shopify開発者より、 theme deploy の手順は下記のように言及されています。

• use version control and commit all your work
• run theme download before deploying to make sure you get all the recent changes and use your version control to see what exactly changed
• run theme deploy when you are finally ready.

1. gitを利用し、実装内容はすべてコミットする
2. theme deploy前にtheme downloadを必ず行い、差分を解消しておく
3. 差分がないことを確認した上でtheme deployする
参照：https://github.com/Shopify/themekit/issues/647

こちらの手順に従い、「theme deploy前に必ずtheme download工程を挟む」という運用ルールを開発者間で共有すれば、上書きのリスクはある程度まで低減できます。（ヒューマンエラーのリスクはどうしても残ってしまいますが……）
複数環境で開発を行っている場合は特に、本番反映前に本番環境の内容を theme download し、ローカルとの同期を取っておくことが大切ですね。

本記事を公開した2019年当時は theme download コマンドの度に、Shopifyサーバー上のファイルが全取得されるため、毎回3分ほどの時間が掛かっていたのですが、2020年8月にリリースされたv1.1.0以降は、Shopifyサーバーと差分のあるファイルのみがダウンロードされる仕様となり、比較的利用しやすくなりました。

補足：theme deployの反映仕様について

Theme Kitは theme deploy コマンドをオプション無しでそのまま利用した場合、反映先環境の全てのファイルが、ローカル環境のファイル内容で置き換えられます（2021年3月現在）。
ローカル環境に存在しないファイルはShopifyサーバー上から削除されます。どのファイルが変更されたのかログも残りません。クライアントが画像ファイルなどをassetsディレクトリに追加していた場合、事前にtheme download工程で同期を取っておかなければ、サーバー上から消えてしまうので注意してください。
※ --nodelete オプションを付記すると、ファイルを削除しない形でtheme deployが行えます。
theme deplpyコマンドの仕様詳細は公式ドキュメントにもまとまっているので、一度目を通してみてください。

前述したTheme Kitワークフロー（ theme deploy 前に theme download を必ず行う）に従えば、上書きのリスクは減らせますが、人は必ずミスをするものです。工程を忘れてしまうこともあるでしょう。
もう一工夫として、反映したいファイル名を以下のようにコマンド内で記述すれば、意図しない範囲への上書きをある程度防ぐことができます。

theme deploy sections/header.liquid assets/custom.css

が、これでも打ち間違いや打ち忘れのリスクは残っています。人の手が入る箇所は極力減らしたいところです。
そこで、（まだ検証中ですが）現在、deployBotを利用したShopifyへの自動反映をテストストアで試してみています。上手くいきそうであれば、また別途記事にまとめたいと思います:)

shopifyバージョン管理において私たちが行っていること

Theme Kitのdeploy手順についてはご紹介したとおりですが、適切なバージョン管理のために、私たちは下記の工夫も行っています。

gitを利用する

こちらについては大前提ですね。私たちはテーマフォルダの内容をGitHub上で管理し、各メンバーの作業内容を必ずコミット・プッシュするようにしています。
Shopifyテーマ開発に適したブランチ運用についてはまだ探り探りなのですが、基本的には本番環境をmasterブランチと、開発環境をfeatureブランチと紐付けています。
featureブランチで開発し、本番反映前にmasterブランチで本番環境の内容を theme download 、差分が無いことを確認した上でfeatureブランチの内容を theme deploy ……という手順を踏むことが多いです。
deployBotと上手く組み合わせられれば、より楽になるのではないかと考えています。
一点、 theme watch コマンドの実行中にブランチを切り替えると予期しないファイルまで一気に反映されてしまうので、留意が必要です。

管理画面上からのコード編集は行わない

開発者が複数いる場合、基本的にはTheme Kitで開発を行い、管理画面のコードエディタ直接編集はできるだけ行わないようにしています。
クライアントがコードエディタでファイルを更新する機会は少ないと思いますが、編集された場合には、一報を入れていただくようにお願いしています。

管理が困難なファイル（setting_data.jsonなど）をTheme Kitとgit管理からignoreする

テーマ開発でもっともバージョン管理が困難なのは、setting_data.jsonファイルではないかと思います。
（Shopify開発を始めたばかりの頃、私はsetting_data.jsonの差分管理に失敗して本番上書きをやらかしました…笑）

setting_data.jsonにはテーマエディタ経由の変更がすべて記述される上に、本番ストアと開発ストア間での同期も取りづらいです（※前回の記事で言及したとおり、テーマエディタから登録されているデータはアプリを用いてもストア間での移行ができず、画像含めすべて手動で複製する必要があるため）。
そのため、私たちは現在、setting_data.jsonについてはgit管理からもTheme Kit管理からも除外しています。
クライアントが本番環境テーマエディタから編集を行う前提で、上書きリスクを鑑み、テスト環境との差分を許容する運用です。

Theme Kitからsetting_data.jsonを省く運用については、下記記事も参考になります。

When an admin changes a setting, it is written to config/settings_data.json on the server, however the theme watch is not a two-way street. The local copy of config/settings_data.json will not reflect settings made through the admin interface, and if you edit it locally, it will push up and overwrite what is on the server. Therefore, it is best to ignore this file altogether from your repository and let it live only on the server.

参照：https://thoughtbot.com/blog/shopify-theme-development

Theme Kitのignore設定は、config.ymlファイルを下記のように編集することで可能です。

環境の名前:
  password: パスワード
  theme_id: "テーマID"
  store: ストアURL
  ignore_files:
  - config/settings_data.json

setting_data.jsonの情報すなわちテーマエディタ上の設定情報なので、カスタマイズの都合上変更が必要な場合には、管理画面のテーマエディタ上から直接編集するようにしています（setting_data.jsonファイルは直接触らない）。

また、カスタムフィールドなどのアプリが生成するliquidファイルも、アプリ側の編集内容によって頻繁に上書きされてゆくため、テスト環境上での確認が不要な場合にはignore対象に含めても良いかもしれません。

おわりに

Shopifyは双方向（サーバーとローカル間）の同期が困難ということもあり、バージョン管理が適切に行われていないと、予想外の先祖返りトラブルに見舞われがちです。
本記事で紹介した工夫についても、もっとより良い方法がないか、私たちも模索しています。
「こうしたら良いのでは」「この手順が上手く行っている」など、何かありましたら、Twitterや感想フォームからお声をお寄せいただけるととても嬉しく思います:)