Shopify Hydrogen、フレームワーク非依存のライブラリへ刷新

何が発表されたか

• Hydrogen 2026-10がGA。「HydrogenはどのJavaScriptフレームワークでも動く」とされ、リプラットフォームせずに既存アプリへShopifyのコマース機能を追加できるようになった。
• Hydrogenが担うのはカート、バリアント選択、購入者通貨での価格表示、同意に配慮したアナリティクス、Shop Pay、顧客ログイン。ルーティング・データ取得・レンダリングは利用側のフレームワークが担当する。
• コーディングエージェント向けのスキル20種が同梱。ストアフロントの各パーツを構築する手順をエージェントに教える内容で、スキルはプロジェクト内に置かれ、インストール済みHydrogenのバージョンに一致する。
• エージェントに「Set up my store with Shopify」と指示すると、ホーム・コレクション・検索・商品・カート・アカウントの各ページと、アナリティクス、スモークテストまで生成されるとしている。Hydrogenのアップグレード後は npx @shopify/hydrogen skills sync でスキルを更新する。
• スターターはReact RouterとNext.jsの2種。React RouterテンプレートはShopify管理画面からOxygenへデプロイできる。Next.jsはVercelが保守するHydrogenベースのストアフロント「Vercel Shop」をクローンして使う。

実務への影響

• 「既存のNext.jsサイトにカートとShop Payだけ足したい」という要望に、まともな選択肢が生まれた。コーポレートサイトへEC機能を部分追加する案件で、Shopify側の提案幅が広がる。
• 既存のHydrogenストアフロントは変更なしで動作し、Oxygenは引き続き無償。移行を急ぐ理由はないが、新規案件はライブラリ前提で設計したほうが後から動かしやすい。
• 同梱スキル20種は、Claude CodeなどのエージェントにHydrogenの作法を読ませる手間を省く。初期構築の工数は確実に下がるが、生成物のレビュー前提で見積もるべき。
• カートやアナリティクスは「同意に配慮した」実装が用意されている。日本国内案件でも改正電気通信事業法まわりの外部送信規律を説明する際、素のまま使える実装があるのは説明が楽になる。

利用条件

Oxygenへのデプロイは引き続き無償。ホスティング先は任意に選べる。