新しい Hydrogen は、どの JavaScript フレームワークでも使えるコマースライブラリになった。今のアプリにパッケージを足すだけで、カート・価格・分析・Shop Pay・ログインを Shopify 側が担ってくれる。リプラットフォームは不要。
カート・分析を使いたければ、ストアフロント全体を React Router ベースの Hydrogen で構築する必要があった。
既存アプリにライブラリを追加すれば Shopify のコマースが入る。ルーティング・データ取得・レンダリング・デザインは自分のフレームワークのまま。
どの Shopify ストアフロントにも必要で、見た目より正しく作るのが難しい部品を Hydrogen が肩代わりする。
「カートに追加」を 2 回タップしてもカートが正しく保たれる必要がある。
価格は購入者の国と通貨に一致していなければならない（Markets 対応）。
同意を尊重しつつ Shopify に届かないと、レポートが沈黙してしまう。
import { createCartComponents } from "@shopify/hydrogen/react";
const { CartProvider, useCart } = createCartComponents();
function CartCount() {
const count = useCart((cart) => cart.data.totalQuantity);
return <span>{count}</span>;
}
Vue では同じものがコンポーザブルとして提供され、その他のフレームワークはカートを直接 subscribe する。
エージェントで実際にストアフロントを作り、エージェントが間違えるたびにスキルを修正して書かれた。ストアフロントの各部分をカバーする 20 本。
インストールした Hydrogen のバージョンに合ったスキルが入るため、エージェントは「手元のコード」向けの指示に従う。アップグレード後は npx @shopify/hydrogen skills sync で更新。
# 既存プロジェクトで試す npx @shopify/hydrogen@latest setup # → エージェントに "Set up my store with Shopify." と頼む # Hydrogen をアップグレードしたらスキルも更新 npx @shopify/hydrogen skills sync
WebMCP 対応ブラウザでは、エージェントがカタログ検索とカート更新を行い、購入者が確認した後に Shopify Checkout が complete_checkout で注文を送信できる。追加実装は不要。
Hydrogen は Liquid テーマと同じ標準ストアフロントアクションを使う。互換アプリ・ストアフロント UI・エージェントが同じカート契約を共有できる。
// アプリやエージェントは、自社 UI と同じアクションでカートに追加する
await window.Shopify.actions.updateCart({
lines: [{ merchandiseId: "gid://shopify/ProductVariant/123", quantity: 1 }],
});
| 項目 | これまでの Hydrogen | Hydrogen 2026-10 |
|---|---|---|
| 位置づけ | フレームワーク React Router ベース | ライブラリ 任意の JS フレームワークに追加 |
| カート・分析の利用条件 | ストアフロント全体を Hydrogen 上に構築 | 既存アプリにパッケージを足すだけ |
| ホスティング | 記載なし | どこでも可 Oxygen も引き続き無料 |
| エージェント支援 | 記載なし | 20 スキル同梱 バージョン一致・sync で更新 |
| 既存ストアフロント | そのまま動き続ける。今すぐやることは無い。移行時は移行スキルがエージェントを案内し、ページとルートは残したまま「コマースコードの出どころ」だけを差し替える。 | |
自分のプロジェクトで npx @shopify/hydrogen@latest setup を実行。
Shopify 管理画面から React Router テンプレートを Oxygen にデプロイ。
Hydrogen 上に構築され Vercel がメンテする Vercel Shop をクローン。
ルーティング・データ取得・レンダリングはフレームワーク側、カート・価格・分析・Shop Pay・ログインは Hydrogen 側。設計時の境界が引きやすい。
window.Shopify.actions.updateCart を自社 UI・互換アプリ・エージェントが共有。ヘッドレスでもテーマ用アプリとの互換が取りやすい。
スキルはプロジェクト内に置かれ、インストール版と一致。Hydrogen を上げたら skills sync を忘れないのが運用ルールになる。
既存ストアフロントはそのまま動く。移行は移行スキル経由で、ページとルートを維持しつつコマースコードの供給元だけ差し替える方式。
エージェントによる検索・カート更新は WebMCP をサポートするブラウザで動作し、注文送信は購入者の確認後に Shopify Checkout が complete_checkout で行う。対応ブラウザの具体名や料金への影響は記載なし。
npx @shopify/hydrogen@latest setup → カート・バリアント・Shop Pay・顧客ログインを Hydrogen に任せ、デザインとルーティングは現行のまま。createCartComponents、Vue はコンポーザブル、その他はカートを直接 subscribe。Next.js は Vercel Shop も出発点に使える。npx @shopify/hydrogen skills sync を CI やアップグレード手順に組み込む。updateCart）に統一。自社 UI も同じアクションを使う。complete_checkout（購入者確認後）。対応ブラウザの範囲は記事に記載なしのため、検証時に確認が必要。