Shopify のテーマ開発環境はここ数年で大きく変わりました。Slate に始まり、Theme Kit そして現在（2023/10）では Shopify CLI が公式の推奨環境となっています。
本記事では Shopify CLI をベースに TypeScript や SCSS を利用したより効率的でモダンな Shopify テーマ開発環境を紹介します。リポジトリをテンプレート化しているのでご自身の環境で簡単にセットアップしてもらえます。
今回、Shopify テーマ開発用の環境を 2 つ用意しています。
shopify-quick-themeはスクラッチでテーマを開発したり、開発者が複数いない場合、テーマ構成フォルダーと開発ファイルを分離して開発したい場合にオススメのテンプレートです。
一方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以上
利用方法
shopify-quick-theme もしくはshopify-quick-theme-mixのリポジトリでUse this templateをクリックすると開発環境をコピーできます。
上記の作業で準備したリポジトリをクローンしてください。
YOUR-USERNAME と YOUR-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 コマンドで確認ができます。
パッケージのインストール
以下コマンドで利用パッケージをインストールしてください。以降の解説では pnpm の利用を前提としています。npm をご利用の場合は読み替えてコマンドを実行してください。
pnpm install
新規テーマ作成の場合
一からテーマを作成する場合は以下のコマンドを実行すると簡単に初期ファイルを準備できます。
自動でDawnの複製がshopifyフォルダーに作成されます。
pnpm newTheme
既存テーマをカスタマイズする場合
次のコマンドでストアに用意されている既存テーマをローカル環境へ反映できます。
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
オススメのコマンド
さまざまな便利コマンドが開発テンプレートに用意されています。詳細は README で確認してください。
Cheat コマンド
Liquid のチートシートを表示するコマンドです。開発時に実行して展開しておくと便利です。
pnpm cheat
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
テスト方法の詳細は各テストランナーのドキュメントを確認してください。
GitHub integration
Shopify GitHub integration を利用する場合はいくつか制約があります。とくにフォルダー構成には注意が必要で、以下のように Shopify が定めるフォルダー構成を担保していなければなりません。
.
├── assets
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
└── customers
shopify-quick-themeは意図的にテーマ構成フォルダーと開発ファイルを分離しやすい構成にしているため、直接 GitHub integration で Shopify ストアと接続することができません。その場合、git subtreeなどでアウトプットディレクトリを別リポジトリへ切り出して運用する必要があります。
もし GitHub integration の利用を前提としている場合はshopify-quick-theme-mixの使用をオススメします。shopify-quick-theme-mixは開発ファイルと既存テーマファイルが同一ディレクトリ上で混在してしまうデメリットと引き換えに GitHub integration が標準で利用できます。
まとめ
shopify-quick-theme ではテーマ構成フォルダーと開発ファイルを分離して開発できます。そうすることでテーマが本来持つファイルと開発者が手を加えたファイルのスコープを明確にできます。一方、shopify-quick-theme-mixには Shopify ストアとの GitHub 連携が容易に行えるメリットがあります。
それぞれテーマ開発する上で便利な仕組みを盛り込んだつもりですので、ぜひ用途に合わせて活用してみてください。
これらテンプレートを使ってみてもし開発の一助になれば「サポート」いただけると幸いです。
「サポート」いただけるとメンテナンスや機能アップデートの励みになります。🙏
Discussion