🥇

【Shopify.dev和訳】Themes/Best practices/Version control

2021/09/18に公開

Shopify

themes

tech

この記事について

この記事は、Themes/Best practices/Version controlの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

Shopify テーマのバージョン管理

Shopify テーマを構築する際、テーマコードの変更を追跡・管理するために、オプションでバージョン管理を導入することができます。バージョン管理は、時間の経過に伴うコードの変更を管理するのに役立ちます。

Shopify GitHub integrationでは、Shopify ストアのテーマにバージョン管理を追加することができます。Shopify GitHub integration を使ってテーマが GitHub リポジトリに接続されると、販売者がテーマに加えた変更はすべて、ブランチへのコミットとして追跡されます。

Shopify テーマのバージョン管理戦略を計画する際には、以下の要素を考慮する必要があります。

ブランチの構成と公開戦略 - GitHub の統合により、ブランチを使用して機能やキャンペーンを開発できるようになったため、ブランチをどのように構成し、公開したテーマをどのように管理するかを検討する必要があります。
ソースとコンパイルされたコードの管理 - Shopify GitHub の統合は、デフォルトの Shopify テーマのフォルダ構造のみをサポートしています。テーマのソースコードをコンパイルされたコードに変換するためにビルドパイプラインを使用する場合は、ビルドパイプラインを使用しつつ、GitHub 統合を使用してコンパイルされたコードの変更を追跡・管理できるようなアプローチを選択する必要があります。

ブランチの構成

Shopify の GitHub 統合機能を使用してテーマを開発している場合は、mainブランチまたはmasterブランチをストアに接続してから、出来上がったテーマを公開することを検討してください。これにより、公開されたテーマは、メインブランチやマスターブランチにマージされた機能が常に最新の状態に保たれます。

セールなどのイベントでは、メインではないブランチを使ってテーマをカスタマイズすることを検討してください。これらのブランチに接続されているテーマは、一時的に公開することができます。イベントが終わったら、メインブランチに接続されたテーマを再公開することができます。

ビルドパイプラインを使用してコードを変換する場合は、本番コードのメインブランチとして機能する特定のデプロイブランチを作成し、master からコンパイルしたコードをこのブランチにデプロイする必要があります。詳細については、次のセクションでソースコードとコンパイル済みコードの管理について説明します。

ソースコードとコンパイル済みコードの管理

テーマのソースコードを、ブラウザの実行時に最適化されたコンパイル済みのコードに変換するために、ビルドパイプラインを使用することがあります。Shopify の GitHub 統合では、デフォルトの Shopify テーマのフォルダ構造に一致するブランチのみをサポートしているので、Shopify に接続しているブランチがこの構造に一致するようにコードを整理する必要があります。たとえば、Shopify に接続しているブランチに src と dist のフォルダを含めることはできません。

ソースコードとコンパイルされたコードの両方をバージョン管理で管理するには、いくつかの戦略から選ぶことができます。

ソースコードとコンパイル済みコードを別々のリポジトリで管理する
ソースコードとコンパイルされたコードをブランチを使って分ける(推奨)
ソースコードとコンパイル済みコードを混在させる
Shopify の GitHub 統合機能を使ってテーマコードを追跡したくない場合は、ソースコードのみをバージョン管理で管理することもできます。

ソースやコンパイルしたコードをバージョン管理で管理するメリット

ソースコードやコンパイル済みのコードをバージョン管理で管理すると、以下のようなメリットがあります。

Webpack、Rollup、PostCSS などの一般的なビルドツールを活用できます。
開発者のマシン上でファイルをインクリメンタルにビルドすることができ、ソースコードに加えられた変更をライブでプレビューすることができます。
Shopify を介してコンパイルされたコードへの変更は、簡単に識別できます。
the Shopify GitHub integrationを使って、コンパイルされたコードへの変更をストアにプッシュすることができます。

しかし、このモデルを使用すると、コンパイルされたコードに加えられた変更は、手動でソースコードに埋め戻す必要があります。

ソースコードとコンパイル済みコードを別々のリポジトリにする

開発者は、ソースコードとビルドツールを格納したリポジトリと、コンパイル済みコードのバージョン情報を格納したリポジトリを別々に持つことができます。

メリット

ソースのみのバージョン管理モデルから移行する場合、別々のリポジトリを使用するのは簡単です。コンパイルされたコードを直接ストアにプッシュすることができ、the Shopify GitHub integrationを使用してコンパイルされたコードの変更を追跡することができます。

デメリット

1 つのテーマに対して 2 つのリポジトリで作業する必要があるため、ソースコードのバックフィルが複雑になる可能性があります。
ファイル変換の影響を受けない静的ファイルがリポジトリ間でコピーされるため、メンテナンスやバックフィルの手間が増える。

ブランチによるソースコードとコンパイル済みコードの分離（推奨)

テーマのコンパイル済みコードを、ソースコードとは別のブランチで公開することができます。このブランチの内容は、Shopify のテーマプラットフォームと Theme Check に対応しています。

これを実現する一つの方法は、git subtree を使うことです。subtree コマンドを使用すると、コンパイル済みのコードをブランチに抽出して、テーマに安全に接続することができます。

利点

リポジトリ内に本番用のコードを置く場所が明確になります。
ブランチのコミット履歴がきれいです。本番用ブランチのコミットは、本番用コードの更新のみです。ソースコードの変更は、それぞれのブランチで行われます。

デメリット

作業用ブランチの内容をプレビューするには、「プレビュー用」の本番コードを含む別のブランチが必要になります。ブランチの管理が煩雑になる可能性があります。
ファイル変換の影響を受けない静的なファイルは別のブランチに置かれるため、メンテナンスやバックフィルが必要になります。

ソースコードとコンパイル済みコードの混在

ソースコードと同じフォルダ構造の中に、コンパイル済みのコードファイルを混在させることができます。例えば、assetsフォルダの中にmain.jsのソースファイルとコンパイル済みのmain.min.jsを追加することができます。

利点

ソースコードとコンパイル済みコードを混在させることで、コンパイル済みファイルの数を最小限に抑え、コンパイルが必要なものだけにすることができます。つまり、販売者がコンパイルされていないファイルを変更しても、ソースコードにバックフィルやバックポートする必要がありません。

デメリット

コンパイルされたコードは識別しづらく、販売者が直接編集してしまう可能性があります。
コンパイルされたコードを編集した場合、次回ソースコードからコンパイルされたときに、そのコードが失われないようにバックフィルする必要があります。

ソースコードのみをバージョン管理で管理

ソースコードのみをバージョン管理にコミットし、リリースを作成する際にコンパイルされたコードをストアに直接デプロイすることができます。デプロイはShopify CLIを使って開発者のマシンから手動で行うこともできますし、continuous integration を使って自動化することもできます。

利点

この方法は、Shopify テーマ開発者のコミュニティでよくサポートされています。
Webpack、Rollup、PostCSS などの一般的なビルドツールを利用できる。
開発者のマシン上でファイルを漸次的にビルドすることができ、ソースコードに加えられた変更をライブでプレビューすることができます。

デメリット

Shopify のテーマプラットフォームと互換性のないソースコードのみがリポジトリに含まれているため、この方法はthe Shopify GitHub integrationには対応していません。
コンパイルされたコードはバージョン管理されていないので、変更の追跡が困難です。コンパイルされたコードへの変更を手動で確認し、次にコードがコンパイルされてテーマが上書きされたときに変更が持続するようにソースコードを埋め戻す必要があります。

Shopify アプリのご紹介

Discussion

ログインするとコメントできます