spachill 
shopifyの開発環境を整えてコードをshopify CLIでローカル環境で設定できるようになったとしても、そのコードの保管先って自身のPCに中になりますよね。
万が一PCが盗まれたり、壊れてしまったりしたら、書いていたコードも全て消えてしまうということが起こりかねません。（想像しただけで背筋が凍り付きます）
そこでGit Hubというサーバー上にコードを保管できるツールを使ってshopifyの開発したコードを保管できるツールがあります。
これを使えば
・shopifyの開発コードをサーバーに保管できるためPCが変わっても作業できる
・開発に書いていったコードの変更した順番などもしっかり追うことができる
・チーム開発になっても全員で一つのサイトのコードを共有できる
こんなメリットがあります。
ちなみにまだshopify CLIでローカル環境でshopifyの開発環境が整えていない方は下記の記事を参考にshopify CLIの環境を整えてから、この記事を参考にしれもらたらと思います！
では解説していきます！
目次
- Git Hubのログイン
- Git Hubのリポジトリィを作成
- shopifyのコードをテーマフォルダにダウンロードする
- Git Hubとshopifyのストアのコードを連携
- shopifyのテーマをGithubを連携
- まとめ
Git Hubのログイン
まずは、Githubのアカウントを持っていない人は作成しましょう。
すでにアカウントをお持ちの方はこちらからお読みください！
上記のリンクからGithubのアカウントを作成しましょう。
すでに、アカウント持っている方は、次の「Git Hubのリポジトリィを作成」に進んでください！
アカウントを持っていない人は、
メールアドレスを入力
↓
パスワードを設定
↓
ニックネームを入力
↓
送信
↓
メールアドレスに認証番号が届く
↓
認証番号を入力
↓
完了
このフローでユーザー登録ができます！（所要時間3分未満）
Git Hubのリポジトリィを作成
最初にGithubを開くとレポジトリィの作成の画面が出てきます。
そこでレポジトリィを作成する（Create repository）を選択し、レポジトリィを作成します。
（レポジトリィっていわば、Github上のフォルダやファイルを管理するタイトルみたいなものです。）
このボタンを押すと次の画面になります。
赤字の通りに入力するればOKです！
もしこのコードを他の人にも共有したいということであれば、PrivateではなくPublicを選択してください！
そうすると次の画面に遷移します。
この赤で囲っているコードは必要になりますので必ずコピーしてください！
では次に、空のフォルダを作成します。
今回は「test」というフォルダを作成しました。
この通り、中身は空っぽです！
ではこの空のフォルダでVsCodeを開きます！
VscodeからGithubの管理をしやすいようにVscodeのアプリケーションの導入をお願いします！
こちらの２つをインストールをお願いします！
あれば確実に利便性が高くなります。
では続きを、、、
当然、中身は空のフォルダを開いているので、エクスプローラーの部分にも何もフォルダやファイルは表示されません。
では、このVsCodeのターミナルに先ほどコピーしたコードを貼り付けします。
ターミナルの表示がない方は、Vscodeの画面の下の方から上に引っ張ると出現します。
Githubに接続できたら「main」または「master」の文字が表示されていると思いますので、これでGithubとの接続は完了となります！
shopifyのコードをテーマフォルダにダウンロードする
上記に作業が完了したら、下記の記事「開発テーマをダウンロードする」を参考にこの空のファイルにshopifyのテーマのダウンロードを行いましょう！
ダウンロードが終わりましたら、今表示しているこの記事に戻ってきてください！
ダウンロードが終わりましたら、ファイルの中にデータがたくさんある状態だと思います！
Git Hubとshopifyのコードを連携させる
shopifyのテーマをダウンロードできたら、こちらのようにVscodeの上から３つ目くらいのところに数字が書いていると思います。
これは、今まであったもの→変更した箇所の数になりますので、テーマファイルをダウンロードしたらそれだけファイルやフォルダが増えたことを意味しています。
この画像では、空っぽのファイルから300ものフォルダやファイルがダウンロードされたことを意味しています。
ローカル環境のPCでこれだけ変更があったので、今度はGithubにその変更を送りますというのが以下の作業となります。
①上から３つ目の数字が出ているところをクリック
②メッセージにコメントを記入（今回はファーストコミットメント）
③変更と書いているところの横の「＋」ボタンを押して（ステージング）、コミットボタンを押す（コミット）
④変更の同期をクリック（Push）
⑤Github側で変更された内容を確認
各フォルダが新しく入っていますし、メッセージのところに打ち込んだ「ファーストコミットメント」という文言が追加されていることがわかりますね。
shopifyのテーマをGithubを連携
あとはもう簡単な流れになります。
①shopifyの管理画面から、オンラインストア→テーマ→テーマを追加を選択
②テーマを追加からGitHubに接続するを選択
③アカウント→リポジトリィ→該当のレポジトリィを選択
④ブランチを選択して接続
⑤テーマの中にGithubと連携したテーマの作成を確認
まとめ
こちらで以上となります。
あとは、コミットやプッシュといったGitの操作こそ発生しますが、連携させる環境構築は上記のフローをしてもらえるとGitとshopifyの連携ができる形となります。
制作会社の方とお仕事する時や、チーム化して自身のコードをみんなで共有する時など、これができるだけで仕事の幅は大幅に変わります。
コミットした時にコードを戻すことができたり、自身の体調が悪くなった時にも誰かに引き継げたりとメリットしかありません。
みなさまもshopifyとGit hubを連携して、より良い環境を作りshopifyのカスタマイズを行なっていきましょう！
ご質問などあればツイッターなどで遠慮なく質問しもらえると嬉しいです！