🚀

Shopifyテーマ開発用スターターテンプレートを作ってみた

2022/03/14に公開

Shopify のテーマ開発環境はここ数年で大きく変わりました。Slate に始まり、Theme Kit そして現在(2023/10)では Shopify CLI が公式の推奨環境となっています。

本記事では Shopify CLI をベースに TypeScript や SCSS を利用したより効率的でモダンな Shopify テーマ開発環境を紹介します。リポジトリをテンプレート化しているのでご自身の環境で簡単にセットアップしてもらえます。

今回、Shopify テーマ開発用の環境を 2 つ用意しています。
shopify-quick-themeはスクラッチでテーマを開発したり、開発者が複数いない場合、テーマ構成フォルダーと開発ファイルを分離して開発したい場合にオススメのテンプレートです。

一方shopify-quick-theme-mixはチーム開発を前提としている場合や運用でコンテンツの更新が頻繁に行われるケースにオススメのテンプレートです。

https://github.com/Kazuki-tam/shopify-quick-theme
https://github.com/Kazuki-tam/shopify-quick-theme-mix

テンプレートの主な特徴

既存テーマのカスタマイズからスクラッチでのテーマ開発まで幅広いシーンで活用いただけます。

  • Shopify CLI コマンドのショートハンドが用意されている
  • Rspack ベースの開発環境
  • SCSS の利用環境のが用意されている
  • TypeScript の利用環境のが用意されている
  • ESlint を利用した TypeScript の静的解析、補正
  • Stylelint を利用した SCSS の静的解析、補正
  • テストランナーの標準搭載(Jest、Playwright)

ご利用条件

ローカル環境を以下にあわせてください。Node.js や Shopify CLI は指定以外のバージョンに関して動作保証できません。特に Shopify CLI はバージョン毎に利用できるコマンドやコマンド名が異なるため、ご注意ください。

  • Node.js v18以上
  • Shopify CLI v3以上

https://shopify.dev/themes/tools/cli/installation
https://shopify.dev/themes/tools/cli/upgrade-uninstall

利用方法

shopify-quick-theme もしくはshopify-quick-theme-mixのリポジトリでUse this templateをクリックすると開発環境をコピーできます。

テンプレートのコピー

上記の作業で準備したリポジトリをクローンしてください。
YOUR-USERNAMEYOUR-REPOSITORY は書き換える必要があります。

git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

環境変数の設定

ルート ディレクトリに .env ファイルを作成し、SHOPIFY_FLAG_STORE 値を追加します。
YOUR_STORE_NAME を接続先のストア名(YOUR_STORE_NAME.myshopify.com)に置き換えます。

SHOPIFY_FLAG_STORE=YOUR_STORE_NAME

利用している接続済みのストア名は shopify theme info コマンドで確認ができます。

https://shopify.dev/docs/themes/tools/cli#connecting-to-a-store

パッケージのインストール

以下コマンドで利用パッケージをインストールしてください。以降の解説では pnpm の利用を前提としています。npm をご利用の場合は読み替えてコマンドを実行してください。

pnpm install

新規テーマ作成の場合

一からテーマを作成する場合は以下のコマンドを実行すると簡単に初期ファイルを準備できます。
自動でDawnの複製がshopifyフォルダーに作成されます。

pnpm newTheme

https://github.com/Shopify/dawn
https://themes.shopify.com/themes/dawn/styles/default?locale=ja&utm_campaign=2021-08-dawn-launch&utm_content=pr&utm_medium=web&utm_source=homepage&utm_term=ne

既存テーマをカスタマイズする場合

次のコマンドでストアに用意されている既存テーマをローカル環境へ反映できます。

pnpm pull:new

E2E テストを実施する場合

E2E テストを実施する場合は以下コマンドでサポートブラウザーをインストールしてください。

pnpm e2e:install

またプロジェクトルートに.envファイルを作成してください。記載内容は.env.exampleを参照いただけます。

利用しない場合は上記設定を行う必要はありません。

必要ファイルの読み込み

以下コマンドで初期ビルドをかけてファイルを生成します。

