Shopifyテーマ開発: 今必要なLiquidベストプラクティス

Shopifyのテーマプラットフォームは2026年上半期、ここ数年で最も急速に進化しました。Winter '26 Editionsで150以上の更新が提供され、Summer '26ではHorizonテーマシステムが導入されました。開発者にとって吸収すべき情報は膨大ですが、このポストでは日々のLiquid開発に実際に影響を与える変更に焦点を当てます。

Horizonシフト: コードに何をもたらすのか

2026年の最大の構造的変化はHorizonの登場です。Shopify Summer 2026 Editionsの一部としてリリースされたHorizonは、Fabric、Ritual、Vesselなどの名前を持つ10個の無料テーマで構成された完全に新しいテーマシステムで、特定の業界向けのコンバージョン最適化が施されています。

開発者が理解すべき構造的な飛躍はネストされたブロックシステムです。Horizonテーマは最大8レベルのネストされたブロックをサポートしており、Dawnおよび他のOnline Store 2.0テーマの2レベル制限と比較して大幅に強化されています。これは単なる見た目の向上ではありません。セクションスキーマの複雑さが増すことを意味します。Dawnで約20行だった簡単なヒーローセクションは、ネスト深度によってHorizonで60行を超える可能性があります。

Horizonでは、ブロックは単なるテキストや画像のプレースホルダーではなく、独自のアニメーションロジック、レイアウト動作、スタイルルールを持つ自己完結したUIコンポーネントを表します。Horizon用のカスタムセクションを構築する場合は、各ブロックをスタンドアロンコンポーネントとして扱います。明確な単一の責任を与え、{% style %}タグ内でブロックの一意なIDを使用してすべてのCSSをスコープし、常にアニメーションのオン/オフトグルを提供して、マーチャントがコードに触れずにアクセシビリティとパフォーマンスを調整できるようにしてください。

Horizonはまたグループブロックを導入しており、これによってヘッダー、製品グリッド、プロモーションバナーなどの関連要素を1つの再利用可能なユニットにバンドルできます。複数の製品ラインやシーズンキャンペーンを管理するチームにとって非常に有用です。

実用的な警告として: コアHorizonテーマファイルを直接変更すると、次の更新時に変更が上書きされます。常に/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クラスを定義している場合、定義ファイルが表示されないページではこれらのスタイルが含まれない可能性があります。共有CSSクラスが1つのファイルに存在しながら別のファイルから適用されているテーマを監査してください。スタイルをマークアップを所有するファイル内に自己完結させてください。

アセットキャッシング: ベアクエリ文字列を廃止 (2026年3月)

2026年3月のアセットキャッシング更新により、キャッシュバスティング用のURLのベアクエリ文字列のサポートが終了しました。asset_urlのようなLiquidフィルタを使用して、アセットが正しく更新され、読み込み時間が改善されることを確認してください。アセットURLのどこかに?v=123を手動で追加している場合は、やめてください。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オブジェクトから直接データにアクセスしてください。

{% include %}ではなく{% render %}を使用してください。廃止予定の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統合 自動デプロイメントとチーム協調

Section Rendering APIはそれが受けるよりも多くの注目に値します。セクションはAJAX経由で独立してレンダリングでき、フルリロードなしでより高速なページ遷移を可能にし、Liquidテーマ内のアプリのような体験の基礎を形成します。

LiquidとHydrogen: 正しい選択をする

数か月ごとに誰かがヘッドレスに移行すべきかどうかを尋ねてきます。2026年の正直な答えはこちらです: 相当な売上を行うDTCブランドの場合、Online Store 2.0を使用したLiquidは、より高速な開発、容易なマーチャント編集、低い保守コスト、およびShopifyがホスティングとCDNを処理することを通じて、より良いROIを提供します。Hydrogenは必ずしもLiquidより高速ではありません。パフォーマンスに影響を与えるものをより詳細に制御できますが、ボトルネックがテーマの肥大化、サードパーティスクリプト、またはメディアサイズが大きい場合、Hydrogenへの移行はそれを修正しません。

Liquidで実現できなくなった場合、かつエンジニアリング能力があってスタックを保守できるようになったときにのみヘッドレスに移行してください。

注目すべきある期限

あなたまたはクライアントがShopify Scriptsをまだ使用している場合、Shopify Functionsは2026年6月にScriptsを置き換え、より高速な実行と増加した互換性を提供します。その移行は必須です。Scriptsを使用しているストアを監査し、移行を今すぐ開始してください。

---

2026年のテーマプラットフォームは、チェンジログの最新情報を常に把握し、クリーンで自己完結したコンポーネントで構築する開発者に報酬を与えます。CSS サブセッティングの変更だけでも、維持しているすべてのアクティブなテーマに対して完全なスタイルシート監査を実行する十分な理由です。Horizonはショップが向かっている方向であり、ネストされたブロックアーキテクチャは今年内在化すべき重要なメンタルモデルです。