Hydrogen developer preview コマースの中身を「React Router の外」へ出す次世代 Hydrogen

図解 ： Hydrogen developer preview（フレームワーク非依存コアへ） Hydrogen / 開発者プレビュー Hydrogen developer preview コマースの中身を「React Router の外」へ出す次世代 Hydrogen 次バージョンの Hydrogen は、コマースのロジックを React Router から切り離し、フレームワーク非依存のコアに移す。任意の JavaScript フレームワークで Shopify の「コマースプリミティブ」を使ってストアフロントを構築でき、コーディングエージェントが雛形生成に使う skills も同梱。まだ早期プレビューで、フィードバックを募集中。 このページの構成 そもそも何が変わるのか（30秒で理解） 構造図解 ： React Router 結合 → コア分離 3 つの目玉 従来 Hydrogen vs 次バージョンの比較 現在のステータス（早期プレビュー） 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が変わるのか 今までの Hydrogen は React Router（Remix 系）に強く結びついた ストアフレームワークだった。 次バージョンは、 コマースのロジックを React Router の外に出して「フレームワーク非依存のコア」 にする。 その結果、React Router 以外の好きな JavaScript フレームワークでも Shopify のコマース機能を使ってストアフロントが作れるようになる。 従来 ： React Router と一体 コマースのロジックが React Router に組み込まれている。Hydrogen を使う＝実質 React Router を使うこと。 次バージョン ： コアを分離 コマースロジックを独立したコアに切り出し、任意の JS フレームワークから「コマースプリミティブ」として呼べる。 2 構造図解 ： 結合からコア分離へ 「コマースプリミティブ（commerce primitives）」 とは ： カート・商品・チェックアウト等のコマース処理を、特定フレームワークに依存しない部品として提供するもの、という位置づけ。これを任意の JS フレームワークから組み立ててストアフロントを作る、という構図になる。 ※ 個々のプリミティブの API 名・粒度などの具体は元記事に 記載なし 。 3 3 つの目玉 ① コアの分離 コマースロジックを React Router の外へ。フレームワーク非依存のコアに集約する。 ② どの JS FW でも作れる 任意の JavaScript フレームワークで、Shopify のコマースプリミティブを使ってストアフロントを構築できる。 ③ エージェント用 skills 同梱 コーディングエージェントがストアフロントの雛形（scaffold）を自動生成するための skills が同梱される。 4 従来 Hydrogen vs 次バージョンの比較 項目 従来の Hydrogen 次バージョン（developer preview） コマースロジックの置き場 結合 React Router の中 分離 フレームワーク非依存コア 使えるフレームワーク React Router 中心 任意の JS FW 提供形態 フレームワーク コマースプリミティブ（部品） エージェント支援 記載なし skills 同梱 雛形を自動生成 提供ステータス — 早期プレビュー フィードバック募集中 5 現在のステータス（早期プレビュー） 早期の developer preview これは「early developer preview」であり、開発を継続しながら作り込んでいる段階。本番採用の可否・安定度については元記事に 記載なし 。 フィードバック募集中 Shopify は利用者からのフィードバックを求めている。詳細は GitHub の「Hydrogen Developer Preview」で確認できる、とされている。 対応バージョン番号・リリース時期・移行手順・対応フレームワークの具体名（React 以外で何が動くか）などは、元記事には 記載なし 。詳細仕様は GitHub のプレビュー情報を一次情報として確認すること。 6 技術者が押さえるべき5つのポイント 1. 関心の分離が本質 「コマースロジック」と「レンダリング/ルーティングのフレームワーク」を切り離す設計変更。フレームワークは選択肢になり、コマースはコアに固定される。 2. React Router 前提が外れる これまで実質必須だった React Router が必須ではなくなる方向。React Router でも引き続き使えるが、他の JS フレームワークも選べる。 3. プリミティブの具体仕様は未開示 「commerce primitives」という方向性は示されたが、API 名・粒度・パッケージ構成は元記事に記載なし。GitHub のプレビューで一次確認が必要。 4. skills でエージェント scaffold コーディングエージェントが skills を使ってストアフロントの雛形を生成する前提。エージェント駆動の開発フローが想定されている。 5. まだ early preview ＝ 変わる前提で触る 早期プレビューで開発継続中。インターフェースや構成は今後変わりうる。 本番投入よりも検証・フィードバック目的での試用が現実的 。安定版時期・後方互換の保証は元記事に記載なし。 7 業務に活かせる3つのユースケース USE CASE 1 React 以外の技術スタックを持つチームでも Shopify ストアフロントを内製 課題 社内のフロント標準が React Router 系ではなく、従来 Hydrogen を採用しづらかった。 打ち手 コマースコアを使い、自社が得意な JS フレームワークでストアフロントを構築する方針に切り替える。 効果 既存スキルセットを活かしたまま Shopify のコマース機能を取り込める。学習コスト・採用障壁の低下。 技術メモ 対応フレームワークの具体名・制約は元記事に記載なし。GitHub プレビューで実際に動く構成を要確認。 USE CASE 2 コーディングエージェントでストアフロントの初期構築を高速化 課題 新規ストアフロント案件の立ち上げで、雛形作成や定型のセットアップに時間がかかる。 打ち手 同梱の skills を使い、コーディングエージェントにストアフロントの scaffold を生成させてから細部を作り込む。 効果 初期構築の工数削減。エンジニアが要件固有のロジックに集中できる。 技術メモ skills の具体的な利用手順・対応エージェントの詳細は元記事に記載なし。GitHub プレビューを参照。 USE CASE 3 次世代 Hydrogen の事前検証 ＆ フィードバック提出 課題 将来の標準になりうるアーキテクチャの変更に、リリース後に慌てて追従したくない。 打ち手 early developer preview を社内 PoC で試し、自社ユースケースでの過不足を洗い出して Shopify にフィードバックを返す。 効果 移行コストの早期見積もり。要望が反映されれば自社に有利な仕様に近づけられる。 技術メモ プレビュー段階のためインターフェースは変わりうる。本番投入ではなく検証用途として隔離環境で扱う。 8 提案で使える1行サマリ 「次世代 Hydrogen は、コマースのロジックを React Router から切り離して フレームワーク非依存のコア にする。 任意の JS フレームワークで Shopify のコマースプリミティブを使え、エージェント用 skills で雛形も自動生成。 ただし今は early developer preview＝検証＆フィードバック向け 、仕様は GitHub の一次情報で要確認。」 source ： shopify.dev/changelog/hydrogen-developer-preview