品質ツール：Theme CheckとVS Code拡張
Theme CheckとVS CodeのShopify Liquid拡張で、書く前・書いた後に品質を機械的に担保できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、Theme Check（テーマ専用のLint）とVS CodeのShopify Liquid拡張で、書く前と書いた後に品質を機械的に確かめられるようになります。
受託では、非推奨のフィルタや翻訳キーの抜けを目で見つけるのは無理なので、納品前に機械に拾わせる習慣が事故を防ぎます。
Theme Checkとは、テーマ専用のLint
Theme Checkは、テーマ専用のLint（コードの問題を機械的に見つける道具）です。
非推奨フィルタ（img_urlなど）、未定義の翻訳キー、schemaのJSONエラー、includeの使用、パフォーマンス上の問題を検出します。shopify theme checkで実行します。
設定ファイルで基準を決める
.theme-check.ymlで、ルールの有効／無効や対象を調整します。
Skeleton themeにはextends: theme-check:recommendedの1行が入っています。
クライアントの既存テーマは警告だらけのことが多いので、まず基準を決めてから直します。
VS Code拡張とフォーマッタで、書く前に間違いが見える
VS Code拡張「Shopify Liquid」は、シンタックスハイライト、オブジェクトとフィルタの補完、Theme Checkのインライン表示をしてくれます。
LiquidDocに基づくスニペット引数の補完もあります。
書く前に間違いが見えるのが利点です。
整形はPrettierのLiquidプラグインで行い、チームで揃えると差分が読みやすくなります。
Theme Checkで検出できないもの
デザインの崩れ、業務ロジックの誤り、要件との食い違いは検出できません。
Theme Checkが通っても「正しい」わけではないので、目視とtheme devは別に要ります。
公式ドキュメント
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。