記事のサマリー（TL;DR）
- Storefront API のカタログデータをエッジでキャッシュし、リクエストごとのAPI呼び出しを削減
- WebMCP ツールにより、ブラウザ内 AI エージェントがカタログ検索・カート操作を自動実行可能に
- Customer Account API・型付きルート・同一オリジン予測検索など、ログイン体験・URL管理を一元化
Shopify Plus ヘッドレス開発者が押さえるべき Hydrogen プレビューの変更点
Hydrogen は Shopify が提供する React ベースのヘッドレスコマースフレームワークであり、Shopify Plus を利用する大規模 EC 事業者のカスタムストアフロント構築基盤として国内でも採用が広がっています。
今回のデベロッパープレビュー更新で最も注目すべきは WebMCP ツールの追加です。Shopify の CDN から自動ロードされるため追加インテグレーション不要でブラウザ内 AI エージェントにストアフロントを公開でき、AI による商品検索やカート操作を実装できます。MCP（Model Context Protocol）を活用した AI エージェント連携を検討している開発チームにとって、ストアフロント側の対応コストを大幅に下げる仕組みといえます。
また、Customer Account API の正式サポートにより、注文履歴・プロフィールページなどのログイン済みユーザー向け機能を、ログイン・トークンリフレッシュ・ログアウトを一括処理する型付きクライアントで構築できるようになりました。Shopify Plus の B2B 機能と組み合わせることで、企業向けポータルの認証フローを標準化しやすくなります。
同一オリジン予測検索はブラウザから Storefront API を直接呼び出す代わりに自社サーバー経由でオートコンプリートを動作させる仕組みで、CSP（コンテンツセキュリティポリシー）制約が厳しい環境でも安定した予測検索を実装できます。
詳細
Storefront API カタログデータのキャッシュ（Storefront API Caching for Catalog Data）
商品・コレクション・ページなどのカタログデータを、リクエストごとに Storefront API を叩くのではなくエッジでキャッシュできるようになりました。ページロードの高速化と API レートリミットの消費抑制が同時に見込まれます。トラフィックが集中するセール期間中のパフォーマンス安定化にも直接寄与する機能です。
ブラウザ内 AI エージェント向け WebMCP ツール（WebMCP Tools for In-Browser AI Agents）
ストアフロントをブラウザ内 AI エージェントに公開するためのツールセットです。AI エージェントはカタログ検索・商品閲覧・カート管理を実行できます。Shopify の CDN から自動ロードされるため、開発者側での追加インテグレーションは不要です。MCP を介した AI ショッピングアシスタントの実装において、クライアントサイドの対応を最小限に抑えられる点が特徴です。
Customer Account API サポート（Customer Account API Support）
ログイン済みユーザー向けの体験（注文履歴・プロフィールページなど）を型付きクライアントで構築できます。ログイン・トークンリフレッシュ・ログアウトの処理がクライアントに組み込まれており、認証周りのボイラープレートコードを削減できます。
同一オリジン予測検索（Same-Origin Predictive Search）
ブラウザから Storefront API を直接呼び出すのではなく、自社サーバー経由でオートコンプリート検索を動作させる機能です。セキュリティポリシーが厳格な環境での運用や、検索ログを自社インフラ側で収集したいケースに対応しやすくなります。
型付きルートとリダイレクト（Typed Routes and Redirects）
URL 構造を一度定義すれば、リダイレクト・予測検索 URL・Shopify 標準のリソースマッピングに再利用できます。URL 管理の分散による設定ミスを防ぎ、大規模なカタログ構成でも一貫したルーティングを維持できます。
ShopifyScripts とカートルート統合（ShopifyScripts for Shopify Browser Runtime and Unified Cart Route Handling）
Shopify 標準のスクリプトタグとブラウザランタイムを1か所でレンダリングし、カートルートをフレームワーク横断で機能する単一の登録ポイントで処理します。複数フレームワークを併用した構成でのカート実装の統一が図れます。
始め方
- デベロッパープレビューのドキュメント（Hydrogen developer preview documentation）からスタート
- 詳細な変更内容はフルリリースノート（full release notes）を参照