Shopifyのテーマをより自由に効率よくカスタマイズするために欠かせないのが「Shopify CLI」です。
本記事ではShopify CLIを使ったローカル開発環境を構築し、実際にテーマのカスタマイズを試してみましので環境構築の手順と、進める中で得られた気づきやポイントをまとめています。初めてCLIを使ってみたい方の参考になれば嬉しいです。
Shopify CLIを使うために必要なもの
まずはCLIを動かすための基本的な開発環境を整える必要があります。
Shopify CLIはターミナル上で動作するため、Node.jsとGitがローカル環境にインストールされていることが前提となります。
Node.jsとGitがすでにインストールされているかどうかは、以下のコマンドで確認できます：
node -v git -vShopify CLIのインストール手順
準備が整ったら、次はShopify CLIをインストールします。私はnpmを使ってインストールしました。
npm install -g @shopify/cli@latestインストールが完了したら、バージョンを確認して正しく導入できているかチェックします：
shopify versionここまでできたら、いよいよローカルでShopifyテーマに接続できます。
テーマをローカルで開く
Shopify CLIでは自分のShopifyストアとローカル環境を連携させることができます。これによりコードの変更をリアルタイムにプレビューしながら作業できます。
開発用テーマとして立ち上げる流れ：
Shopifyの公式ドキュメント Getting started with theme customization に沿って、CLIを用いた開発環境を構築しました。以下のようなステップで、既存テーマのカスタマイズとプレビュー、反映までを行うことができます。
1.既存テーマのコードをダウンロード
コマンドラインで以下を実行します：
shopify theme pull --store {store-name}この操作を行うとShopifyへのログインを求められます。ログイン後、ダウンロードしたいテーマを選択してローカルに取得します。
2.テーマのカスタマイズ
取得したテーマフォルダ内でファイルを編集します。例えばセクションの追加や文言変更など、自由にカスタマイズが可能です。
3.変更内容のプレビュー
次のコマンドで、ローカル開発サーバーを立ち上げ、リアルタイムで変更を確認できます：
shopify theme dev4.変更の反映（プッシュ）
内容に問題がなければ、以下のコマンドで本番テーマに反映できます：
shopify theme pushCLIを使うことで、Shopifyの管理画面を開かずにテーマ開発を進められるため、スピーディかつ柔軟に作業ができるのが大きな利点です。
補足：テーマを公開状態にする場合
ひとつ前のステップの変更の反映（プッシュ）はテーマをストアにアップロードする操作であり、実際にそのテーマを公開状態にするには、さらに shopify theme publish コマンドが必要です。
shopify theme publish
使われているテンプレートの確認テスト
開発環境が整ったあとは、layout>theme.liquidファイルに簡単なコードを追加して、今表示しているページがどのテンプレートを使っているのかを出力するテストも行ってみました。
使用したコード：
{{ template.name }}
このように、Shopify CLIを使うとファイル操作や実装確認が格段にやりやすくなります。
おわりに
この記事ではShopify CLIを使って既存テーマをローカルにダウンロード、カスタマイズ、開発中の変更を即時プレビュー、最終的にストアに反映・公開するまでの一連の流れをご紹介しました。
CLIを活用することでGUIベースの編集よりも柔軟で開発者向きなワークフローが実現できるのが大きな魅力です。
この一連の操作（theme pull → カスタマイズ → theme dev → theme push → theme publish）をわかりやすく解説している公式YouTube動画もありましたので、併せて参考にすることでよりスムーズに理解が進むはずです。
