Shopify CLI 3.xインストールガイド｜Mac・Windows両環境対応

＊本サイトはアフィリエイトプログラムを利用しています。

カスタマイズ性に優れたECプラットフォーム「Shopify」。Shopifyはコードを記述することで、個別カスタマイズを行なうことや、オリジナルテーマやアプリを開発することが可能です。

「ブラウザ上での開発は非効率。何か効率化する方法はない？」
「Shopify CLIを使って、ローカル環境で開発したい」
「Shopify CLIが3.xにバージョンアップしたみたいだけど、何が変わったの？」

この記事を読むことで、上記の課題や疑問が解決します。

Shopify CLIは、Shopifyの開発をサポートするコマンドラインツールです。このShopify CLIを使いこなすことで、時間がかかっていた開発業務が驚くほど効率化することでしょう。

今回はShopify CLIのインストール方法から、バージョンアップ、使い方について、詳しく解説します。

開発を行う方は、この記事を参考にShopify CLIをインストール＆活用してみてください。

Shopifyの制作でお困りの方

新規構築からシステム移行まで、お困り事にECのプロ集団が全力でサポートさせていただきます！

Shopifyのプロに無料相談

Shopify CLI活用ガイド

まずはShopify CLIとは何か、そして活用するメリット、インストール要件について解説します。

Shopify CLIとは？活用するメリット

Shopify CLIは、Shopifyアプリやテーマの開発を効率化するコマンドラインツールです。

このツールを使用しない場合、オンラインエディタでテーマファイルを編集したり、手動でアップロードしたりする必要があるため、とても効率が悪いです。また誤った変更を加えてしまうようなリスクもあるでしょう。

Shopify CLIを導入すると、ローカル環境での開発が可能になります。これは作業効率が格段に向上することと、バグ混入のリスクが低減するメリットがあります。さらに加えた変更を仮想の開発テーマ上に即時反映して確認できるため、テストやデバッグのプロセスが加速するでしょう。

以上のように、Shopify CLIを活用することにより、開発サイクルが短縮され、より迅速にテーマの公開やアプリの市場投入が可能になります。

Shopify CLIのインストール要件

Shopify CLIのインストール要件は、OSによって異なります。各OSの要件は以下の通りです。（2024年2月時点）

※この記事では、インストールする端末のOSについて、MacOSとWindowsのみを対象とし、Linuxは対象としていません。

MacOS

Homebrew
Ruby
Node.js バージョン18以上
Git

Windows

Ruby+Devkit 3.0
MSYS2コンポーネントとMSYS2ベースインストールオプションを選択
Node.js バージョン18以上
Git
Bundler バージョン2.3.8以上

要件は更新されることがあるため、インストール前にShopifyの公式ドキュメントを確認してください。

Shopify CLI 2.xから3.xへのアップグレード方法

2022年10月にShopify CLI 3.xがリリースされました。

まだShopify CLI 2.xを使用している場合、すでにShopifyのサポートは切れ、また非推奨となっているため、3.xへのアップグレードを検討してください。

Shopify CLI 3.xの最新バージョンは、3.56.3です。（2024年2月時点）

Shopify CLI 3.xと2.xの違い

Shopify CLI 3.xは2.xと比較して、ログインの効率化や操作性の向上を目的とした改善が行われています。

例えばストアログイン後は、後続のコマンドにもログイン情報が自動的に引き継がれ、毎回ログインコマンドを入力する手間が省かれました。またCLIへの認証も明示的にログインをする必要がなくなりました。これにより開発者はより少ない操作で、CLIによる開発が可能です。

利用バージョンの確認方法

そのほか、コマンドが変更されたり、一部のコマンドは使用できなくなっています。CLI 2.xを使い込んでいた方は、「Shopify CLI 3.xの使い方」の章や公式ドキュメントで、コマンドの違いを確認することをおすすめします。

端末にインストールされているShopify CLIのバージョンがわからない場合、以下の方法で確認できます。

Macの場合にはターミナルを、Windowsの場合にはコマンドプロンプトを起動して、以下のコマンドを入力し、Enterキーを押下します。

shopify version

以下の画像のようにバージョンが表示されます。「2.xx.x」のように2から始まる場合には、Shopify CLIのバージョンは2.x系です。その場合には、アップグレード手順に沿ってバージョンアップを行ってください。

Shopify CLIのバージョンが3.x系の場合には、「3.xx.x」のように3から始まります。

