Hydrogen 2026-10 「フレームワーク」から「どこにでも入るライブラリ」へ

図解 ： Hydrogen 2026-10 正式リリース（どの JS フレームワークにも組み込めるコマースライブラリへ） Hydrogen / 正式リリース（GA） Hydrogen 2026-10 「フレームワーク」から「どこにでも入るライブラリ」へ 新しい Hydrogen は、どの JavaScript フレームワークでも使えるコマースライブラリになった。今のアプリにパッケージを足すだけで、カート・価格・分析・Shop Pay・ログインを Shopify 側が担ってくれる。リプラットフォームは不要。 このページの構成 そもそも何が変わるのか（30秒で理解） 仕組み図解 ： 役割分担 Hydrogen が引き受けるコマース機能 コーディングエージェント向け「20 のスキル」 ショッピングエージェントと共通カート契約 旧 Hydrogen vs 新 Hydrogen の比較 始め方（3つの入口） 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が変わるのか これまでの Hydrogen は React Router ベースの「フレームワーク」 で、カートや分析を使うにはストアフロント全体をその上に作る必要があった。 新しい Hydrogen は どの JavaScript フレームワークにも足せる「ライブラリ」 。6月の開発者プレビュー開始から、フィードバックをもとに 7 回のリリースを経て本日 GA。 従来 ： 全部 Hydrogen の上に作る カート・分析を使いたければ、ストアフロント全体を React Router ベースの Hydrogen で構築する必要があった。 新 ： 今のスタックに足すだけ 既存アプリにライブラリを追加すれば Shopify のコマースが入る。ルーティング・データ取得・レンダリング・デザインは自分のフレームワークのまま。 記事の言葉で言えば「新しい Hydrogen の大きなポイントは、 大ごとではないこと 」。リプラットフォームせずに導入できる。ホスティングもどこでも可。 Oxygen は引き続き無料 。 2 仕組み図解 ： 役割分担 スターター ： React Router と Next.js 向けにすぐデプロイできるスターターが用意済み。Vue ではコンポーザブルとして同じものが使え、その他のフレームワークはカートを直接 subscribe する。 3 Hydrogen が引き受けるコマース機能 どの Shopify ストアフロントにも必要で、 見た目より正しく作るのが難しい 部品を Hydrogen が肩代わりする。 カートの正しさ 「カートに追加」を 2 回タップしてもカートが正しく保たれる必要がある。 国・通貨に合った価格 価格は購入者の国と通貨に一致していなければならない（Markets 対応）。 同意を尊重する分析 同意を尊重しつつ Shopify に届かないと、レポートが沈黙してしまう。 Hydrogen が担う範囲（記事記載の 8 項目） Cart カート Variants 商品バリアント Filters コレクション絞込 Search 予測検索 Markets 国・通貨 Analytics 分析 Shop Pay Shop Pay Accounts 顧客アカウント つなぎのコードは数行（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 では同じものがコンポーザブルとして提供され、その他のフレームワークはカートを直接 subscribe する。 4 コーディングエージェント向け「20 のスキル」 作り方 失敗するたびに直して育てたスキル エージェントで実際にストアフロントを作り、エージェントが間違えるたびにスキルを修正して書かれた。ストアフロントの各部分をカバーする 20 本。 バージョン一致 スキルはプロジェクト内に置かれる インストールした Hydrogen のバージョンに合ったスキルが入るため、エージェントは「手元のコード」向けの指示に従う。アップグレード後は npx @shopify/hydrogen skills sync で更新。 # 既存プロジェクトで試す npx @shopify/hydrogen@latest setup # → エージェントに "Set up my store with Shopify." と頼む # Hydrogen をアップグレードしたらスキルも更新 npx @shopify/hydrogen skills sync 5 ショッピングエージェントと共通カート契約 WebMCP 何も作らずにエージェント購買に対応 WebMCP 対応ブラウザでは、エージェントがカタログ検索とカート更新を行い、購入者が確認した後に Shopify Checkout が complete_checkout で注文を送信できる。追加実装は不要。 共通契約 Liquid テーマと同じアクション Hydrogen は Liquid テーマと同じ標準ストアフロントアクションを使う。互換アプリ・ストアフロント UI・エージェントが同じカート契約を共有できる。 // アプリやエージェントは、自社 UI と同じアクションでカートに追加する await window.Shopify.actions.updateCart({ lines: [{ merchandiseId: "gid://shopify/ProductVariant/123", quantity: 1 }], }); 6 旧 Hydrogen vs 新 Hydrogen の比較 項目 これまでの Hydrogen Hydrogen 2026-10 位置づけ フレームワーク React Router ベース ライブラリ 任意の JS フレームワークに追加 カート・分析の利用条件 ストアフロント全体を Hydrogen 上に構築 既存アプリにパッケージを足すだけ ホスティング 記載なし どこでも可 Oxygen も引き続き無料 エージェント支援 記載なし 20 スキル同梱 バージョン一致・sync で更新 既存ストアフロント そのまま動き続ける。 今すぐやることは無い 。移行時は移行スキルがエージェントを案内し、ページとルートは残したまま「コマースコードの出どころ」だけを差し替える。 7 始め方（3つの入口） 1 既存プロジェクトに setup 自分のプロジェクトで npx @shopify/hydrogen@latest setup を実行。 2 Oxygen にテンプレをデプロイ Shopify 管理画面から React Router テンプレートを Oxygen にデプロイ。 3 Next.js なら Vercel Shop Hydrogen 上に構築され Vercel がメンテする Vercel Shop をクローン。 不足や不具合は Shopify 開発者コミュニティへ。コードは GitHub、ドキュメントは shopify.dev に公開されている。 8 技術者が押さえるべき5つのポイント 1. 責務分離が明確 ルーティング・データ取得・レンダリングはフレームワーク側、カート・価格・分析・Shop Pay・ログインは Hydrogen 側。設計時の境界が引きやすい。 2. カート契約は Liquid と共通 window.Shopify.actions.updateCart を自社 UI・互換アプリ・エージェントが共有。ヘッドレスでもテーマ用アプリとの互換が取りやすい。 3. スキルはバージョン固定で同梱 スキルはプロジェクト内に置かれ、インストール版と一致。 Hydrogen を上げたら skills sync を忘れない のが運用ルールになる。 4. 既存 Hydrogen は急がなくてよい 既存ストアフロントはそのまま動く。移行は移行スキル経由で、ページとルートを維持しつつコマースコードの供給元だけ差し替える方式。 5. エージェント購買は「WebMCP 対応ブラウザ」前提・購入者確認つき エージェントによる検索・カート更新は WebMCP をサポートするブラウザで動作し、注文送信は 購入者の確認後 に Shopify Checkout が complete_checkout で行う。対応ブラウザの具体名や料金への影響は記載なし。 9 業務に活かせる3つのユースケース USE CASE 1 既存の Next.js / Vue サイトに「後付けで EC 機能」 課題 ブランドサイトやメディアが Next.js や Vue で既に稼働しており、EC を始めるにはリプラットフォームか別ドメインの EC サイトが必要だった。 打ち手 既存プロジェクトで npx @shopify/hydrogen@latest setup → カート・バリアント・Shop Pay・顧客ログインを Hydrogen に任せ、デザインとルーティングは現行のまま。 効果 サイト作り直しなしでコマースを統合。カート二重追加や通貨表示など「正しく作るのが難しい部分」の自前実装を回避。 技術メモ React は createCartComponents 、Vue はコンポーザブル、その他はカートを直接 subscribe。Next.js は Vercel Shop も出発点に使える。 USE CASE 2 ヘッドレス構築の PoC をエージェントで短期立ち上げ 課題 ヘッドレス提案の PoC で、ホーム〜商品〜カート〜アカウントの一通りを作るまでに工数がかかる。 打ち手 setup 後、コーディングエージェントに "Set up my store with Shopify." と依頼し、主要ページ・分析・スモークテストまでを生成させ、そこからデザインを詰める。 効果 土台づくりをエージェントに任せ、人はブランド表現と業務要件に集中できる。 技術メモ スキルはインストール版と一致。Hydrogen を上げたら npx @shopify/hydrogen skills sync を CI やアップグレード手順に組み込む。 USE CASE 3 エージェント購買・外部アプリ連携に「追加実装なし」で備える 課題 AI エージェント経由の購買やカート連携アプリに対応したいが、独自 API の設計・保守は負担が大きい。 打ち手 Hydrogen ベースで構築し、カート操作を標準ストアフロントアクション（ updateCart ）に統一。自社 UI も同じアクションを使う。 効果 WebMCP 対応ブラウザのエージェントがカタログ検索・カート更新でき、購入者確認後は Shopify Checkout が注文送信。Liquid テーマ向けの互換アプリとも同じ契約で連携。 技術メモ 注文送信は complete_checkout （購入者確認後）。対応ブラウザの範囲は記事に記載なしのため、検証時に確認が必要。 10 提案で使える1行サマリ 「Hydrogen はフレームワークからライブラリへ。 今の JS スタックに足すだけで、カート・通貨・同意対応分析・Shop Pay・ログインを Shopify が担う。 エージェント用スキル 20 本同梱、ホスティング自由・Oxygen は無料、既存 Hydrogen はそのまま動く。」 source ： shopify.dev / changelog / hydrogen-2026-10-is-now-available published 2026-10-14