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

Shopify CLI インストール方法

大まかな流れ

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

Home brewのインストール

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

1、ますは、バージョン確認
brew --version

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

２、Home brew
以下のコマンドをターミナルに貼り付けます。
/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をインストールしてバージョンアップしましょう。

１、まずは、バージョンの確認
rbenv version

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

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

３、rbenvの初期設定
rbenv init

上記のコマンドを叩くと、

# Load rbenv automatically by appending
# the following to ~/.zshrc:
eval "$(rbenv init -)"

と表示されます。
自動的にrbenvを読み込むには、eval "$(rbenv init -)"を~/.zshrcに追加してくださいと言う内容です。
~/.zshrcは、シェルの設定ファイルです。シェルにzshを使用している人は、~/.zshrcを、バッシュの人は~/.bashrcに追記してください。

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

Rubyのインストール

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

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

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

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

３、設定されているバージョンを確認する
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