開発者向けの変更です。Hydrogen 2026-10 が正式提供になりました。
掲載は2026年10月14日、shopify.dev の Changelog。
出典: Shopify Developer Changelog「Hydrogen 2026-10 is now available」2026年10月14日
https://shopify.dev/changelog/hydrogen-2026-10-is-now-available
- Version: 2026-10
- Flags: New
- Affected APIs: Hydrogen
新しい Hydrogen は、今日から正式提供です
6月に始まった開発者向けのプレビューを経ての提供。
The new Hydrogen is generally available today. Since the developer preview started in June, we’ve shipped seven releases based on feedback from developers using it.
（新しい Hydrogen は、今日から一般提供です。6月に開発者向けのプレビューを始めてから、使っている開発者の意見をもとに7回のリリースを出してきました）
- 状態: 一般提供＝”generally available”
- プレビューの開始: 6月
- 年は原文の該当文に書かれていません
どの JavaScript フレームワークにも足せるライブラリになりました
作り直しをせずに、今のアプリに足す形です。
The big deal about the new Hydrogen is that it isn’t a big deal: Hydrogen now works with any JavaScript framework. You can bring Shopify’s commerce to your stack just by adding the library to your app, instead of needing to replatform.
（新しい Hydrogen の大きな点は、大ごとではないことです。Hydrogen は、どの JavaScript フレームワークでも動くようになりました。プラットフォームを移し替えなくても、ライブラリをアプリに足すだけで、Shopify のコマースを今の構成に持ち込めます）
これまでとの違いは、原文がこう書いています。
Hydrogen used to be a framework built on React Router. To use its cart or analytics, you built your whole storefront on it. Now it’s a library, so you can add it to the framework you already use and host it wherever you want. Oxygen is still free.
- これまで: React Router の上に作られたフレームワーク
- これから: 今使っているフレームワークに足すライブラリ
- 置き場所: どこでもよい、と原文に記載
- Oxygen: 引き続き無料
カートや価格の表示は、Hydrogen が受け持ちます
ストアフロントに共通の部品を、Hydrogen がまとめて扱います。
Hydrogen handles those for you: the cart, product variants, collection filters, predictive search, Markets, analytics, Shop Pay, and customer accounts. Your framework keeps routing, data loading, and rendering, and the design is all yours.
（Hydrogen がそれらを受け持ちます。カート、商品のバリエーション、コレクションの絞り込み、予測検索、Markets、分析、Shop Pay、顧客アカウントです。ルーティング、データの読み込み、描画はフレームワークのまま、デザインはすべて作り手のものです）
- Hydrogen の側: カート、バリエーション、絞り込み、予測検索、Markets、分析、Shop Pay、顧客アカウント
- フレームワークの側: ルーティング、データの読み込み、描画
- デザイン: 作り手の自由
- 用意された土台: React Router と Next.js の starter
原文は、分析について同意を尊重する形で扱うと書いています。
Hydrogen then handles commerce for you: the cart, variant selection, prices in the buyer’s currency, analytics that respect consent, Shop Pay, and customer login. React Router and Next.js have starters ready to deploy, and you can host it anywhere, including Oxygen, which is still free.
コーディングエージェント向けのスキルが付いています
ストアフロントの各部分を、エージェントに教えるためのものです。
Hydrogen comes with 20 skills that teach coding agents how to use it, covering each part of a storefront. We wrote them by building storefronts with agents and fixing the skill every time an agent got something wrong. Ask your agent to “Set up my store with Shopify,” and it builds the home, collection, search, product, cart, and account pages, adds analytics, and smoke-tests the result.
（Hydrogen には、コーディングエージェントに使い方を教える20のスキルが付いており、ストアフロントの各部分をカバーします。エージェントでストアフロントを作り、エージェントが間違えるたびにスキルを直して書きました。エージェントに “Set up my store with Shopify” と頼むと、ホーム、コレクション、検索、商品、カート、アカウントのページを作り、分析を足し、結果を簡単に確かめます）
- 置き場所: プロジェクトの中
- 版: インストールした Hydrogen の版に合う
- 更新: Hydrogen の版を上げた後に、スキルを同期するコマンドがある
The skills live in your project and match the version of Hydrogen you installed, so your agent follows instructions for the code you actually have. After you upgrade Hydrogen versions, you can update the skills with npx @shopify /hydrogen skills sync .
買い物をするエージェントからも、カートを操作できるとしています
条件は、WebMCP に対応したブラウザです。
Hydrogen storefronts also work with shopping agents. In browsers that support WebMCP, an agent can search your catalog and update the cart, and after the buyer confirms, Shopify Checkout can submit the order with complete _checkout . You don’t have to build anything for it.
（Hydrogen のストアフロントは、買い物をするエージェントとも動きます。WebMCP に対応したブラウザでは、エージェントがカタログを検索してカートを更新でき、購入者が確認した後に、Shopify Checkout が complete _checkout で注文を送れます。そのために作るものはありません）
- 条件: WebMCP に対応したブラウザ
- エージェントができること: カタログの検索、カートの更新
- 注文の送信: 購入者の確認の後
- 作り手の作業: 原文は “You don’t have to build anything for it.”
Liquid のテーマと同じ、標準のストアフロントの操作を使う、とも書いています。
Hydrogen uses the same standard storefront actions as Liquid themes, so compatible apps, storefront UI, and agents can share the same cart contract.
今の Hydrogen のストアは、そのまま動きます
今日の時点で、やることは無いと原文は書いています。
Existing Hydrogen storefronts keep working as they do now, and there’s nothing you need to do today. When you’re ready to move, the migration skill walks your agent through it. You keep your pages and routes and swap where the commerce code comes from.
（今の Hydrogen のストアフロントはこれまでどおり動き、今日やらなければならないことはありません。移る準備ができたら、移行のスキルがエージェントを案内します。ページとルートはそのままで、コマースのコードの出どころを入れ替えます）
- 今のストア: これまでどおり動く
- 今日の対応: 不要
- 移るとき: 移行のスキルを使う
- 残るもの: ページとルート
🔴 公式に書かれていないこと
- 今の Hydrogen のストアが、いつまで今の形で動くかは書かれていません。期限の記載はありません
- 移行が必須になる時期は書かれていません
- 日本のストアや、日本語の表示についての扱いは書かれていません
- 対象のプランは書かれていません
- WebMCP に対応したブラウザがどれかは、この Changelog には書かれていません
- React 以外のフレームワークで、カートの数をどう扱うかのコード例は書かれていません。原文は Vue について “the same thing as a composable”、ほかについて “other frameworks subscribe to the cart directly” とだけ書きます
- 店主が管理画面で見て分かる変化は書かれていません
- 原文のリンク先（GitHub・docs・Hydrogen のサイト・Vercel Shop）の中身は、本記事では見ていません
- 🔴 記載が無いことをもって「移行が要る」とも「要らない」とも書きません
始め方は、原文に3つ挙がっています
原文は、始め方を3つ挙げています。
There are a few ways to get started:
Run npx @shopify /hydrogen@latest setup in your own project.
Deploy the React Router template to Oxygen from your Shopify admin.
If you use Next.js, clone Vercel Shop , a storefront built on Hydrogen and maintained by Vercel.
- 今のプロジェクトがある: setup のコマンドを回す
- React Router で始める: 管理画面からテンプレートを Oxygen にデプロイ
- Next.js を使っている: Vercel が保守する Vercel Shop を複製
不具合や足りない点は、Shopify の開発者コミュニティに伝える形です。
🔵 上の振り分けは原文の3つを並べ直したもので、どれを選ぶべきかの公式の推奨ではありません。
🔵 左側の見出しのうち「今のプロジェクトがある」「React Router で始める」は、キクシル編集部の言い換えで、公式の記載ではありません。
🔵 「Next.js を使っている」は原文の “If you use Next.js” の訳です。
出典
- Shopify Developer Changelog「Hydrogen 2026-10 is now available」2026年10月14日
https://shopify.dev/changelog/hydrogen-2026-10-is-now-available
上記の Shopify 公式の情報だけを一次情報として使っています。
次の事項は「未確認」として扱い、推測で補っていません。
- 今の Hydrogen のストアの提供期限と、移行が必須になる時期
- 日本のストアへの扱いと、対象のプラン
- WebMCP に対応したブラウザ
- 原文のリンク先の中身
