最低限の環境を整えることでShopifyのテーマ開発は可能ですが、様々なツールを導入することで劇的に開発効率を上げることができます。様々に存在するShopifyのテーマ開発を効率化するツールのなかから、いくつかピックアップしてご紹介します。なお、Shopifyのテーマ開発環境を整えたい方は、以下の記事も参考になると思いますので、合わせて参照ください。
Visual Studio Codeの拡張機能
皆さんが普段使われているコードエディターは何でしょうか？本記事執筆時点では、やはり個人的なおすすめはVisual Studio Code（以下VSCode）かな、と思います。VSCodeは豊富な拡張機能が魅力の1つですが、Shopifyのテーマ開発をするうえでは以下の拡張機能がオススメです。
Shopify Liquid
シンタックスハイライトをはじめ、コード補完や構文チェック、Prettierを利用したフォーマット、ドキュメント表示など、多彩な機能を持っています。VSCodeでShopifyテーマ開発をするならば必須と言える拡張機能です。
- Shopify Liquid - Visual Studio Marketplace
- Shopify Liquid VS Code extension
- theme-tools/packages/vscode-extension at main · Shopify/theme-tools
Shopify Liquid Template Snippets
Liquidスニペットを展開する拡張機能です。自動的にコードを展開してくれるので、作業効率が大幅に上がります。
Shopify GitHub App
Shopifyでは、ShopifyアカウントとGitHubアカウントを接続するGitHubアプリを提供しています。
アプリを利用することで、GitHubリポジトリのブランチとShopifyテーマを同期し、変更が加えられるたびにShopify管理画面に自動的に反映することが可能です。また、Shopify管理画面で行った変更はGitHubリポジトリに自動でコミットされるため、ローカルでの作業を省略しながら最新状態を保つことができます。
Shopify Lighthouse CI GitHub Action
Shopify Lighthouse CI GitHub Actionは、Googleが提供するLighthouse CIをベースにしたGitHub Actionで、テーマ開発のワークフローにLighthouseのテストを統合することができるようになります。ウェブサイトのパフォーマンス、アクセシビリティ、SEOの品質を継続的にモニタリングすることが可能です。
Shopify Theme Inspector for Chrome
Shopify Theme Inspector for Chromeは、Liquidレンダリングプロファイルを行うためのChrome拡張です。視覚的にプロファイリング結果を確認することができ、Liquidレンダリングの問題を特定するヒントを掴むことができます。
Shopify CLI
テーマ開発環境を整えるときに導入したShopify CLIも、様々な機能を持っています。一度ドキュメントに目を通してみると、新たな発見があるかもしれません。
まとめ
本記事では、Shopifyテーマ開発における便利なツールとその使い方を解説しました。適切なツールを選び活用することで、生産性の向上はもちろん、テーマの品質も大きく向上します。ぜひこれらのツールを取り入れて、効率的なテーマ開発を実現してください。