アップグレード手順

Shopify CLI 2.xからShopify CLI 3.xへのアップグレード手順について解説します。

この項では、「Shopify CLI 3.xをインストールするのに必要な要件が満たされている」という前提で解説をします。もし「まだ各要件項目を満たしていない」という場合には、「Mac版｜Shopify CLIインストール手順」または「Windows版｜Shopify CLIインストール手順」の章を参照してください。

アップグレード要件の確認

各要件のインストールおよび、バージョンの確認方法は以下の通りです。

Rubyのインストール＆バージョン確認

ruby -v

Node.jsのインストール＆バージョン確認

node -v

Gitのインストール＆バージョン確認

git --version

Homebrewのインストール＆バージョン確認（Macの場合）

brew -v

Bundlerのインストール＆バージョン確認（Windowsの場合）

bundle -v

インストール要件を満たしていることが確認できましたら、アップグレードを行います。

Shopify CLI 2.xをapt,Yam,RubyGemsでインストールしている場合

「apt」「Yam」「RubyGems」でShopify CLI 2.xをインストールしていた場合には、始めにアンインストールから行います。

ターミナルまたはコマンドプロンプトで以下のコマンドを入力し、Enterを押下します。

aptの場合

sudo apt remove shopify-cli

Yamの場合

sudo yum remove shopify-cli

RubyGemsの場合

gem uninstall shopify-cli

Shopify CLI 2.xをHomebrewでインストールしている場合

HomebrewでShopify CLI 2.xをインストールしていた場合、アンインストール不要でバージョンアップが可能です。ただし、Homebrewのバージョンが古い場合、アップグレードが必要な時があります。その場合には、「Homebrewのインストール」の項を参照してください。

Shopify CLIのアップグレート方法（Mac）

Shopify CLI 3.xのインストール要件が揃っている状態で、以下のコマンドをターミナルに入力します。

brew upgrade shopify-cli

アップグレードが行われたら、以下のコマンドでバージョン確認をします。

shopify version

Homebrewでアップグレードをしてもうまく動作しない場合、以前のバージョンのキャッシュをクリアすることで、正常に動作する場合があります。以下のコマンドを実行してから、再度バージョンを確認してみてください。

brew cleanup

Shopify CLIのアップグレート方法（Windows）

npmを使用してインストールをします。コマンドプロンプトに以下のコマンドを入力します。（npmは、Node.jsのパッケージ管理システムです。）

 npm install -g @shopify/cli @shopify/theme

インストールしたら、以下のコマンドでバージョン確認をします。

shopify version

Mac版｜Shopify CLIインストール手順

MacにおけるShopify CLI 3.xのインストール手順を解説します。

インストール要件は以下の通りです。

Homebrew
Ruby
Node.js バージョン18以上
Git

Homebrewのインストール

Homebrewは、Mac端末にソフトウェアを簡単にインストールできるパッケージ管理システムです。Shopify CLIのインストールだけでなく、その他のツールのインストールにも必要になるため、初めにインストールしましょう。

まずはHomebrewがインストールされているかを確認します。以下のコマンドをターミナルに入力します。

brew -v

バージョンが表示された場合には、インストール済みです。念のため、アップデートを行います。

brew update

かなり古い場合には、アップグレードの指示が表示されますので、指示に従ってアップグレードを行います。

brew upgrade

Homebrewのインストールやアップグレードには、Xcode Command Line Toolsが必要です。以下のコマンドを実行します。

xcode-select --install

Homebrewが端末のインストールされていない場合には、以下のコマンドでインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

無事にインストールまたはアップグレードされたか、以下のコマンドで確認します。

brew -v

2024年2月時点の最新バージョンは、4.2.9です。

Rubyのバージョンアップ

Rubyとは、プログラミング言語とその実行環境のことです。Shopify CLIの一部はRubyで記述されているため、Rubyの実行環境が必要です。

Mac端末にはデフォルトでRubyがインストールされていますが、通常は古いバージョンです。そのため、バージョンアップを行います。

バージョンアップ方法は以下の通りです。

Homebrewでアップグレードをする
rbenvなどのバージョン管理ツールで特定のバージョンをインストールする

この記事ではHomebrewでアップグレードをする方法を紹介します。他のプロジェクトでもRubyを使っていて、バージョン管理をしたい方は、バージョン管理ツールを用いたバージョンアップを検討してください。

以下のコマンドを実行します。

brew upgrade ruby

2024年2月時点の最新バージョンは、3.3.0です。

Node.jsのインストール

Node.jsとは、JavaScriptをサーバーサイドで実行するためのプラットフォームのことです。Shopify CLIの一部はJavaScriptで記述されており、その実行にNode.jsが必要です。

Node.jsのインストールを確認します。Homebrewのアップグレード時に、インストールされているパッケージによっては、Node.jsが自動的にインストールされることがあります。

node -v

要件以上のバージョンが表示されたら、このステップは飛ばしてください。

まずHomebrewを使用して、nodebrew（Node.jsのバージョン管理ツール）をインストールします。

brew install nodebrew

次にセットアップのコマンドを入力します。

nodebrew setup

PATHの情報が出力されますので、コマンドに入力します。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc

次に以下のコマンドを入力します。

source ~/.zshrc

続いて以下のコマンドを入力します。

nodebrew ls-remote

様々なバージョンが表示されます。おすすめはバグなどが少ない安定版です。以下のコマンドを入力します。（特定のバージョンを選んでインストールすることや、最新版をインストールすることも可能です。）

nodebrew install stable

正常にインストールされているか、以下のコマンドで確認します。

nodebrew list

正常にインストールされていたら、有効化します。

nodebrew use vx.x.x(表示されているバージョンをコピー&ペースト)

Node.jsのバージョンを確認します。表示されたら、インストール完了です。

node -v

2024年2月時点の最新バージョンは、21.6.2です。バージョンは18以上であれば問題ありません。

Gitのインストール

Gitは、ソースコードのバージョン管理システムです。Gitをインストールすることで、Shopify CLIの最新バージョンをダウンロードしたり、アップデートしたりすることができます。

ターミナルに以下のコマンドを入力し、インストールされているか確認します。

git --version

Gitがインストールされていない場合や、バージョンの後ろに「(Apple Git-xxx.x)」と表示される場合には、Homebrewを使用して、最新版のGitをインストールしましょう。

brew install git

次にPATHを通します。

export PATH="/opt/homebrew/bin:$PATH"

一度ターミナルを終了し、再起動します。Gitのバージョン確認をし、最新版が表示されれば完了です。

git --version

2024年2月時点の最新バージョンは、2.39.1です。

Shopify CLIのインストール

インストール要件をそろえたら、Shopify CLI 3.xをインストールします。

まず、以下のコマンドを入力します。

brew tap shopify/shopify

次に以下のコマンドでインストールをします。

brew install shopify-cli

最後に以下のコマンドでバージョンを確認します。

shopify version

Shopify CLIのバージョン情報が表示されましたら、インストール完了です。お疲れ様でした。

2024年2月時点の最新バージョンは、3.56.3です。

Windows版｜Shopify CLIインストール手順

WindowsにおけるShopify CLI 3.xのインストール手順を解説します。

インストール要件は以下の通りです。

Ruby+Devkit 3.0
MSYS2コンポーネントとMSYS2ベースインストールオプションを選択
Node.js バージョン18以上
Git
Bundler バージョン2.3.8以上

Rubyのインストール

Rubyとは、プログラミング言語とその実行環境のことです。Shopify CLIの一部はRubyで記述されているため、Rubyの実行環境が必要です。

Rubyがインストールされているか、コマンドプロンプトで以下のコマンドを実行して確認をします。

ruby -v

Rubyがインストールされている場合には、バージョン情報が表示されます。

Rubyがインストールされていない場合、「’ruby’ は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。」と表示されます。

Rubyのバージョンが古い、またはインストールされていない場合には、Rubyをインストール（バージョンアップ）を行ってください。

RubyInstallerにアクセスします。このページでインストーラーをダウンロードしますが、インストーラーにはx86版とx64版があります。利用端末が32ビットの場合にはx86版を、利用端末が64ビットの場合にはx64版をダウンロードします。

参考画面で紹介するのは、x64版です。

「=> Ruby+Devkit 3.2.3-1 (x64)」をクリックしてインストーラーをダウンロードします。（バージョンが更新されている場合、「=>」が表記されている最新バージョンを選択してください。）

インストーラーを実行すると、ウィンドウが開きます。「I accept the license」にチェックをして、「Next」をクリックします。再度「Next」をクリックすると、インストールが始まります。

以下の赤枠にチェックがあることを確認し、「Finish」をクリックします。

