【Shopify開発が捗る!】ShopifyCLI開発環境構築の流れをご紹介|コーディング、Web開発の外注、代行ならコーディングアライブ

blog

ブログ
  • HOME
  • ブログ
  • 【Shopify開発が捗る!】ShopifyCLI開発環境構築の流れをご紹介

【Shopify開発が捗る!】ShopifyCLI開発環境構築の流れをご紹介

Writer

Fernando Souza

Web Developer

Olá!
アライブテックチームエンジニアのフェルナンドです。
アライブでは最近、Shopifyで構築するECサイトの制作案件が増えてきました。
そこで、備忘録も兼ねてShopifyの開発環境の構築方法をご紹介します!

Shopify CLIとは?

そもそもCLIとは

CLIは「Command Line Interface」の略です。
CLIは、テキスト入力を受け付けてオペレーティングシステムの機能を実行するコマンドラインプログラムです。
かつて、これがコンピュータと対話する唯一の方法でした。
1970年代と1980年代には、コマンドライン入力はUnixシステムやMS-DOS、Apple DOSなどのPCシステムで一般的に使用されていました。

 
◾︎合わせて読みたいECカートシステム関連記事

Shopify CLIとは

Shopify CLIは、Shopifyアプリやテーマを構築するのに役立つコマンドラインインターフェースツールです。これを使用すると、Shopifyアプリ、テーマ、およびカスタムストアフロントを迅速に生成できます。また、多くの一般的な開発タスクを自動化するためにも使用できます。
Shopify CLIは、ほとんどのShopifyテーマ開発タスクにおいてTheme Kitの代わりになります。
Online Store 2.0テーマで作業している場合は、Shopify CLIを使用することをお勧めします。古いテーマで作業している場合のみ、Shopify CLIの代わりにTheme Kitを使用しましょう。
開発テーマは、開発に使用しているShopifyストアに接続された一時的で未公開のテーマです。そのテーマを開発用のテーマとしてストアに接続すると、そのストアのデータをローカルでテストに使用できます。

 

Shopify CLIでできること

  1. ローカルで開発テーマを使用して、テーマの変更を安全にプレビュー、テスト、共有
    – Shopifyストアにリンクされた開発テーマを作成して使用できるようにし、変更を公開する前にプレビューやテストを行えるようにします。
  2. CSSおよびセクションの変更をホットリロードしたり、テーマをプレビューする際にファイルが変更されたときにページを自動的にリフレッシュ
    – ホットリロードをサポートし、CSSやセクションの変更が手動でリフレッシュせずに即座に反映されます。ファイルが変更されたときにページが自動的にリフレッシュされることもあります。
  3. Dawnを出発点として新しいテーマを初期化
    – Shopify参照テーマのDawnを基にした新しいテーマを開始できるようにします。これにより、カスタムテーマの構築の堅実な基盤が提供されます。
  4. コマンドラインからテーマをプッシュおよび公開
    – テーマの変更を関連するShopifyストアにプッシュし、テーマを公開するコマンドを提供します。これにより、デプロイプロセスが簡素化されます。
  5. ローカルに構築した開発環境を使用して複数のテーマで作業
    – 開発環境の概念をサポートし、異なる目的やクライアント用に異なるテーマで作業することができます。
  6. テーマでTheme Checkを実行してエラーを検出
    – Theme Checkと統合されており、テーマコードの潜在的な問題やエラーを特定するのに役立つツールです。CLIを使用してTheme Checkを実行することで、コードの品質を維持し、Shopifyのベストプラクティスに準拠できます。
要するに、Shopify CLIは、コマンドラインからShopifyテーマのプレビュー、テスト、デプロイ、および品質の維持に関するツールを提供することで、テーマ開発の効率を向上させています
Shopifyでは非推奨のSassをテンプレートに統合し、CSSをassetsフォルダにコンパイルすることも可能です。
現在、Shopify CLIはGitのようなバージョン管理を行うことはできませんので、複数の人と協力して作業する際には注意が必要です。プロジェクトをGitで管理することを強くお勧めします。

 

Shopify CLI環境構築の流れ

CLIのインストール

0-コマンドラインで下記コマンドを入力

macOS

brew tap shopify/shopify

brew install shopify-cli
Windows and Linux
npm install -g @shopify/cli @shopify/theme

 

CLIを起動する

1-目的のディレクトリに移動しコマンドを実行

shopify theme init
ターミナルでテーマ名を書いて、ディレクトが作成されます。

2-CLIを起動します

作成したshopifyテーマディレクトリの中で(「cd 新テーマディレクトリ」を実行)
shopify theme dev --store {store-name}
※{store} = URLに表示されるストアの名前
例: shopify theme dev --store=mystore
これでCLIを起動すると、ローカル環境でブラウザからストアが見られるようになります。

成功すると、このような表示が出ます。

「Preview your theme」の下にあるurlからブラウザーを開き、確認してみましょう。
ファイルを編集すれば、ブラウザの表示が更新内容に合わせて切り替わります。
ちなみに、ストアのデータ(バックエンド)は全部shopifyのサーバにあります。

3-テーマのアップロード

shopify theme push
ローカルのテーマを公開したくない場合は:
shopify theme push --unpublished

4-テーマを公開する

shopify theme publish
これでテーマがストアに公開されます。

 

既存のストアに接続する場合

プロジェクト内にテーマフォルダを作成します。
shopify theme dev --store={store}

shopify theme pull
他のストアの開発を行う場合は、現在のストアからログアウトする以下のCLIコマンドを必ず実行しましょう。
shopify auth logout
その後に他のストアにログインしてください
shopify theme dev --store={store}
その他のCLIコマンドについてはこちらをご覧ください。

 

まとめ

Shopify CLIで開発環境を構築すると、Shopifyサイトの開発が大幅に効率的になります。
ぜひ試してみてください。
Shopify開発に関してお困りごとがございましたら、お気軽にアライブまでご相談ください!

 

◾︎合わせて読みたいShopify関連記事