Shopifyのテーマ開発用テンプレートを公開しました

更新

テンプレートについて

ダウンロードはこちら

GitHub

概要

Shopifyのテーマ開発用テンプレートです。以下の機能により快適な開発体験を提供します。

  • TypeScript、CSSのコンパイル環境
  • 各種リンターによるエラーの即時指摘
  • ファイル保存時の自動フォーマット
  • commit前のファイルのリント、フォーマット、エラーの検知
  • Github Actionsによる開発支援

補足

テンプレートについて補足します。

テンプレートの使用に必要なもの

使用するには以下のものが必要です。

  • Node.js

このテンプレートではNode.jsのバージョン管理にVoltaを使用していますが、お好みで変更してもらっても問題ありません。

ディレクトリ構造について

テンプレート中のassets、config、layout、locales、sections、snippets、templatesはテーマを構成するディレクトリです。GitHub上でディレクトリ構造を維持するため、.gitkeepを入れています。

コンパイル前のTSやCSSはsrcに格納します。

.githubと.vscodeはそれぞれGithub ActionsとVSCodeの設定ファイルの設置場所です。

その他のファイルはツールのコンフィグファイルやignoreファイルです。

開発の方法

Shopifyテーマはイチから自作できますが、Shopifyは公式テーマ「Dawn」を元にテーマ開発することを推奨しています。よって、新規でテーマを開発する場合は一旦Dawnテーマのファイルをテンプレート内に追加してから開発を開始するのがおすすめです。

shopify theme initコマンドを叩くと、カレントディレクトリ以下に適当な名前のディレクトリが作成され、そこにDawnテーマがクローンされます。

以下のようなフローで開発を開始するとスムーズです。

  1. npm iでパッケージをインストール
  2. テンプレートのルートでshopify theme initコマンドを実行
  3. 新規作成されたディレクトリにあるDawnテーマのassets、config、layout、locales、sections、snippets、templatesをルートに移動
  4. 2で作成されたディレクトリ内の他のファイルは不要なのでディレクトリごと削除
  5. .envファイルを使う場合は.env.exampleを.envにリネーム
  6. 開発開始

開発を開始するときは、npm startコマンドでTS・CSSのコンパイル環境を、npm run theme-devコマンドでShopifyテーマの開発サーバーを立ち上げることができます。

ツールのコンフィグ

Shopifyはweb-configsというモノレポで各種ツールの公式コンフィグを提供しており、このテンプレートではそれらを利用しています。

ドキュメントを読む限り、このコンフィグはテーマ開発ではなくShopifyアプリ（WordPressでいうプラグインのようなもの）の開発用であるようです。が、テーマ開発でも使えそうだったので使っています。

ほぼこのコンフィグをデフォルトのまま使っているだけですが、一部カスタマイズしています。お好みで変更してください。

ビルドツール

TSのビルドにはBabelを、CSSのトランスパイルにはPostCSSを使っています。

これらを採用しているのに特に理由はなく、上記のweb-configsにBabelとPostCSSのコンフィグが同梱されていたので使っているだけです。なので使いたいものがあればそれを使えばよいと思います。

Prettier

web-configsにはPrettierの設定であるprettier-configも含まれていますが、これにはLiquidをフォーマットするための設定が含まれていません。なので、Prettierの設定にはprettier-configではなく、Shopify Liquid Prettier Pluginを使うようにしています。こちらのプラグインを使えばLiquidもフォーマットしてくれるようになります。

GitHub Actions

PRをオープンしたときやmainブランチに変更があったときにリントやビルドが走るようにしています。

ShopifyではGitHub連携が用意されており、コードに変更を加えると自動でデプロイしてくれます。逆に、Shopifyの管理画面からテーマを編集すると、その変更がコミットとしてGitHub上に追加されます。この機能は非常に便利なのですが、ShopifyによるコミットはPrettierでフォーマットされないため、このままだとレポジトリにフォーマットされていないコードが混じってしまいます。

この問題を解決するため、Shopifyによるコミットをトリガーにコードをフォーマットして新しいコミットとして追加するワークフローを追加しています。

上記の件含め、プロジェクトに合わせて適宜変更して使ってください。