Shopify テーマ開発: 今すぐ実装すべき Liquid ベストプラクティス
2026年、Shopify のプラットフォームは急速に進化しました。すべてのテーマ開発者が今すぐ対応すべき Liquid パターン、Horizon インサイト、プラットフォームアップデートをご紹介します。
Shopify のテーマプラットフォームは、2026年の前半に過去数年間以上のペースで進化しました。150以上のアップデートを含む Winter '26 Editions の発表 と、Horizon テーマシステムを導入した Summer '26 リリースにより、開発者が習得すべきことがたくさんあります。このポストでは、ノイズを取り除き、日々の Liquid 作業に実際に影響を与える内容に焦点を当てています。
Horizon シフト: あなたのコードへの影響
2026年の最大の構造的変化は Horizon の到来です。Shopify Summer 2026 Editions の一部としてリリースされた Horizon は Fabric、Ritual、Vessel などの名称を持つ10個の無料テーマ上に構築された、まったく新しいテーマシステムです。それぞれが特定の業界向けのコンバージョン最適化を目的に設計されています。
開発者が理解すべき構造的な飛躍は、ネストされたブロックシステムです。 Horizon テーマは最大8レベルのネストされたブロックをサポートしており、これは Dawn およびその他の Online Store 2.0 テーマの2レベルの制限と比較して大きな進歩です。これは単なる見た目のアップグレードではありません。セクションスキーマの複雑性が増すことを意味します。Dawn では約20行の JSON だった単純なヒーローセクションは、ネストの深さにより Horizon では60行を超えることができます。
Horizon では、ブロックはテキストや画像の単なるプレースホルダーではなく、独自のアニメーションロジック、レイアウト動作、スタイルルールを持つ自己完結型 UI コンポーネントを表していることが多くあります。Horizon 向けにカスタムセクションを構築する場合は、すべてのブロックをスタンドアロンコンポーネントとして扱います。明確な単一責任を与え、{% style %} タグ内でブロックの一意の ID を使用してすべての CSS をスコープしてください。また、マーチャントがコードに触れずにアクセシビリティとパフォーマンスを調整できるよう、常にアニメーションのオン/オフトグルを提供してください。
Horizon はまた、グループブロックを導入しており、これにより、ヘッダー、商品グリッド、プロモーションバナーなどの関連要素を1つの再利用可能なユニットにバンドルできます。これは複数の商品ラインや季節ごとのキャンペーンを管理するチームにとって非常に有用です。
実用的な警告として、Horizon テーマのコアファイルを直接編集する場合、次回のアップデート時に変更が上書きされます。常に /blocks フォルダーにカスタムブロックを構築し、必要な部分だけを分岐させてください。
Horizon vs. Dawn: 主要な構造的違い
| 機能 | Dawn (Online Store 2.0) | Horizon |
|---|---|---|
| 最大ブロックネスト深度 | 2レベル | 8レベル |
| グループブロック | 非対応 | 対応(関連要素を再利用可能なユニットにバンドル) |
| 典型的なヒーローセクションスキーマサイズ | 約20行の JSON | 60行を超える JSON になる可能性あり |
| ブロックアニメーションロジック | 最小限、セクションレベルで処理 | ブロックごとのアニメーション、マーチャント向けオン/オフトグル付き |
| 安全なカスタマイズ場所 | セクションおよびスニペットファイル | /blocks フォルダー(コアファイルはアップデート時に上書き) |
今すぐ対応が必要なプラットフォーム変更
より厳密な Liquid パース(2026年1月)
Shopify は2026年1月から、信頼性を向上させ、今後の Liquid の改善を可能にするために、すべてのテーマに対してより厳密な Liquid パースの適用を開始しました。以前は機能していたずさんまたは技術的に無効な Liquid 構文を含む古いテーマがある場合、エラーが発生する可能性があります。次のデプロイ前に、Theme Check をコードベース全体で実行してください。
{% stylesheet %} タグの CSS コンテンツサブセット化(2026年4月)
これは Shopify 開発者チェンジログで アクション必須 とマークされており、多くの開発者がこれを見過ごしています。2026年4月20日から、Shopify は各ページに実装されたセクション、ブロック、スニペットに関連する {% stylesheet %} タグからの CSS のみを配信し、すべてのページロードですべてのスタイルシート CSS を提供するのではなくなります。
原理的には修正は簡単です。ファイルの {% stylesheet %} が他の無関係なファイルで HTML 要素によって使用される CSS クラスを定義している場合、これらのスタイルは定義ファイルがレンダリングされないページに含まれない可能性があります。1つのファイルに存在するが別のファイルから適用される共有 CSS クラスについて、テーマを監査してください。スタイルはマークアップを所有するファイル内で自己完結させてください。
アセットキャッシング: 素のクエリ文字列を廃止(2026年3月)
2026年3月のアセットキャッシングアップデートにより、キャッシュバスティング用の URL での素のクエリ文字列のサポートが終了しました。asset_url などの Liquid フィルターを使用して、アセットが正しく更新され、読み込み時間が改善されるようにしてください。どこかで ?v=123 をアセット URL に手動で追加している場合は、それをやめてください。asset_url フィルターがバージョン管理を処理してくれます。
アプリブロック制限の引き上げ(2026年2月)
より小さいながらも有用なアップデートとして、テーマアプリ拡張で最大30個のアプリブロックを定義できるようになり、以前の25個から増加しました。幅広いアプリ統合をサポートする必要があるテーマを構築する場合、これはより多くの余裕を提供します。
開発者を悩ませ続ける Liquid パフォーマンスパターン
プラットフォームアップデートはさておき、クライアント監査で最も多く見かけるパフォーマンスの誤りは、常に同じものです。以下は簡潔な一覧です。
ループ内で all_products を使用しないでください。 [ループ内でプロダクトオブジェクトを繰り返し取得する場合、例えば各カートアイテムに対して all_products[item.product.handle] を呼び出すと、アイテムごとに1つのデータベースクエリがトリガーされます。10個のカートアイテムがあると、ページレンダリング時間は2〜3秒増加する可能性があります](https://demetio.com/en/blog/shopify-liquid-best-practices/)。代わりに item オブジェクトからデータに直接アクセスしてください。
{% render %} を使用し、{% include %} は使用しないでください。 非推奨の include タグは親テンプレートの変数スコープを共有していたため、予期しない副作用とパフォーマンス低下が発生していました。render タグはスニペットスコープを完全に隔離します。常に変数を明示的に渡し、親スコープの継承に依存しないでください。
セクションを単一責任に保ってください。 ヒーローバナーセクションが商品推奨も処理すべきではありません。小さく焦点を絞ったセクションは保守が簡単で、マーチャントにテーマエディターでより多くのレイアウトの柔軟性を提供します。
すべてのブロックのトップレベル要素で {{ block.shopify_attributes }} を使用してください。 これがないと、テーマエディターは個別のブロックを選択、移動、または設定できません。これは基本的な要件ですが、世の中の多くのカスタムブロックから見逃されています。
文字列をハードコードしないでください。 ハードコードされた文字列は国際化を破壊し、マーチャントがテーマエディターの言語設定からテキストをカスタマイズすることを不可能にします。すべてのユーザー向け文字列は | t フィルター経由で処理される必要があります。
条件付きでスクリプトとスタイルを読み込んでください。 Liquid を使用してスクリプトとスタイルを条件付きで読み込むことで、Core Web Vitals パフォーマンスが向上し、ブロッキングリソースが削減されます。必要に応じて async または defer 戦略と組み合わせてください。
2026年のツールチェーン
すべてのプロジェクトでこれらのツールをまだ使用していない場合は、今日から始めてください。
- Shopify CLI: ローカルテーマ開発とホットリロードのため
- Shopify Liquid 拡張機能付き VS Code: シンタックスハイライトとオートコンプリートのため
- Theme Check 2.0: Shopify CLI に組み込まれた、デプロイ前にパフォーマンス問題、アクセシビリティの問題、非推奨パターンの使用を検出します
- Git とブランチベースのワークフロー: ライブテーマを直接編集しないようにするため
- GitHub 統合: 自動デプロイとチーム調整のため
Liquid vs. Hydrogen: 正しい判断を下す
数か月ごとに誰かが、ヘッドレスに移行すべきかどうか質問してきます。2026年の正直な答えは次の通りです。相当な収益を生み出す DTC ブランドの場合、Liquid と Online Store 2.0 の組み合わせは、より高速な開発、簡単なマーチャント編集、低いメンテナンスコスト、Shopify によるホスティング CDN 管理を通じて、より優れた ROI を提供します。 Hydrogen は自動的に Liquid より高速ではありません。パフォーマンスに影響を与える事柄についてより多くの制御を提供しますが、ボトルネックがテーマブロートウェア、サードパーティスクリプト、またはメディアサイズの問題である場合、Hydrogen に移行してもそれは解決されません。
Liquid でできることを真に超過し、スタックの保守に対応できるエンジニアリング能力がある場合にのみヘッドレスに移行してください。
ヘッドレス移行の準備ができている兆候
- チームが Liquid の制限を回避することに機能構築以上の時間を費やしている
- Section Rendering API がカバーできない複雑でアプリレベルのインタラクティビティが必要
- React または Remix スタックの保守に対応している専任フロントエンドエンジニアがいる
- パフォーマンスボトルネックが Liquid レンダリング(メディアまたはサードパーティスクリプトではなく)であることが確認されている
- Shopify Functions を超えるカスタムチェックアウトを含む外部システム(PIM、ERP、カスタムチェックアウト)との深い統合が必要
フラグを立てるべき期限
Shopify Scripts をまだ使用している場合、Shopify Functions は2026年6月に Scripts を置き換え、より高速な実行と互換性が向上します。その移行はオプションではありません。Scripts を使用しているストアを監査し、今すぐ移行を開始してください。
2026年のテーマプラットフォームは、チェンジログに近い開発者で、クリーンな自己完結型コンポーネントを構築することを報酬します。CSS サブセット化の変更だけでも、保守しているすべてのアクティブなテーマに対して完全なスタイルシート監査を行う十分な理由になります。Horizon は Shopify が進もうとしている方向であり、ネストされたブロック構造は今年内在化すべき考え方です。
よくある質問
テーマ開発者にとって、Horizon テーマと Dawn の最大の構造的違いは何ですか?
Horizon テーマは最大8レベルのネストされたブロックをサポートしており、これは Dawn およびその他の Online Store 2.0 テーマの2レベルの制限と比較して大きく異なります。つまり、セクションスキーマはより複雑になり、JSON テンプレートファイルは大幅に長くなるため、構築前にコンテンツ階層を計画することが必須です。
2026年4月の CSS コンテンツサブセット化の変更で何が破壊されましたか?
2026年4月20日から、Shopify は現在のページに実装されたセクションとブロックに関連する stylesheet タグからの CSS のみを提供します。テーマが1つのファイルにスタイルシートルールを持っており、それが完全に異なるファイルに存在する HTML 要素をスタイル設定している場合、定義ファイルがレンダリングされないページでこれらのスタイルが静かに消える可能性があります。各ファイルのスタイルが自己完結していることを確認するために、テーマを監査してください。
引き続き Liquid を学ぶか、それとも代わりに Hydrogen に時間を投資するべきですか?
Shopify ストアの大多数にとって、Liquid と Online Store 2.0 は2026年も正しい選択肢のままです。これは、Hydrogen ヘッドレスビルドと比較して、より高速な開発サイクル、より低いメンテナンスオーバーヘッド、およびより良い ROI を提供します。Hydrogen は、専任のフロントエンドエンジニアリングチームがあり、Liquid が真に対応できない要件がある場合にのみ理にかなっています。