【Shopify.dev和訳】Themes/Dev tools/Theme Check/Check reference
この記事について
この記事は、Themes/Developer tools/Theme Check/Check referenceの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
概要
リファレンスの確認
テーマチェックの一環として、以下のチェックを実行することができます。各チェックでは、特定の Error や、コード内でベストプラクティスが守られていない箇所を特定します。
チェックは、その目的を理解しやすいようにカテゴリー別に分類されています。一部のチェックは、複数のカテゴリに分かれています。
チェックとそのオプションの詳細を確認するには、チェックの名前をクリックしてください。
チェック項目の追加・削除
--category <CATEGORY> または --exclude-category <CATEGORY> フラグを使用して、特定のカテゴリのチェックを含めたり、除外したりすることができます。
例えば、あるテーマで Liquid チェックだけを実行するには、 shopify theme check --category liquid というコマンドを使います。翻訳チェックを無効にするには、shopify theme check --exclude-category translation というコマンドを使います。
フラグの複数のインスタンスを使用して、複数のカテゴリを指定できます。
shopify theme check --category liquid --category performance
HTML チェック
これらのチェックは、HTML ファイルの内容を分析します。
| チェック | 重要度 | 目的 |
|---|---|---|
| AssetSizeCSS | Error | 設定された閾値よりも大きなサイズの CSS ファイルをテーマで使用できないようにします。 |
| AssetSizeJavaScript | Error | 設定されたしきい値よりも大きなサイズの圧縮されたテーマの JavaScript ファイルや外部スクリプトが使用されないようにします。 |
| DeprecateBgsizes | Suggestion | 背景画像の読み込みに image-set 属性ではなく bgset 拡張子を使用することを推奨しません。 |
| DeprecateLazysizes | Suggestion | 画像、iframe、およびスクリプトの遅延読み込みに lazysizes ライブラリを使用することを推奨しません。 |
| HtmlParsingError | Error | テーマチェックによる HTML の解析と分析を妨げる Error を報告します。 |
| ImgLazyLoading | Suggestion | パフォーマンスを上げるために画像の遅延読み込みを Suggestion します。 |
| ImgWidthAndHeight | Error |
imgタグにwidthとheight属性を設定することを強制します。 |
| ParserBlockingJavaScript | Error | defer 属性や async 属性を持たない script タグを特定し、パーサーブロッキングな JavaScript を回避します。 |
| RemoteAsset | Suggestion | アセットのホスティングにサードパーティのドメインを使用することを推奨します。 |
JSON チェック
これらのチェックでは、JSON ファイルの内容や構造、構文を分析します。
| チェック | 重要度 | 目的 |
|---|---|---|
| ValidJson | Error | テーマ内の無効な JSON ファイルを特定します。 |
| ValidSchema | Suggestion |
{% schema %}タグ内の無効な JSON を特定します。 |
| VaildHTMLTTranslation | Suggestion | 翻訳内の無効な HTML を特定します。 |
Liquid チェック
これらのチェックは、Liquid のコードのスタイルと有効性を分析します。
| チェック | 重要度 | 目的 |
|---|---|---|
| AppBlockValidTags | Error | テーマのアプリ拡張アプリブロックとアプリ埋め込みブロックのコードに含まれる禁止された Liquid タグを特定します。 |
| AssetSizeCSSStyleSheetTag | Error | テーマが Liquid のスタイルシートタグを使って、設定された閾値以上の CSS ファイルを参照しないようにします。 |
| AssetUrlFilters | Error | アセットを提供するためにasset_urlまたはimg_urlフィルターの使用を推奨します。 |
| ContentForHeaderModification | Error |
content_for_headerを解析しようとするコードを特定します。 |
| ConvertIncludeToRender | Suggestion |
renderタグの代わりに非推奨のincludeタグを使用することを推奨します。 |
| DeprecatedFilter | Suggestion | テーマで非推奨のフィルターを使用することを推奨しません。 |
| LiquidTag | Suggestion | 4 つ以上の連続した Liquid タグ ({% ... %}) が見つかった場合、{% liquid ... %} の使用を推奨します。 |
| MissingEnableComment | Error | テンプレートの途中で theme-check-disable が使用されている場合、対応する theme-check-enable のコメントも存在することを確認します。 |
| MissingRequiredTemplateFiles | Error | Shopify Theme Store に必要なすべてのテンプレートファイルが存在するかどうかを確認します。 |
| MissingTemplate | Suggestion |
render、section、またはincludeタグを使用してリソースが参照されているにもかかわらず、そのリソースが存在しない場合を特定します。 |
| NestedSnippet | Suggestion | 深くネストされたrenderタグやincludeタグを報告します。 |
| ParserBlockingScriptTag | Error |
script_tagフィルタの使用を特定します。 |
| RequiredDirectories | Error | Theme Store に必要なすべてのテンプレートファイルが存在するかどうかを確認します。 |
| RequiredLayoutThemeObject | Error | theme.liquid レイアウトファイルに必要な {{ content_for_header }} と {{ content_for_layout }} オブジェクトが含まれているかどうかを確認します。 |
| SpaceInsideBraces | Style | Liquid のタグや変数の内部で一貫性のないスペーシングを識別します。 |
| SyntaxError | Error | Liquid の構文エラーを確認します。 |
| TemplateLength | Suggestion | 大きなサイズの Liquid テンプレートファイルを識別します。 |
| UndefinedObject | Error | 未定義の Liquid オブジェクトへの参照を示します。 |
| UnknownFilter | Error | 不明な Liquid フィルターへの参照を特定します。 |
| UnusedAssign | Suggestion | 使用されていない変数定義を特定します。 |
| UnusedSnippet | Suggestion | 使用されていないスニペットを特定します。 |
パフォーマンスチェック
これらのチェックでは、テーマコードの一般的なパフォーマンスの問題を調べます。
| チェック | 重要度 | 目的 |
|---|---|---|
| AssetSizeAppBlockCSS | Error | テーマアプリの拡張機能が、設定された閾値よりも大きい CSS ファイルを使用することを防ぎます。 |
| AssetSizeAppBlockJavascript | Error | 設定された閾値よりも大きな圧縮サイズの JavaScript ファイルや外部スクリプトをテーマアプリの拡張機能で使用できないようにします。 |
| AssetSizeCSS | Error | 設定されたしきい値よりも大きい CSS ファイルをテーマが使用するのを防ぎます。 |
| AssetSizeCSSStyleSheetTag | Error | 設定された閾値よりも大きい CSS ファイルを Liquid スタイルシートタグを使ってテーマが参照するのを防ぎます。 |
| AssetSizeJavaScript | Error | 設定された閾値よりも大きなサイズの圧縮されたテーマの JavaScript ファイルや外部スクリプトを使用しないようにします。 |
| AssetUrlFilters | Error | アセットを提供するためにasset_urlまたはimg_urlフィルターを使用することを推奨します。 |
| DeprecateBgsizes | Suggestion | 背景画像の読み込みに image-set 属性ではなく bgset 拡張子を使用することを推奨します。 |
| DeprecateLazysizes | Suggestion | 画像、iframe、およびスクリプトの遅延読み込みに lazysizes ライブラリを使用することを推奨しません。 |
| ImgLazyLoading | Suggestion | パフォーマンスを向上させるために画像の遅延読み込みを推奨します。 |
| ImgWidthAndHeight | Error |
img タグに width と height 属性を設定することを強制します。 |
| PaginationSize | Suggestion | パフォーマンスを向上させるために画像の遅延読み込みを推奨します。 |
| ParserBlockingJavaScript | Error |
deferまたはasync属性を持たないスクリプトタグを識別します。 |
| ParserBlockingScriptTag | Error |
deferまたはasync属性を持つスクリプトタグでラップされていないscript_tagフィルタの使用を特定します。 |
| RemoteAsset | Suggestion | アセットのホスティングにサードパーティのドメインを使用することを推奨します。 |
翻訳チェック
翻訳が完了しているかどうかをチェックします。
| チェック | 重要度 | 目的 |
|---|---|---|
| DefaultLocale | Suggestion | テーマがデフォルトのロケールファイルを持っているかどうかを確認します。 |
| MatchingSchemaTranslations | Suggestion |
{% schema %}タグ内の不足している翻訳や追加の翻訳を特定します。 |
| MatchingTranslations | Suggestion | ロケールファイルに不足している翻訳や追加の翻訳を特定します。 |
| TranslationKeyExists | Error | 存在しない翻訳への参照を特定します。 |
AppBlockValidTags
バージョン 1.1.0 以上
テーマアプリの拡張アプリブロックやアプリの埋め込みブロックのコードで、禁止されている Liquid タグを識別します。
禁じられているタグは以下の通りです。
{% javascript %}{% stylesheet %}{% include 'foo' %}{% layout 'foo' %}{% section 'foo' %}
このチェックを無効にする
このチェックは、shopify extension checkを実行したときにデフォルトで有効になります。このチェックを無効にすることは推奨されません。
このチェックは shopify theme checkを実行するときにデフォルトで無効になっています。
AssetSizeAppBlockCSS
バージョン 1.1.0 以上
設定された threshold_in_bytes より大きい CSS ファイルをテーマアプリ拡張機能が使用しないようにします。CSS ファイルのサイズを制限することで、テーマアプリの拡張機能のパフォーマンスを向上させることができます。
例
以下の例では、assets/app.cssのサイズが、指定したthreshold_in_bytesを超えていないことを確認しています。
{% schema %}
{
...
"stylesheet": "app.css"
}
{% endschema %}
オプション
以下の例では、このチェックのデフォルトの設定が含まれています。
AssetSizeAppBlockCss:
enabled: true
severity: suggestion
threshold_in_bytes: 100_000
| パラメータ | 説明 |
|---|---|
enabled |
このチェックが有効であるかどうか。 |
severity |
チェックの厳しさ。 |
threshold_in_bytes |
1 つの CSS ファイルで許容される最大の圧縮サイズ（バイト）です。テーマアプリ拡張 CSS の推奨制限値を反映し、テーマスタイルシートとリモートスタイルシートを含みます。 |
このチェックを無効にする
このチェックは、shopify extension checkを実行するとデフォルトで有効になります。この制限はまだ実施されていませんが、このチェックを無効にすることはテーマアプリの拡張機能には推奨されません。
このチェックは shopify theme checkを実行するとデフォルトで無効になります。
AssetSizseAppBlockJavascript
バージョン 1.1.0 以上
設定されたthreshold_in_bytesを超える圧縮サイズの JavaScript ファイルおよび外部スクリプトを、テーマアプリの拡張機能で使用できないようにします。JavaScript ファイルのサイズを制限することで、テーマアプリの拡張機能のパフォーマンスを向上させることができます。
大きなサイズの JavaScript バンドルを読み込む必要がある場合もあります。このような場合には、import on interaction パターンを使用して、コンポーネントと対話しないユーザーにバンドルを実行させないようにすることができます。
例
次の例では、assets/chat-widget.jsのサイズが、指定したthreshold_in_bytesを超えていないことを確認しています。
{% schema %}
{
...
"javascript": "chat-widget.js"
}
{% endschema %}
オプション
次の例には、このチェックのデフォルト構成が含まれています。
AssetSizeAppBlockJavaScript:
enabled: false
severity: suggestion
threshold_in_bytes: 10_000
| パラメーター | 詳細 |
|---|---|
enabled |
チェックを有効にするかどうか |
severity |
チェックの厳しさです。 |
| threshold_in_butes | 1 つの JavaScript ファイルで許容される最大の圧縮サイズ（バイト）です。テーマアプリの拡張 JavaScript の推奨制限値を反映しており、アプリとリモートスクリプトを含みます。 |
このチェックを無効にする
このチェックは、shopify extension checkを実行するとデフォルトで有効になります。この制限はまだ実施されていませんが、このチェックを無効にすることはテーマアプリの拡張機能には推奨されません。
このチェックは shopify theme checkを実行するとデフォルトで無効になります。
AssetSizeCSS
バージョン 0.6.0 以降
テーマやテーマアプリの拡張機能が、設定された threshold_in_bytes よりも大きな CSS ファイルを使用しないようにします。CSS ファイルのサイズを制限することで、テーマのパフォーマンスを向上させることができます。
例
次の例では、section-rich-text.cssのサイズが、指定されたthreshold_in_bytesを超えていないことを確認しています。
<link rel="stylesheet" href="{{ 'section-rich-text.css' | asset_url }}" media="print" onload="this.media='all'">
オプション
次の例では、このチェックのデフォルト設定が含まれています。
テーマの場合
AssetSizeCSS:
enabled: false
threshold_in_bytes: 100_000
テーマアプリの拡張に
AssetSizeCSS:
enabled: false
severity: suggestion
threshold_in_bytes: 100_000
| パラメーター | 詳細 |
|---|---|
enabled |
チェックを有効にするかどうか |
severity |
チェックの厳しさです。 |
threshold_in_butes |
1 つの CSS ファイルに対して許容される最大の圧縮サイズ（バイト）です。これには、テーマおよびリモートスタイルシートが含まれます。 |
このチェックを無効にする
このチェックは、shopify extension checkを実行するとデフォルトで有効になります。この制限はまだ実施されていませんが、このチェックを無効にすることはテーマアプリの拡張機能には推奨されません。
このチェックは shopify theme checkを実行するとデフォルトで無効になります。
AssetSizeCSSStylesheetTag
バージョン 1.0.0 以上
テーマおよびテーマアプリの拡張機能が、設定された threshold_in_bytes より大きい CSS ファイルを使用するのを防ぎます。AssetSizeCSS とは異なり、このチェックでは stylesheet_tag フィルターを使用して参照される大きな CSS ファイルを識別します。
CSS ファイルのサイズを制限することで、テーマのパフォーマンスを向上させることができます。
例
次の例では、assets/theme.cssのサイズが、指定したthreshold_in_bytesを超えていないことを確認しています。
{{ 'theme.css' | asset_url | stylesheet_tag }}
オプション
以下の例では、このチェックのデフォルトの設定が含まれています。
AssetSizeCSSStylesheetTag:
enabled: false
threshold_in_bytes: 100_000
| パラメーター | 詳細 |
|---|---|
enabled |
チェックを有効にするかどうか |
threshold_in_bytes |
1 つの CSS ファイルに対して許容される最大の圧縮サイズ（バイト）です。これには、テーマおよびリモートスタイルシートが含まれます。 |
このチェックを無効にする
このチェックは、デフォルトでは無効になっています。
AssetSizeJavascript
バージョン 0.5.0 以上
設定された threshold_in_bytes 以上の圧縮サイズを持つテーマの JavaScript ファイルおよび外部スクリプトを使用できないようにします。JavaScript ファイルのサイズを制限することで、テーマのパフォーマンスを向上させることができます。
大きなサイズの JavaScript バンドルを読み込む必要がある場合もあります。このような場合には、import on interaction パターンを使用して、コンポーネントと対話しないユーザーがバンドルを実行するのを避けることができます。
例
以下の例では、このチェックに失敗または合格したコードスニペットを示しています。
✗ Fail
以下の例では、assets/chat-widget.jsは、gzip で圧縮された状態で 10KB を超えています。
<script src="chat-widget.js" defer></script>
✓ パス
<script>
const chatWidgetButton = document.getElementById('#chat-widget')
chatWidgetButton.addEventListener('click', e => {
e.preventDefault();
import("chat-widget.js")
.then(module => module.default)
.then(ChatWidget => ChatWidget.init())
.catch(err => {
console.error(err);
});
});
</script>
オプション
次の例では、このチェックのデフォルト設定が含まれています。
テーマの場合:
AssetSizeJavaScript:
enabled: false
threshold_in_bytes: 10000
テーマアプリの拡張:
AssetSizeJavaScript:
enabled: false
severity: suggestion
threshold_in_bytes: 10000
| パラメーター | 詳細 |
|---|---|
enabled |
チェックを有効にするかどうか |
severity |
チェックの厳しさ |
threshold_in_bytes |
1 つの CSS ファイルに対して許容される最大の圧縮サイズ（バイト）です。これには、テーマおよびリモートスタイルシートが含まれます。 |
このチェックを無効にする
このチェックはデフォルトでは、shopify extension checkを実行したときにのみ有効になります。この制限はまだ実施されていませんが、テーマアプリの拡張機能でこのチェックを無効にすることは推奨されません。
どうしてもルール違反を避けられない場合は、コメント構文を使ってチェックを無効にしてください。これにより、各インスタンスに対して意図的にチェックを無効にすることができます。
{% comment %}theme-check-disable AssetSizeJavaScript{% endcomment %}
<script src="{{ 'chat-widget.js' | asset_url }}" defer></script>
{% comment %}theme-check-enable AssetSizeJavaScript{% endcomment %}
This check is disabled by default when you run [`shopify theme check`](/themes/tools/theme-check/commands).
AssetUrlFilters
バージョン 0.9.1 以上
アセットを提供するためにasset_urlまたはimg_urlフィルターの使用を奨励します。Shopify のコンテンツ・デリバリー・ネットワーク（CDN）からできる限りの配信を行うべきです。アセットに同じホストを使用することで、不要な HTTP 接続を避け、サーバーが HTTP/2 の優先順位付けを使用してブロックリソースの配信を優先することができます。Shopify サーバーでのアセットのホスティングについてはこちらをご覧ください。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
以下の例では、Shopify 以外の CDN からリソースが取得されています。
{{ "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" | stylesheet_tag }}
次の例では、img_urlフィルターを使用せずに image タグを使用しています。
{{ url | img_tag }}
✓ Pass
これらの例では、asset_url または img_url フィルターを使用して、テーマの assets フォルダから Shopify CDN のファイルを読み込みます。
{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
{{ url | img_url | img_tag }}
このチェックを無効にする
このチェックは無効にしても問題ありません。リモートコンテンツが非常に動的な場合は、このチェックを無効にすることがあります。
ContentForHeaderModification
バージョン 0.9.0 以降
content_for_header を解析しようとするコードを特定します。
content_for_header の内容は将来的に変更される可能性があり、それによって Liquid コードの動作が変わる可能性があるため、依存すべきではありません。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
以下のコードは、content_for_headerからコンテンツを抽出します。
{% assign parts = content_for_header | split: ',' %}
✔️ Path
以下は、content_for_headerの唯一の許容可能な使用法です。
{{ content_for_header }}
このチェックを無効にする
このチェックを無効にすることは推奨されません。
ConvertIncludeToRender
バージョン 0.1.0 以降
テーマでrender タグの代わりに 非推奨のinclude タグを使用することを推奨します。
include は render と同様に動作しますが、include を使うとスニペット内のコードが親テンプレート内の変数にアクセスしたり上書きしたりすることができます。これはパフォーマンスを低下させ、テーマのコードを読みにくくし、メンテナンスを困難にします。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
{% include 'snippet' %}
✓Pass
{% render 'snippet' %}
このチェックを無効にする
このチェックを無効にすることは推奨されません。
DefaultLocale
バージョン 0.1.0 以上
テーマがデフォルトのロケールファイルを持っていることを確認します。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
以下は、このチェックで間違ったフォルダ構造になっている例です。
locales/
├── en.json
├── fr.json
└── zh-TW.json
✓ Pass
このチェックのための正しいフォルダ構造の例を以下に示します。
locales/
├── en.default.json # a default translation file is required
├── fr.json
└── zh-TW.json
このチェックを無効にする
このチェックは無効にしても問題ありません。
DeprecateBgsizes
バージョン 1.0.0+の場合
レスポンシブな背景画像を読み込むために、CSS のimage-set属性の代わりにlazysizes bgset 拡張機能を使用することを推奨しません。
JavaScript のバンドルサイズが大きくなり、ロード時間が長くなるのを避けるために、ブラウザのネイティブ機能よりもサードパーティのライブラリを使用することは避けるべきです。テーマのパフォーマンスについてはこちらをご覧ください。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
次の例では、lazyloadクラスとdata-bgset属性が含まれています。
<script src="ls.bgset.min.js"></script>
<script src="lazysizes.min.js"></script>
<div class="lazyload" data-bgset="image-200.jpg 200w, image-300.jpg 300w, image-400.jpg 400w" data-sizes="auto">
</div>
✓ Pass
次の例では、data-bgsetの代わりに CSS のimage-set()属性を使用しています。
<!-- CSS Stylesheet -->
.box {
background-image: -webkit-image-set(
url("small-balloons.jpg") 1x,
url("large-balloons.jpg") 2x);
background-image: image-set(
url("small-balloons.jpg") 1x,
url("large-balloons.jpg") 2x);
}
<!-- HTML -->
<div class="box"></div>
このチェックを無効にする
このチェックは無効にしても問題ありません。
DeprecateLazysizes
バージョン 1.0.0 以上
画像、iframe、スクリプトの読み込みを遅延させるJavaScript ライブラリ「lazysizes」の使用を抑制します。
JavaScript バンドルのサイズが大きくなり、ロード時間が遅くなるのを避けるために、ブラウザのネイティブ機能よりもサードパーティのライブラリを使用することは避けるべきです。テーマのパフォーマンスについてはこちらをご覧ください。
このチェックは、lazyloadクラス、data-srcsetおよびdata-sizes属性、およびdata-sizes="auto"の使用を識別します。
例
以下の例では、このチェックに失敗または合格したコードスニペットを示しています。
✗ Fail
次の例では、lazyload クラスが含まれています。
<img src="a.jpg" class="lazyload">
次の例では、lazyloadクラス、data-srcset属性、data-sizes属性、data-sizes="auto"が含まれています。
<img
alt="House by the lake"
data-sizes="auto"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
data-src="medium.jpg"
class="lazyload"
/>
✓ Pass
次の例では、lazysizes ライブラリの代わりにネイティブloading属性を使用しています。
<img src="a.jpg" loading="lazy">
このチェックを無効にする
loading="lazy"属性をサポートしていないブラウザで画像の遅延読み込みをサポートしたい場合にのみ、このチェックを無効にする必要があります。
DeprecatedFilter
バージョン 0.2.0 以降
テーマで非推奨のフィルタを使うことを抑制します。
例
以下の例は、このチェックに失敗または合格したコードスニペットです。
✗ 失敗
.site-footer p {
color: {{ settings.color_name | hex_to_rgba: 0.5 }};
}
✓ パス
.site-footer p {
color: {{ settings.color_name | color_modify: 'alpha', 0.5 }};
}
このチェックを無効にする
このチェックを無効にすることは推奨されません。
HtmlParsingError
バージョン 0.10.2+の場合
このチェックは、ファイルの解析を妨げる HTML エラーを報告します。
HTML パーサーは、要素あたりの属性数を 400 に、DOM ツリーの最大深度を 400 レベルに制限しています。これらの制限のいずれかに達した場合、パーシングは停止し、このファイル上のすべての HTML 違反は無視されます。
例
以下の例では、このチェックに失敗または合格したコードスニペットを示しています。
✗ Fail
<img src="muffin.jpeg"
data-attrbute-1=""
data-attrbute-2=""
... up to
data-attrbute-400="">
✓ Pass
<img src="muffin.jpeg">
このチェックを無効にする
このルールは無効にしても問題ありません。
ImgLazyLoading
バージョン 0.10.0+の場合
遅延ローディングとは、リソースをノンブロッキングと認識し、必要なときだけロードする戦略です。遅延ロードは、重要なレンダリングパスの長さを短縮し、ページのロード時間を短縮する方法です。
画像はページ内で必要なときにのみロードし、お客様がページをスクロールするまではプレースホルダーを使用することを検討する必要があります。こうすることで、実際よりも早くページが読み込まれているように見えるため、パフォーマンスの向上につながります。ライブラリを使用するのではなく、img や srcset のloading 属性をlazyに設定してください。
例
以下の例では、このチェックに失敗または合格したコードスニペットを示しています。
✗ Fail
<img src="a.jpg">
<!-- Replaces lazysize.js -->
<img src="a.jpg" class="lazyload">
<!-- `auto` is deprecated -->
<img src="a.jpg" loading="auto">
✓ Pass
<img src="a.jpg" loading="lazy">
<!-- `eager` is also accepted, but prefer `lazy` -->
<img src="a.jpg" loading="eager">
このチェックを無効にする
画像の読み込みを遅延させたくない場合は、このルールを無効にしてください。
ImgWidthAndHeight
バージョン 0.6.0 以降
imgタグにwidthとheightの属性を設定することを強制し、CLS（cumulative layout shift）を回避します。
width および height 属性が設定されていない場合、ブラウザは画像をダウンロードする前にその画像のアスペクト比を知ることができません。他の方法でスペースを確保しない限り、ブラウザは画像が読み込まれるまで、画像の高さを0pxとみなします。
そのため、以下のような問題が発生します。
- 画像が次々と表示されてレイアウトが崩れる。画像がテキストをページの下に押し下げる。
-
遅延読み込みが壊れる。すべての画像の高さが
0の場合、すべての画像がビューポート内に入り、読み込まれてしまいます。
これらの問題は、テーマを使用している店舗のモバイル検索ランキングに悪影響を与えます。
例
以下の例では、このチェックに失敗または合格したコードスニペットを示しています。
✗ Fail
<img alt="cat" src="cat.jpg">
<img alt="cat" src="cat.jpg" width="100px" height="100px">
<img alt="{{ image.alt }}" src="{{ image.src }}">
✓ Pass
<img alt="cat" src="cat.jpg" width="100" height="200">
<img
alt="{{ image.alt }}"
src="{{ image.src }}"
width="{{ image.width }}"
height="{{ image.height }}"
>
このチェックを無効にする
以下のような場合には、width、height属性を設定しなくても、コンテンツレイアウトのずれを回避することができます。
- 表示される画像のアスペクト比が、アップロードされた画像と独立している必要がある場合。この場合、CSS の
padding-topによる回避策でoverflow: hiddenコンテナを使用する必要があります。 -
padding-topによる回避策を使いたい場合。
このような場合には、ImgWidthAndHeightチェックを無効にしてください。
それ以外の場合は、このチェックを無効にすることは推奨されません。
LiquidTag
バージョン 0.1.0 以降
4 つ以上の連続した Liquid タグ({% ... %})が見つかった場合、{% liquid ... %}の使用を推奨します。これにより、テーマファイル内で繰り返されるタグマーカー（{%と%}）を排除することができます。
例
以下の例では、このチェックに失敗または合格したコードスニペットを示しています。
✗ Fail
{% if collection.image.size != 0 %}
{% assign collection_image = collection.image %}
{% elsif collection.products.first.size != 0 and collection.products.first.media != empty %}
{% assign collection_image = collection.products.first.featured_media.preview_image %}
{% else %}
{% assign collection_image = nil %}
{% endif %}
✓ Pass
{%- liquid
if collection.image.size != 0
assign collection_image = collection.image
elsif collection.products.first.size != 0 and collection.products.first.media != empty
assign collection_image = collection.products.first.featured_media.preview_image
else
assign collection_image = nil
endif
-%}
オプション
LiquidTag:
enabled: true
min_consecutive_statements: 5
| パラメータ | 詳細 |
|---|---|
enabled |
このチェックが有効であるかどうか。 |
| min_consecutive_statements | チェックがリファクタリングを推奨するまでの最大（含む）連続したステートメント数。 |
このチェックを無効にする
このチェックは無効にしても問題ありません。
MatchingSchemaTranslations
バージョン 0.1.0+の場合
{% schema %}タグに含まれる欠落した翻訳や追加の翻訳を特定します。
例
以下の例では、このチェックに失敗または合格したコードスニペットを示しています。
✗ Fail
次の例では、fr.missingがなく、fr.extraがデフォルト（en）のロケールになっていません。
{% schema %}
{
"locales": {
"en": {
"title": "Welcome",
"missing": "Product"
},
"fr": {
"title": "Bienvenue",
"extra": "Extra"
}
}
}
{% endschema %}
次の例では、productのfrラベルがありません。
{% schema %}
{
"name": {
"en": "Hello",
"fr": "Bonjour"
},
"settings": [
{
"id": "product",
"label": {
"en": "Product"
}
}
]
}
{% endschema %}
✓ Pass
{% schema %}
{
"name": {
"en": "Hello",
"fr": "Bonjour"
},
"settings": [
{
"id": "product",
"label": {
"en": "Product",
"fr": "Produit"
}
}
]
}
{% endschema %}
このチェックを無効にする
このチェックを無効にすると、一部のユーザーで翻訳の一貫性が失われる可能性があるため、推奨しません。
MatchingTranslations
バージョン 0.1.0+の場合
ロケールファイルに欠けている翻訳や追加の翻訳を特定する。
例
以下の例は、このチェックに失敗または合格したコードスニペットです。
✗ 失敗
以下のロケールファイルは一貫性がありません。
en.default.json
{
"greeting": "Hello, world",
"goodbye": "Bye, world"
}
es.json
es.jsonには、greetingとgoodbyeの翻訳がありません。
{}
fr.json
fr.jsonにはgreetingがなく、デフォルトのロケールにはないgoodbyタグがあります。
{
"greeting": "Bonjour, monde"
"goodby": "Au revoir, monde"
}
✓ パス
以下のロケールファイルは一貫しています。
en.default.json
{
"greeting": "Hello, world",
"goodbye": "Bye, world"
"pluralized_greeting": {
"one": "Hello, you"
"other": "Hello, y'all",
}
}
fr.json
{
"greeting": "Bonjour, monde"
"goodbye": "Au revoir, monde"
"pluralized_greeting": {
"zero": "Je suis seul :(",
"few": "Salut, groupe!"
}
}
このチェックを無効にする
このチェックを無効にすると、一部のユーザーで翻訳の一貫性が失われる可能性があるため、推奨されません。
MissingEnableComment
バージョン 0.3.0+の場合
テンプレートの途中でtheme-check-disableが使われている場合、対応するtheme-check-enableのコメントも表示されるようにしました。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
<!doctype html>
<html>
<head>
{% comment %}theme-check-disable ParserBlockingJavaScript{% endcomment %}
<script src="https://cdnjs.com/jquery.min.js"></script>
</head>
<body>
<!-- ... -->
</body>
</html>
✓ Pass
<!doctype html>
<html>
<head>
{% comment %}theme-check-disable ParserBlockingJavaScript{% endcomment %}
<script src="https://cdnjs.com/jquery.min.js"></script>
{% comment %}theme-check-enable ParserBlockingJavaScript{% endcomment %}
</head>
<body>
<!-- ... -->
</body>
</html>
このチェックを無効にする
このチェックを無効にすることは、コードの大部分で Theme Check が実行されない可能性があるため、推奨されません。
MissingRequiredTemplateFiles
バージョン 0.1.0 以上
Shopify Theme Store に必要なすべてのテンプレートファイルが存在することを確認します。テーマテンプレートについて詳しくはこちら。
このチェックを無効にする
このチェックは無効にしても問題ありません
MissingTemplate
バージョン 0.1.0+の場合
render、section、またはincludeタグを使用してリソースが参照されているにもかかわらず、そのリソースが存在しない場合を識別します。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
次の例では、テーマ内に対応する snippet-that-does-not-exist ファイルがありません。
{% render 'snippet-that-does-not-exist' %}
✓ Pass
以下の例では、テーマの snippets フォルダに article-card が存在しています。
{% render 'article-card' %}
このチェックを無効にする
このチェックを無効にすることは推奨されません。
オプション
MissingTemplate:
enabled: true
ignore:
- path-to-file/filename1.md
ignore_missing:
- path-to-file/filename-*
| パラメーター | 詳細 |
|---|---|
enabled |
このチェックを有効にするかどうか |
ignore |
見つからないテンプレートのインスタンスを無視するファイルのリストです。 |
ignore_missing |
無視するテンプレートファイルの欠落のパターンのリストです |
ignore and ignore_missing
ignoreオプションは、テーマチェックがMissingTemplateのすべてのエラーを、そのエラーが発生したファイルに応じて無視するように指示します。
例えば、以下の設定では、テーマ・チェックは、レンダリングされているファイルに関わらず、template/index.liquidにあるすべてのMissingTemplateエラーを無視します。
MissingTemplate:
ignore:
- templates/index.liquid
ignore_missingオプションは、レンダリングされる対象のテンプレートに基づいて、MissingTemplateのすべての発生を無視するように Theme Check に指示します。
例えば、以下の設定を使うと、テーマチェックはすべてのテーマファイルで {% render 'icon-missing' %} の違反を無視します。
MissingTemplate:
ignore_missing:
- snippets/icon-*
NestedSnippet
バージョン 0.1.0 以降
深く入れ子になった render タグや include タグを報告します。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
次の例では、一連の入れ子になったスニペットが含まれています。
{% render 'one' %}
{% render 'two' %}
{% render 'three' %}
{% render 'four' %}
ok
✓ Pass
次の例では、2 段階の入れ子だけのスニペットが含まれています。
{% render 'one' %}
{% render 'two' %}
ok
オプション
NestedSnippet:
enabled: true
max_nesting_level: 2
| パラメーター | 詳細 |
|---|---|
enabled |
このチェックが有効であるかどうか。 |
max_nesting_level |
スニペットをレンダリングする際の最大の深さ。 |
このチェックを無効にする
このチェックは無効にしても問題ありません。
PaginationSize
バージョン 1.1.0 以上
一度に多くのオブジェクトが読み込まれないように、オブジェクトがパフォーマンスの高いサイズでページ分割されるようにしました。これにより、レスポンスタイムを低く保つことができます。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
次の例では、ページネーションのサイズがmax_sizeの値を超えて、1 つのページに商品が多すぎる状態になっています。
{% paginate collection.products by 999 %}
✓ Pass
次の例では、パフォーマンスに悪影響を与えないページネーションのサイズを設定しています。
{% paginate collection.products by 12 %}
オプション
PaginationSize:
enabled: true
min_size: 1
max_size: 50
| パラメーター | 詳細 |
|---|---|
enabled |
このチェックを有効にするかどうか。 |
min_size |
有効なページネーションの最小サイズ |
max_size |
有効なページネーションの最大サイズ |
このチェックを無効にする
このチェックは無効にしても問題ありません。
ParserBlockingJavaScript
バージョン 0.3.0+。
defer属性やasync属性を持たない HTML script タグを識別します。
これらの属性が使われていない場合、スクリプトタグは、スクリプトが読み込まれ、解析され、実行されるまで、DOM の構築とレンダリングをブロックします。また、ネットワークの混雑を引き起こし、リソースの優先順位を混乱させ、ページのレンダリングを大幅に遅らせます。
Shopify テーマの JavaScript は、サイトの体験を徐々に向上させるために常に使用されるべきであることを考慮すると、テーマはパーサーブロックのスクリプトタグを決して使用してはいけません。
一般的なルールとして、実行順序が重要な場合はdeferを使用し、そうでない場合は async を使用してください。
テーマのパフォーマンスを向上させる方法については、こちらをご覧ください。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
この例では、インラインスクリプトが jQuery に依存しているため、jQuery を同期的にロードします。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
...
<button id="thing">Click me!</button>
<script>
$('#thing').click(() => {
alert('Oh. Hi Mark!');
});
</script>
✓ Pass
この例では、同期型の jQuery に代わるものが含まれています。script タグに defer 属性があるため、DOMContentLoaded が発生したときに jQuery がロードされることが保証されています。この手法は、jQuery に依存するテーマをリファクタリングする最初のステップとして使用できます。
<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
...
<button id="thing">Click me!</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
$('#thing').click(() => {
alert('Oh. Hi Mark!');
});
});
</script>
この例では jQuery を使用していません。
<button id="thing">Click Me</button>
<script>
const button = document.getElementById('thing');
button.addEventListener('click', () => {
alert('Oh. Hi Mark!');
});
</script>
このチェックを無効にする
ルール違反が避けられない場合は、コメント構文を使ってチェックを無効にしてください。これにより、各インスタンスに対して意図的にチェックを無効にすることができます。
このチェックを無効にすることは推奨されません。
{% comment %}theme-check-disable ParserBlockingJavaScript{% endcomment %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
{% comment %}theme-check-enable ParserBlockingJavaScript{% endcomment %}
ParserBlockingScriptTag
バージョン 0.9.0 以降
script_tagフィルタはパーサをブロックする script タグを出力します。
代わりに<script src="..." defer>または<script src="..." async>要素を使用してください。
テーマのパフォーマンスを向上させる方法については、こちらをご覧ください。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
次の例のscript_tagフィルタは、パーサーブロックのスクリプトを出力します。
{{ 'app-code.js' | asset_url | script_tag }}
✓ Pass
{% raw %} 次の例では、HTML の script タグにdefer属性をつけてasset_urlフィルターを使用しています。
<script src="{{ 'theme.js' | asset_url }}" defer></script>
次の例では、HTML の script タグに async 属性をつけて asset_url フィルターを使用しています。
<script src="{{ 'theme.js' | asset_url }}" async></script>
このチェックを無効にする
ルール違反が避けられない場合は、コメント構文を使ってチェックを無効にしてください。これにより、各インスタンスに対して意図的にチェックを無効にすることができます。
このチェックを無効にすることは推奨されません。
{% raw %}
{% comment %}theme-check-disable ParserBlockingScriptTag{% endcomment %}
{{ 'app-code.js' | asset_url | script_tag }}
{% comment %}theme-check-enable ParserBlockingScriptTag{% endcomment %}
RemoteAsset
バージョン 0.7.0 以上
アセットのホスティングにサードパーティのドメインを使用することを推奨しません。Shopify のコンテンツ配信ネットワーク(CDN)からできる限りの配信を行うべきです。アセットに同じホストを使用することで、不必要な HTTP 接続を避け、サーバーが HTTP/2 の優先順位付けを使用してブロックリソースの配信を優先することができます。Shopify サーバーでのアセットのホスティングについて詳しくはこちら。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
これらの例では、複数の接続がリソースを奪い合い、独立してダウンロードを加速させ、不適切な優先順位をつけています。
以下の例では、複数の CDN からアセットを取得しています。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
{{ "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" | stylesheet_tag }}
<img src="https://example.com/heart.png" ...>
次の例では、img_urlフィルターを使わずに画像を取得しています。
<img src="{{ image }}" ...>
✓ Pass
以下の例では、JavaScript、CSS、画像がすべて同じ接続から読み込まれています。ブラウザと CDN は、高速でダウンロードする「ホット」な接続を維持しながら、どのアセットを最初にダウンロードするかを適切に優先順位付けすることができます。
これは、次の例のように、これらの CDN からファイルをテーマのassets/フォルダに直接ダウンロードし、画像にimg_urlフィルタを使用することで実現できます。
<script src="{{ 'jquery.min.js' | asset_url }}" defer></script>
{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
<script src="{{ 'theme.js' | asset_url }}" defer></script>
{{ 'theme.css' | asset_url | stylesheet_tag }}
<img src="{{ image | img_url }}" ...>
このチェックを無効にする
この機能を無効にして、取得するリモートコンテンツが非常に動的であることを確認してください。
RequiredDirectories
バージョン 0.1.0 以上
テーマに必要なディレクトリが不足している場合に識別するようにしました。
このチェックを無効にする
このチェックは無効にしても安全で、shopify extension checkを実行するとデフォルトで無効になります。
RequiredLayoutThemeObject
バージョン 0.1.0 以上
theme.liquid レイアウトファイルに、必要な{{ content_for_header }}と{{ content_for_layout }}オブジェクトが含まれていることを確認します。
このチェックを無効にする
このチェックは無効にしても問題ありません。
SpaceInsideBraces
バージョン 0.1.0 以降
Liquid タグや変数内の不統一なスペーシングを識別します。間隔を一定にすることで、コードの検索性、読みやすさ、メンテナンス性が向上します。
このチェックは --auto-correct フラグを使って自動修正することができます。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
<!-- Around braces -->
{% assign x = 1%}
{{ x}}
{{x }}
<!-- After commas and semicolons -->
{% form 'type', object, key:value %}
{% endform %}
<!-- Around filter pipelines -->
{{ url | asset_url | img_tag }}
{% assign my_upcase_string = "Hello world"| upcase %}
<!-- Around symbol operators -->
{%- if target == product and product.price_varies -%}
{%- if product.featured_media.width >=165 -%}
✓ Pass
{% assign x = 1 %}
{{ x }}
{% form 'type', object, key: value, key2: value %}
{% endform %}
{{ "ignore:stuff, indeed" }}
{% render 'product-card',
product_card_product: product_recommendation,
show_vendor: section.settings.show_vendor,
media_size: section.settings.product_recommendations_image_ratio,
center_align_text: section.settings.center_align_text
%}
{{ url | asset_url | img_tag }}
{% assign my_upcase_string = "Hello world" | upcase %}
{%- if target == product and product.price_varies -%}
{%- if product.featured_media.width >= 165 -%}
自動補正
このチェックでは、{{ ... }}の周りのスペースを自動的にトリミングしたり、追加したりすることができます。
修正前
{{ x}}
{{x}}
{{ x }}
修正後
{{ x }}
このチェックを無効にする
このチェックは無効にしても問題ありません。
SyntaxError
バージョン 0.1.0 以上
液体の構文エラーを識別します。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
以下の例では、閉じ括弧 %} がありません。
{% include 'muffin'
{% assign foo = 1 }}
{% unknown %}
{% if collection | size > 0 %}
✓ Pass
{% include 'muffin' %}
{% assign foo = 1 %}
{% if collection.size > 0 %}
このチェックを無効にする
このチェックを無効にすることは推奨されません。
TemplateLength
バージョン 0.1.0 以上
Liquid の大きなテンプレートファイルを特定します。大きなテンプレートファイルを避けるためには、スニペットを使ってテーマをコンポーネント化してください。
オプション
TemplateLength:
enabled: true
max_length: 500
exclude_schema: true
exclude_stylesheet: true
exclude_javascript: true
| パラメーター | 詳細 |
|---|---|
enabled |
このチェックを有効にするかどうか |
max_length |
Liquid のテンプレート内で許容される最大の行数です。 |
exclude_schema |
テンプレート内のスキーマ行を行数カウントから除外するかどうか |
exclude_stylesheet |
テンプレート内のスタイルシートの行を行数カウントから除外するかどうか |
exclude_javascript |
テンプレート内の JavaScript の行を行数カウントから除外するかどうか |
このチェックを無効にする
このチェックは無効にしても問題ありません。
TranslationKeyExists
バージョン 0.1.0+の場合
存在しない翻訳への参照を識別します。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
{
"greetings": "Hello, world!",
"general": {
"close": "Close"
}
}
{{ "greetings" | t }}
{{ "general.close" | t }}
このチェックを無効にする
このチェックを無効にすることは推奨されません。
UndefinedObject
バージョン 0.1.0+の場合
未定義の Liquid オブジェクトへの参照を識別します。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
{% assign greetings = "Hello" %}
{% if greeting == "Hello" %}
{{ articl }}
{{ prodcut }}
✓ Pass
{% assign greetings = "Hello" %}
{% if greetings == "Hello" %}
{{ article }}
{{ product }}
オプション
UndefinedObject:
enabled: true
exclude_snippets: true
| パラメーター | 詳細 |
|---|---|
enabled |
このチェックを有効にするかどうか。 |
exclude_snippets |
スニペットファイル内の未定義オブジェクトをチェックするかどうか（オブジェクトが引数として定義されている場合もある） |
このチェックを無効にする
このチェックを無効にすることは推奨されません。
UnknownFilter
バージョン 0.1.0 以上
不明な Liquidフィルターへの参照を識別します。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
{{ x | some_unknown_filter }}
✓ Pass
{{ x | upcase }}
このチェックを無効にする
このチェックを無効にすることは推奨されません。
UnusedAssign
バージョン 0.1.0+の場合
使われていない変数定義を特定する。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
{% assign this_variable_is_not_used = 1 %}
✓ Pass
{% assign this_variable_is_used = 1 %}
{% if this_variable_is_used == 1 %}
<span>Hello!</span>
{% endif %}
このチェックを無効にする
このチェックは無効にしても安全です。
UnusedSnippet
バージョン 0.1.0 以上
使用されていないスニペットを識別します。例えば、テーマチェックでスニペットを使用しているrenderタグが見つからない場合、このチェックは失敗します。
このチェックを無効にする
このチェックは無効にしても問題ありません。
ValidHTMLTranslation
バージョン 0.1.0 以上
翻訳文中の不正な HTML を識別するようになりました。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
{
"hello_html": "<h2>Hello, world</h1>",
"image_html": "<a href='/cat'>Unclosed"
}
✓ Pass
{
"hello_html": "<h1>Hello, world</h1>",
"image_html": "<img src='cat.png'>",
"line_break_html": "<br>",
"self_closing_svg_html": "<svg />"
}
このチェックを無効にする
このチェックを無効にすることは推奨されません。
ValidJson
バージョン 0.1.0 以上
テーマに含まれる無効な JSON ファイルを特定する。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
{
"comma": "trailing"
}
{
"quotes": "These are single quotes"
}
✓ Pass
{
"comma": "not trailing"
}
{
"quotes": "This value uses double quotes"
}
このチェックを無効にする
このチェックを無効にすることは推奨されません。
ValidSchema
バージョン 0.1.0+の場合
{% schema %}タグ内の無効な JSON を識別します。
例
以下の例では、このチェックに失敗または合格したコードスニペットを紹介しています。
✗ Fail
{% schema %}
{
"comma": "trailing",
}
{% endschema %}
✓ Pass
{% schema %}
{
"comma": "not trailing"
}
{% endschema %}
このチェックを無効にする
このチェックを無効にすることは推奨されません。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion