Shopify 公式の Theme linter 「Theme Check」を使用してテーマの構文エラーをチェックする

ishigaki

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、Shopify が公式でリリースしている Theme linter である「Theme Check」を使用して、Shopify テーマのエラーをチェックする方法についてまとめたいと思います。

Shopify テーマをローカルで編集しているのが前提となりますので、以前書いたこちらの記事も併せてお読みいただけるとありがたいです。

導入

公式の GitHub ページに沿って、Homebrew で導入します。

$ brew tap shopify/shopify
$ brew install theme-check

使い方

導入後、作業ディレクトリに移動し、以下のコマンドを実行して使用します。

$ theme-check

オプション指定なしの theme-check では、カレントディレクトリでのチェックを実行します。

実行すると以下のように結果が出力されます。

theme-check の実行結果

チェックの内容について

チェック項目は大きく分けて3種に分けられます。

  • style: コードの記述方法を統一する lint チェック
  • suggesstion: deprecated な記述の置換などの提案
  • error: syntax error のようなテーマのアップロードに影響するエラー

チェッカーの設定について

ルートディレクトリに.theme-check.yml を置くことでチェックディレクトリの指定とチェック項目の有効/無効の設定が行えます。

設定内容の例は公式の GitHub にあるサンプルを御覧ください。

検出するエラーの設定内容は theme-check -l で確認することができます。

theme-check -l の実行結果で出力された設定項目の内容(デフォルト設定)

注意点

2021年1月現在、特定ファイルや特定ディレクトリだけのチェックには対応していないようです。

.theme-check.yml でディレクトリを指定したり、 theme-check assets/ でディレクトリを渡して実行することはできますが、その場合は通常のチェック結果に加えて

search.liquid:98: suggestion: MissingTemplate: 'snippets/pagination.liquid' is not found.

error: MissingRequiredTemplateFiles: 'layout/theme.liquid' is missing.

error: RequiredDirectories: Theme is missing 'assets' directory.

といった、テーマに必要なファイルが欠落しているというエラーが多く出力されます。

通常のエラーに加えてファイル欠落のエラーも出力される

RequiredDirectories, MissingRequiredTemplateFiles, MissingTemplate といったエラーを無効化して、指定ディレクトリ以下に関するエラーに絞って出力させるということは可能です。

まとめ

Shopify のテーマに対応した linter は今までに存在していなかったため、テーマ開発を行う上でかなり有用なものとなるのは間違いないと感じました。

Shopify 公式からのリリースのため、メンテナンスやアップデートにおいても信頼がおけるのが嬉しい点です。

更なるアップデートに期待しつつ、こういったツールでテーマ開発をより効率化していければと思っています。

Shopify テーマ開発を行っている方々の参考にしていただけるとありがたいです。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。