Shopifyでは、CSSやJSなどのストアアセットへのバージョニングクエリパラメータのフォーマットが更新され、その結果、技術的な課題が発生しています。

1. 技術的課題の定義と現状分析

以前は、一部のアセットでは裸の数値クエリパラメータ（例：?108）を使用していましたが、他のアセットではvクエリパラメータを用いたキーバリューフォーマットを使用していました。しかし、今後は全てのアセットURLで一貫して?v=VERSION_STRING形式のバージョン指定を行うようになります。この新しいフォーマットは、Liquidタグによって返され、ShopifyがレンダリングしたストアフロントHTMLに存在します。

2. 具体的な技術的ソリューションの提案

例えば、以前は次のようなアセットURLが使用されていました： https://shop.example.com/cdn/shop/t/7/compiled_assets/styles.css?108

これが次のように変更されます： https://shop.example.com/cdn/shop/t/7/compiled_assets/styles.css?v=108

これらの変更は、今後のインフラ改善を支えるために行われています。

3. 実装手順とコード例

多くのテーマでは変更は必要ありません。 標準のLiquidアセットフィルタを利用してURLを生成するテーマは、自動的に更新されたフォーマットを出力します。

しかし、アセットURLを使用するアプリケーションやカスタムテーマコードでは、それらが古い裸の数値形式で表現されることを必要としないように確認する必要があります。クエリストリングが数字のみで終わることを期待する正規表現やロジックは、?v=形式をサポートするように更新する必要があります。

4. パフォーマンス・コスト分析

この変更は、Shopifyのパフォーマンス最適化とインフラ改善の一環であり、アセットのバージョニング管理を一元化し、結果的にコードの整理と保守性の向上に寄与します。また、アセットURLの一貫性は、エンドユーザーにとってのサイトの読み込み速度の改善にもつながります。

5. 実装時の注意点・ベストプラクティス

この変更に対応するため、アプリケーションやカスタムテーマコードが古い裸の数値形式を必要としないようにするための正規表現やロジックの更新が必要です。また、これはShopify内のインフラスタンダードの変更であり、将来的なバージョンアップデートにも対応しやすくなるため、この変更を導入することを強くお勧めします。

6. 次のステップ・発展案

今後のShopifyのインフラ改善に向けて、この変更を適用し、アセットURLの統一的なバージョニング管理を実現することで、より効率的でスケーラブルなShopifyストアを構築できます。

参考記事: Standardization of Asset URL Version Parameters