【Shopify】GitHubでテーマファイルを管理する方法を解説

悩む人

GitHubでShopifyのテーマファイルを管理する方法が知りたい！

こんなご要望にお応えします。

Shopifyのテーマファイルを編集する際にGitHubでバージョン管理を行うと様々な面でかなり楽に開発を行えます。

ということで今回は、GitHubでShopifyのテーマファイルを管理する方法とGitHubを活用するメリットも軽く解説していきます。

ShopifyのテーマファイルをGitHubで管理する方法

ShopifyのテーマコードをGitHubで管理する手順は以下の通りです。

以下の手順は、GitとTheme Kitのインストールを完了している前提ですので、まだインストールされていない方はまずそれらのインストールをお願いします。

関連記事 Gitのインストール方法をわかり易く解説（画面付き）

関連記事 【Shopify】Theme Kitを使ってローカル開発する方法を解説

git init

git add .
git commit -m "Initial commit"

# ①で作成したGitHubリポジトリをリモートブランチとして設定
git remote add origin https://github.com/your-name/project-name.git

git push origin master

以上の流れで、GitHubでテーマのコードを管理する準備が整います。

あとは、普段の開発と同様に、実装機能ごとにブランチを切って開発するなりしていけばOKです。

GitHubで管理するメリット3つ

GitHubでテーマファイルのバージョン管理をするメリットは主に以下の2つです。

それぞれ簡単に解説していきます。

メリット１：複数人で開発できる

1つ目のメリットですが、GitHubを使えば複数人で開発ができるできるという点です。

GitHubでテーマファイルを一元管理できるので、開発者ごとにローカルでブランチを切って、実装。

その後にコードレビューをしてマージができて、チーム開発もかなりスムーズになります。

GitHubを使ってShopifyのチーム開発をする場合は、こちらの記事で流れや設定など詳しく解説されているので、ご参考ください。

メリット２：コードの保存・管理がカンタン

2つ目のメリットは、コードの保存や管理がラクな点です。

Shopifyでストア開発や改修をする際に作成したセクションファイルなどを自身のパソコンなどで保存するのは面倒です。

が、その点GitHubでバージョン管理していれば、GitHub上にコードが残りますし、実装ごとにブランチを切っていればすぐに実装コードに辿り着けます。

トマトソース

私はこの方法で、実装ごとにブランチを切ったりコミットしたりして、実現したい箇所をまとめてみられるようにしています。
これ、めちゃくちゃ便利です。

また、GitHubであればテーマファイルの容量を気にする必要もないので、気が楽になります。笑
（プッシュする際に大きすぎるファイルはGit LFSを使用しないといけないですが…）

メリット３：バグが起きたときにすぐ元に戻せる

3つ目のメリットは2つ目のと少し似ていますが、バグが発生した際にすぐに正常なバージョンに戻せる点です。

Shopifyでテーマカスタマイズをしていると、意図せぬところでバグが発生することはよくあります。

そんな時も、GitHubで管理していれば、そのバグが起きる前のバージョンにすぐに戻せます。

なので、万が一バグが発生した際もとりあえずは以前のバージョンに戻して、ストアでの商品販売は続けられるのでテンパらずに済みます。

GitHubでテーマファイルを管理する方法を解説：まとめ

git init

git add .
git commit -m "Initial commit"

# ①で作成したGitHubリポジトリをリモートブランチとして設定
git remote add origin https://github.com/your-name/project-name.git

git push origin master

今回はShopifyのテーマファイルをGitHubで管理する方法を解説してきました。

GitHubでファイルを管理すると、チーム開発やテーマファイルの管理がかなり楽になるので、ぜひ使ってみてください。