Shopify CLIのインストール方法と使い方

弊社では、Shopify開発にはShopify CLIを使用して開発をしています！
Shopify CLIを使用し始めて、１年ぐらいになりますが、導入当初は色々と戸惑ったりしたこともありますし、今後アップデートや新人さんへ開発環境準備時などにも、使いやすいように記事にまとめたいと思いましたー！

## Shopify CLI インストール方法
### 大まかな流れ
Macは、買いたての想定で話を進めます。
色々なバージョン管理ツールなどは入っていないとう状態です。
Shopify　CLIをインストールするまでいくつかの工程がありますが、各工程についてはたくさんの記事がありますので、「エラーが出て進めない」という時は一つずつ調べながら進んでもらえれば、必ずインストールできると思います。

### Home brewのインストール
Home brewとは、簡単に言えばiPhoneで言うApp　Storeみたいなものです。
Macに必要な機能をインストールしてくれます。
ターミナルを開いて準備してください。

<b>1、ますは、バージョン確認</b>
`brew --version`

Home brewが入っていない状態であれば、ここでbrewなんてないよー(brew: not found)と言ったエラーが出ます。
Home brewが入っていないので、2に進んでインストールしてください。
バージョンが表示されるようであれば、Home　brewが入っているのでアップデートしてください。

<b>２、Home brew</b>
以下のコマンドをターミナルに貼り付けます。
```/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"```
　
途中で、Press RETURN to continue or any other key to abort(インストールを続けていいですか？）と聞かれるので、エンターキーを押してそのままインストールを続けます。
Installation successful!と表示されたら、インストールが完了です。
`brew --version`を押して、バージョンが表示されるか確認してみましょう。

### rbenvのインストール
rbenvは、Rubyをバージョン管理するためのツールです。
Rubyを使ってShopify CLIをインストールするので、そのためのRubyを管理するためのrbenvをインストールします。
購入したてのMacに既にRubyは入っていますが、バージョンが低かったりするとShopify CLIをインストールできないのでrbenvをインストールしてバージョンアップしましょう。

<b>１、まずは、バージョンの確認</b>
`rbenv version`

こちらでも、Home brewのようにインストールされていなければ、rbenv: not foundと言ったエラーが出ます。
rbenvが入っていないので、２に進んでください。
バージョンが表示されるようであれば、rbenvは入っているので、アップデートしましょう。


<b>２、rbenvのインストール</b>
`brew install rbenv`
インストールが完了したら、バージョンを確認してみましょう。
バージョンが表示されたら、インストールが成功しているので、初期設定をします。

<b>３、rbenvの初期設定</b>
`rbenv init`

上記のコマンドを叩くと、
```
# Load rbenv automatically by appending
# the following to ~/.zshrc:
eval "$(rbenv init -)"
```
と表示されます。
自動的にrbenvを読み込むには、eval "$(rbenv init -)"を~/.zshrcに追加してくださいと言う内容です。
~/.zshrcは、シェルの設定ファイルです。シェルにzshを使用している人は、~/.zshrcを、バッシュの人は~/.bashrcに追記してください。

<b>４、設定ファイルにeval "$(rbenv init -)"を入力する</b>
ターミナルに`open ~/.zshrc`と入力するとエディターが表示されるので、
ファイルの下の方に`eval "$(rbenv init -)"`を入力して
`source ~/.zshrc`をターミナルに入力して下さい。
（バッシュの人は、~/.bashrcで作業してください)

### Rubyのインストール
rbenvのインストールと設定が終わったので、Rubyをインストールしていきます。

<b>１、インストールするバージョンを確認する</b>
`rbenv install --list`でインストールできるRubynのバージョンを確認します。
２０２２年６月29日時点でRubyのバージョンは、2.7以降が必要なので、今回はとりあえず最新の3.1.2を入れていきます。

<b>２、ルビーをインストールします。</b>
`rbenv install 3.1.2`を入力します。
インストールが終わったら、`rbenv global 3.1.2`を入力します。

rbenv globalコマンドは、どのディレクトリからでも使用できるRubyを設定します。

<b>３、設定されているバージョンを確認する</b>
`rbenv versions`を入力すると以下の様に表示されます。
```
  system
  2.7.4
* 3.1.2 
```
指定したバージョンの横に、❇︎マークがあれば、Rubyの設定は完了です。

### Shopify CLIのインストール
ここまできたら、あと少しです。
`gem install shopify-cli`をターミナルに入力すると、CLIがインストールされます。
最後にCLIのバージョンを確認します。`shopify version`を入力してバージョンが表示されるとインストール完了です。

ながながとお疲れさまでした。

## 開発でよく使うコマンド CLI 
やっとインストールできたところで、よく使うコマンドの説明をしていきます！
その前に大まかな部類で行くと
・アカウント系： ログインやログアウト
・テーマ系： テーマの操作系
・アプリ系： アプリの操作系
ここでは、アカウント系とテーマ系についてよく使うコマンドを説明していきます。

#### アカウント系
アカウントにログイン：`shopify login`
ブラウザが開き、パートナーアカウントでログインします。

アカウントからログアウト：`shopify logout`
アカウントを切り替えたりする時に使います。たまに、コードの変更が上手くいかない時は、一度ログアウト後に再度ログインしたりします。

CLIに接続するストアを設定する：`shopify switch --store=domain`
開発するショップを接続する時に使います。

#### テーマ系
開発中のテーマの確認： `shopify theme serve`
開発中のテーマをローカル環境で確認する時に使います。

テーマデータを引き込む： `shopify theme pull`
接続しているショップからテーマデータを開発環境に引き込みます。

テーマデータを送る：　`shopify theme push`
開発環境から接続しているショップにデータを送ります。
本番のライブテーマにもデータを送ることができてしまうので、注意が必要です。


## まとめ
エンジニアの鬼門、「開発環境の準備」
私も過去に、インストール方法が分からなくて、数日溶かすなんてこともありました！www
こちらの記事が少しでも誰かのためになれば幸いです！

あと、
ARCHETYPでは、Shopifyのテーマ開発やアプリ開発をやりたいエンジニアを募集しております！
気になった方はお気軽にエントリーをお待ちしております！(業務委託もOK）
https://www.archetyp.jp/recruit/
noteでブログもやってるので良かったらチェックしてください！
https://note.com/archetyp