弊社では、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