以下のようなセットアップ画面が表示されます。1〜3全てインストールしますので、「1」を入力してEnterを押下。「2」を入力してEnterを押下。「3」を入力してEnterを押下していきます。

すべて実行したら、コマンドプロンプトを起動し、バージョンの確認をしましょう。

ruby -v

ruby x.x.x（選択したインストーラーのバージョン）と表示されたら、インストール完了です。

Gitのインストール

インストーラーのダウンロードサイトにアクセスし、画面の「Download」をクリックします。

インストーラーを実行すると、セットアップウィザードが起動します。

基本的には「Next」を選択していくだけで問題ありません。最後に「Install」をクリックするとインストールを開始します。

以下の画面が表示されたら、インストール完了です。「Finish」をクリックします。

コマンドプロンプトを再起動し、以下のコマンドを入力します。Gitのバージョンが表示されたら、インストール完了です。

git --version

Node.jsのインストール

Node.jsは、JavaScriptをサーバーサイドで実行するためのプラットフォームのことです。Shopify CLIの一部はJavaScriptで記述されており、その実行にNode.jsが必要です。

Node.jsのサイトにアクセスします。

画面の緑色の箇所をクリックするとインストーラーをダウンロードできます。迷ったら、左の推奨版をダウンロードしてください。

インストーラーを実行すると、セットアップウィザードが表示されます。表示される順番に「Next」をクリックしていき、「Install」をクリックします。

インストールが完了すると以下のような画面が表示されます。指示にしたがって、進めてください。

関連ツールのインストールが完了したら、以下の画面のように表示されます。

以下のコマンドを実行して、バージョンが表示されたら、インストール完了です。

node -v

2024年2月時点の最新バージョンは、21.6.2です。推奨版は20.11.1です。バージョンは18以上であれば問題ありません。

Bundlerのインストール

Bundlerは、Rubyのパッケージ管理ツールです。

コマンドプロンプトで以下のコマンドを実行します。

gem install bundler

インストールされたら、以下のコマンドを実行し、正しくインストールされたか確認しましょう。

bundle -v

バージョンが表示されたら、インストール完了です。

2024年2月時点の最新バージョンは、2.5.6です。

Shopify CLIのインストール

インストール要件をそろえたら、Shopify CLI 3.xをインストールします。

コマンドプロンプトに以下のコマンドを入力します。

 npm install -g @shopify/cli @shopify/theme

インストールが完了したら、以下のコマンドでバージョンを確認します。

shopify version

Shopify CLIのバージョン情報が表示されましたら、インストール完了です。お疲れ様でした。

2024年2月時点の最新バージョンは、3.56.3です。

Shopify CLI 3.xの使い方

Shopify CLI 3.xの代表的な使い方を紹介します。解説画面は、Mac端末でVS Codeを使用しています。

ストアに接続し、ローカルにテーマファイルをダウンロードする

Shopifyストアから、テーマファイルをローカルにダウンロードする方法を紹介します。この方法を活用することで、管理画面にあるテーマファイルをローカル環境で開発することが可能です。

Shopifyのテーマファイルをダウンロードするフォルダを作成しておきます。ターミナルは作成したフォルダに移動しておきます。

以下のコマンドでShopifyのストアに接続し、テーマをダウンロードします。

shopify theme pull --store xxxxx(自身のストア名)

xxxxxの箇所には、ストア名を入力します。（ストアの管理画面の「https://admin.shopify.com/store/xxxxx」の「xxxxx」の箇所）

なお、この「–store xxxxx」を使用してストアに接続した後は、異なるストアに接続するまで、他のコマンドでは記述が不要です。例えば、再度テーマをダウンロードする際には、「shopify theme pull」だけでダウンロード可能です。

ブラウザでログイン確認をします。

ログインに成功すると以下のような画面が表示されます。こちらは閉じて構いません。

ターミナルでダウンロードしたいテーマを選択すると、ダウンロードが開始されます。

「Theme pulled successfully.」と表示されれば、ダウンロード完了です。

フォルダを確認するとテーマのファイルがダウンロードされていることが確認できます。

これでローカル環境で開発ができるようになりました。

ローカルのファイルを、テーマに反映する

次にローカルで開発したテーマファイルを、ストアにアップロードする方法を紹介します。

ローカルでテーマに変更を加えます。テーマテンプレート「theme.liquid」のbody直下に「<div>Hello World!!</div>」を追加しました。

この変更をストアのテーマに反映します。

