Shopify のテーマ開発をチームで行う時の課題を共有する

こんにちは、 Gaji-Labo 横田です。
Eコマース用のプラットフォームである Shopify によるサイト構築で、チームでのテーマ開発を行っていますが、SaaS という Shopify の性質上、他プロジェクトでのチーム開発とは別の課題を感じながら、日々試行錯誤しています。今回は何を課題と感じたか、書き出してみたいと思います。

環境構築

前提として、チーム内の環境構築に必須のツールは以下となります。

GitHub でのコード管理

GitHub でリポジトリを作成し、コード管理します。大まかな作業フローとしては、タスクごとに feature ブランチを作成し、プルリクエストでレビューを受けます。Approved されたら main ブランチにマージしていきます。

Shopify Theme Kit での開発

Shopify Theme Kit での開発については、「Shopify Theme Kit で Shopify のテーマ編集を行う」をご参考ください。

パッケージマネージャに yarn を導入

開発を円滑に進めるために yarn script を導入し、Theme Kit のコマンドラインをまとめています。

"scripts": {
    "dev": "yarn && theme deploy && theme open && theme watch",
    "gulp": "yarn && npx gulp",
    "deploy": "yarn && yn && theme deploy -e=production --allow-live"
  },

CSS は Stylelint を追加し Gulp でコンパイル

CSS の環境構築については「Shopify で実際に設定した CSS の環境構築」をご参考ください。

BackstopJS でビジュアルリグレッションテスト

コード編集前後の表示差分確認に BackstopJS を導入しています。BackstopJS については「BackstopJSで行うビジュアルリグレッションテスト」をご参考ください。

テーマファイル

開発用のテーマと本番公開用のテーマ（ライブテーマ）を用意します。
初期の開発フェーズでは、 development テーマで開発やレビューを進め、リリース時に development テーマをライブテーマとして公開します。
運用フェーズに入ると、ライブテーマから複製したテーマを development として開発やレビューを進め、ライブテーマにデプロイしていくという流れになります。デプロイ時は、必ずライブテーマのバックアップを複製で用意し、テーマライブラリーに置いておきます。

作業とリリースのフロー

作業とリリースのフローを手順としてテキスト化し、チーム内で共有しています。大まかに言えば以下のような感じです。

1. GitHub の最新コードを取り込む
2. 本番公開用テーマの差分を取り込む
3. 開発用テーマに作業を反映させプレビューURLで確認する
4. プルリクエストを作成し、レビューを受ける
5. Approved されたら main ブランチへマージする
6. 本番公開用テーマにデプロイする

課題に感じたこと

このような最低限の環境と作業フローをチーム内で整え、開発や運用を始めましたが、SaaS という Shopify の性質上、GitHub によるコード管理との連携や、本番環境との差分検出、バックアップ体制、メンバー間で並行して開発をする際の安全で効率的な進め方に課題を感じました。

• GitHub でのコード管理に含められないページがある。管理画面の「ページ」で追加したページや、「法務関連 > 法的ページ」で作成するページ、「ブログ記事」で追加したページ、「設定 >ファイル」でアップする画像ファイルなど。また、管理画面から直接コード編集されると「いつ」「だれが」更新したか不明となり、コード管理から外れてしまう。
• 管理画面のテーマのタイムスタンプは、管理画面上で直接「保存する」ボタンを押した時の日時が反映されているようで、Theme Kit のコマンドラインからデプロイしても、タイムスタンプに反映されない。
• Gulp でのコンパイルを明示的な手順として何度かはさまないと、デグレが起こることがある。
• 開発環境として development テーマがひとつしかない状態だと、複数の作業ブランチとプルリクエストを切り替えながら同時並行で進めることができない。
• プルリクエストマージ後に、本番テーマにデプロイし忘れるというヒューマンエラーが発生しやすい。
• 本番公開用テーマの差分取り込みに、theme get コマンドを使うと、ローカルのテーマ全体が本番環境に置き換えられてしまう。
• 基本的には本番デプロイ時に -n オプションを付けることで、ローカルに存在しないファイルでも本番環境から削除しないようにしているが、不要なファイルが本番環境にいつまでも残り、Git との差分として毎回表示されてしまうことがあるため、オプションを付けないデプロイタイミングを見計らう必要がある。
• 運用フェーズでは特に、同時並行で複数人の作業が重なることがあるため、本番公開用テーマの差分取り込みを明示的な手順として何度かはさまないと、不具合やデグレが起きたり、設定が消えてしまうことがある。しかし、自分の作業を本番環境にデプロイする直前に本番公開用テーマを取り込んでしまうと、コンフリクトや、逆に自分の作業の消失が起こってしまう。
• 運用スピードを重視して、本番公開用テーマの管理画面での編集やファイル追加を直接行い、リリース後に GitHub のコード管理に含めるというフローが必要となることがあり、手元の開発とコンフリクトやデグレが起こる可能性がある。

まとめ

今回はShopify でのテーマ開発をチームで行う時の課題を共有しましたが、これらの課題をどう解決していくと安全な開発体制や仕組みとして作り上げることができそうか、チームで議論や調査を重ね、少しずつ取り組みに道筋が見え始めています。
次回、これらの課題の解決策についてご紹介できたらと思います。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。