記事のサマリー（TL;DR）
- Shopifyは新しいHydrogenを2026年10月14日（水）に一般提供（GA）開始しました。6月に開発者プレビューを開始して以来、開発者からのフィードバックを基に7回のリリースを重ねてきました。
- 新しいHydrogenは特定フレームワークに縛られるものではなく、任意のJavaScriptフレームワークで動作します。リプラットフォーム（基盤の作り直し）をしなくても、ライブラリをアプリに追加するだけでShopifyのコマース機能を自分のスタックに組み込めます。
- Hydrogenはカート、バリエーション選択、購入者通貨での価格表示、同意に配慮したアナリティクス、Shop Pay、顧客ログインといったコマース処理を担います。React RouterおよびNext.js向けのスターターが用意されており、Oxygen（引き続き無料）を含む任意の環境にホスティングできます。
従来からの変更点と利用方法
HydrogenはこれまでReact Routerを基盤としたフレームワークであり、そのカートやアナリティクス機能を使うには、ストアフロント全体をHydrogen上に構築する必要がありました。新しいHydrogenはライブラリとなったため、既にある任意のフレームワークに追加し、好きな場所にホスティングできます。Oxygenは引き続き無料で利用可能です。
既存のHydrogenストアフロントは、これまで通り動作を継続し、発表時点で既存ストアフロントに必須の対応はないとしています。移行する準備ができた際には、マイグレーションスキルがコーディングエージェントの作業を補助します。ページやルートはそのまま維持し、コマース処理のコード部分だけを差し替える形になります。
既存プロジェクトで試す場合は、npx @shopify/hydrogen@latest setup を実行し、エージェントに「Set up my store with Shopify」と指示します。
詳細
Hydrogenが担うコマース処理
どのShopifyストアフロントにも共通して必要なコマースの要素があり、それらは見かけ以上に正しく実装するのが難しいと説明されています。例えば、購入者が「カートに追加」を2回タップしてもカートの内容が正しく保たれる必要があります。価格は購入者の国・通貨に一致している必要があります。アナリティクスは同意を尊重しつつ、Shopifyに確実にデータを送る必要があり、そうでなければレポートが機能しなくなります。
Hydrogenはこれらを代わりに処理します。対象はカート、商品バリエーション、コレクションのフィルタ、予測検索、Markets、アナリティクス、Shop Pay、顧客アカウントです。ルーティング、データ読み込み、レンダリングはフレームワーク側が担い、デザインは開発者側の裁量です。
連携に必要なコード（グルーコード）は数行で済みます。例えば、Reactでカート内の商品数をリアルタイム表示する場合、以下のようなコードになります。
import { createCartComponents } from "@shopify/hydrogen/react";
const { CartProvider, useCart } = createCartComponents();
function CartCount() {
const count = useCart((cart) => cart.data.totalQuantity);
return <span>{count}</span>;
}
Vueでは同等の機能がコンポーザブルとして提供されており、その他のフレームワークはカートを直接サブスクライブします。
コーディングエージェント向けの20個のスキル
Hydrogenには、コーディングエージェントに使い方を教える20個のスキルが同梱されています。これらはストアフロントの各パートを網羅しており、Shopifyはエージェントを使って実際にストアフロントを構築し、エージェントが誤りを起こすたびにスキルを修正するという方法で作成したと説明しています。
エージェントに「Set up my store with Shopify」と依頼すると、ホーム、コレクション、検索、商品、カート、アカウントの各ページを構築し、アナリティクスを追加し、結果に対してスモークテストを実行します。スキルはプロジェクト内に配置され、インストールされているHydrogenのバージョンに対応するため、エージェントは実際に使っているコードに沿った指示に従います。Hydrogenのバージョンをアップグレードした後は、npx @shopify/hydrogen skills sync でスキルを更新できます。
ショッピングエージェントとの連携
Hydrogenのストアフロントはショッピングエージェントとも連携します。WebMCPをサポートするブラウザでは、エージェントがカタログを検索しカートを更新でき、購入者が確認した後、Shopify Checkoutがcomplete_checkoutで注文を送信できます。これを実現するために追加の実装は不要とされています。
HydrogenはLiquidテーマと同じ標準ストアフロントアクションを使用しているため、互換性のあるアプリ、ストアフロントUI、エージェントは同一のカート契約を共有できます。アプリやエージェントは、開発者自身のUIが使うのと同じアクションを呼び出してカートに追加します。
await window.Shopify.actions.updateCart({
lines: [{ merchandiseId: "gid://shopify/ProductVariant/123", quantity: 1 }],
});
始め方
利用を開始する方法としては、以下が挙げられています。
- 自分のプロジェクトで
npx @shopify/hydrogen@latest setupを実行する。 - Shopify管理画面からReact RouterテンプレートをOxygenにデプロイする。
- Next.jsを使用している場合は、Vercelが保守するHydrogenベースのストアフロントであるVercel Shopをクローンする。
不具合や不足している点があれば、Shopify開発者コミュニティへの報告が案内されています。コードはGitHub上に、ドキュメントはshopify.devに公開されています。
関連資料：公式移行手順、Hydrogenドキュメント