ディレクトリが反映したいテーマファイルのフォルダであることを確認し、ターミナルで以下のコマンドを入力します。

shopify theme push

アップロード（上書き）するテーマを選択します。

「Your theme was pushed successfully」が表示されたら、ストアの該当テーマのプレビューを確認してみます。

画面に「Hello World!!」が表示されました。

このように、ローカルで開発したテーマファイルを、ストアに簡単にアップロードできます。

即時反映（ホットリロード）で確認しながら開発する

毎回ローカルにテーマファイルをダウンロードしたり、確認のために都度アップロードしたりするのは面倒です。

そこでローカルで開発した内容を、ストア画面に即時反映（ホットリロード）する方法を紹介します。

即時反映すると言っても、既存のテーマファイルを都度更新しているわけではありません。「開発テーマ」と呼ばれる一時的な仮想テーマを作り出し、そのテーマに反映しているだけですので、ご安心ください。

ディレクトリが開発中のテーマファイルのフォルダであることを確認し、ターミナルで以下のコマンドを入力します。

shopify theme dev

「success」の表示とともに以下の項目が表示されます。

「Synced」は、同期していることを意味します。

表示される３つのリンクの意味は、以下の通りです。

　http://xxx：ページのプレビュー用URL
　Customize your theme at the theme editor：Shopify管理画面のテーマエディタへのリンク
　Share your theme preview：他の開発者と共有用のリンク

「http://xxx」のURLをクリックすると、プレビュー画面を確認できます。ストアのパスワードを入力します。

ストアのパスワードは、「管理画面」 > 「オンラインストア」 > 「各種設定」 > 「パスワード保護」に記載されている「パスワード」です。

パスワードを入力することで、開発テーマをブラウザで確認できます。

「Customize your theme at the theme editor」をクリックすると、カスタマイズ画面を確認できます。こちらでセクションなどを変更することも可能です。

試しにローカル環境で変更を加えてみましょう。

body直下に「<div>Hello Japan!!</div>」を追加しました。

先ほど表示したカスタマイズ画面のページを更新します。追加した内容が反映されていました。

同期を停止したい時には、「control」+「c」をクリックします。

繰り返しになりますが、現段階ではストアのテーマファイルは更新されていません。あくまで開発テーマのプレビュー画面とカスタマイズ画面における反映のみです。

実際のストアのテーマファイルを更新したい場合には、前項で紹介した「ローカルのファイルを、テーマに反映する」を行なってください。

接続しているストアからログアウトする

最後に接続しているストアからログアウトする方法です。

以下のコマンドをターミナルに入力します。

shopify auth logout

これでログアウトします。

その他のコマンドについては、ヘルプコマンドで確認できます。

shopify theme --help

Shopify CLIを活用して、開発業務を効率化しよう！

この記事では、Shopify CLIのインストール方法から、使い方、バージョンアップまでを詳細に解説しました。

Shopify CLIを活用することで、オリジナルテーマやアプリの開発業務が大幅に効率化されることでしょう。またストアのテーマを更新する前に、仮想の開発テーマ画面で確認できるため、ミスも減らすことが可能です。

開発を行う方は、このShopify CLIをぜひ活用してみてください。

Shopify CLI活用ガイド

Shopify CLIとは？活用するメリット

Shopify CLIのインストール要件

Shopify CLI 2.xから3.xへのアップグレード方法

Shopify CLI 3.xと2.xの違い

利用バージョンの確認方法

アップグレード手順

アップグレード要件の確認

Shopify CLI 2.xをapt,Yam,RubyGemsでインストールしている場合

Shopify CLI 2.xをHomebrewでインストールしている場合

Shopify CLIのアップグレート方法（Mac）

Shopify CLIのアップグレート方法（Windows）

Mac版｜Shopify CLIインストール手順

Homebrewのインストール

Rubyのバージョンアップ

Node.jsのインストール

Gitのインストール

Shopify CLIのインストール

Windows版｜Shopify CLIインストール手順

Rubyのインストール

Gitのインストール

Node.jsのインストール

Bundlerのインストール

Shopify CLIのインストール

Shopify CLI 3.xの使い方

ストアに接続し、ローカルにテーマファイルをダウンロードする

ローカルのファイルを、テーマに反映する

即時反映（ホットリロード）で確認しながら開発する

接続しているストアからログアウトする

Shopify CLIを活用して、開発業務を効率化しよう！

株式会社プレイビット