pnpm build

テーマのヘッドタグ内で生成されたファイルを読み込みます。ファイル名などは必要に応じて変更してください。

{{ 'custom-style.css' | asset_url | stylesheet_tag }}
<script src="{{ 'custom-script.js' | asset_url }}" defer></script>

開発スタート

開発を始める際には以下コマンドを実行してください。ファイル変更時にホットリロードがかかります。

pnpm dev

コマンド起動時に以下開発用 URL が発行されます。

http://127.0.0.1:9292

https://shopify.dev/themes/tools/cli/commands#dev

オススメのコマンド

さまざまな便利コマンドが開発テンプレートに用意されています。詳細は README で確認してください。

https://github.com/Kazuki-tam/shopify-quick-theme#available-commands

Cheat コマンド

Liquid のチートシートを表示するコマンドです。開発時に実行して展開しておくと便利です。

pnpm cheat

https://www.shopify.com/partners/shopify-cheat-sheet

Pull コマンド

カスタマイズ画面で操作した内容やアプリによって生成されたファイルの変更内容などを取り込む際に利用できます。

pnpm pull

Deploy コマンド

開発したテーマの内容をストア環境へデプロイする際にオススメのコマンドです。ファイルのビルドとアップロードを同時に実行できます。

pnpm deploy

Lint コマンド

コードの静的解析を行うコマンドです。定期的に実行しておくことでプロジェクト内のコード品質を一定に保つことができます。

pnpm lint

PostInstall コマンド

不足する型定義パッケージを自動追加するコマンドです。

pnpm postInstall

Test コマンド

ユニットテストと E2E テストを実行するコマンドです。ユニットテストでは Jest を採用し、E2E テストでは Playwright を採用しています。

pnpm test

ユニットテストだけを行う場合は以下コマンドが利用できます。再利用性の高い Utility 関数ではユニットテストの作成をオススメします。

pnpm unit
pnpm unit:watch

E2E テストだけを行う場合は以下のコマンドが利用できます。

pnpm e2e

ブラウザも実際に立ち上げる場合は次のコマンドが利用できます。

pnpm e2e:headed

以下コマンドでテストコードを自動生成することもできます。

pnpm e2e:codegen

テスト方法の詳細は各テストランナーのドキュメントを確認してください。

https://jestjs.io/docs/getting-started
https://playwright.dev/docs/intro

GitHub integration

Shopify GitHub integration を利用する場合はいくつか制約があります。とくにフォルダー構成には注意が必要で、以下のように Shopify が定めるフォルダー構成を担保していなければなりません。

.
├── assets
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
    └── customers

https://shopify.dev/themes/tools/github#limitations

shopify-quick-themeは意図的にテーマ構成フォルダーと開発ファイルを分離しやすい構成にしているため、直接 GitHub integration で Shopify ストアと接続することができません。その場合、git subtreeなどでアウトプットディレクトリを別リポジトリへ切り出して運用する必要があります。

https://shopify.dev/themes/best-practices/version-control#separate-source-code-and-compiled-code-using-branches-recommended

もし GitHub integration の利用を前提としている場合はshopify-quick-theme-mixの使用をオススメします。shopify-quick-theme-mixは開発ファイルと既存テーマファイルが同一ディレクトリ上で混在してしまうデメリットと引き換えに GitHub integration が標準で利用できます。

https://github.com/Kazuki-tam/shopify-quick-theme-mix

まとめ

shopify-quick-theme ではテーマ構成フォルダーと開発ファイルを分離して開発できます。そうすることでテーマが本来持つファイルと開発者が手を加えたファイルのスコープを明確にできます。一方、shopify-quick-theme-mixには Shopify ストアとの GitHub 連携が容易に行えるメリットがあります。

それぞれテーマ開発する上で便利な仕組みを盛り込んだつもりですので、ぜひ用途に合わせて活用してみてください。

これらテンプレートを使ってみてもし開発の一助になれば「サポート」いただけると幸いです。
「サポート」いただけるとメンテナンスや機能アップデートの励みになります。🙏

TAM

Discussion