本文へスキップ
MameTechNews
フロントエンド

Shopify、Hydrogenをフレームワーク非依存のライブラリとして一般提供

## POINTS

  • フレームワーク全体の乗り換えをやめ、今のアプリに商取引機能だけを足す形になった。
  • スキルはインストールした版に追随し、更新後はskills syncでエージェント向け手順を揃える。
  • 既存のHydrogenストアフロントはそのまま動き、移行後もページとルートは残る。

Shopifyは10月14日、6月の開発者プレビューから7回リリースしたHydrogenを、2026-10として一般提供した。これまでのHydrogenはReact Router上のフレームワークで、カートや計測を使うにはストアフロント全体をその上に載せていた。今回からはライブラリになり、ルーティングと描画は今のフレームワークに残したまま、商取引の部分だけを足せる。

ライブラリが引き受けるのは、二重タップでも崩れないカート、国と通貨に合った価格、コレクションの絞り込み、予測検索、Markets、同意を尊重してShopifyへ届く計測、Shop Pay、顧客アカウントだ。ホスティングはOxygenを含め任意で、Oxygenは引き続き無料だとShopifyは書いている。React Routerのテンプレートは管理画面からOxygenへ出せる。Next.jsでは、Vercelが保守するVercel Shopをクローンする導線がある。

エージェント向けには20個のスキルが入り、導入したHydrogenの版に合わせてプロジェクト内に置かれる。npx @shopify/hydrogen@latest setupのあと、エージェントに店のセットアップを頼むと、ホームからアカウントまでのページ、計測、スモークテストまで進める、という説明だ。版を上げたあとはnpx @shopify/hydrogen skills syncでスキルを揃える。WebMCPに対応したブラウザでは、買い物エージェントがカタログ検索とカート更新を行い、購入者が確認したあとcomplete_checkoutでShopify Checkoutが注文を確定できる。既存のHydrogenストアフロントはそのまま動き、移行はページとルートを残して商取引コードの出どころを入れ替える。

Shopify上に店を持つチームは、フレームワークを乗り換える前提を外してカートと計測を見直せる。エージェントに店を作らせる場合は、同梱スキルが実装の根拠になる。