HydrogenとOxygenの全体像
Hydrogenの構成要素とOxygenの位置づけを説明し、プロジェクトを作成できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、Hydrogen（ShopifyのReactフレームワーク）とOxygen（それを動かすホスティング）の関係を説明し、プロジェクトを作れるようになります。
受託では「Remixベース」だった時代の記事が大量に残っているので、土台を間違えるとimportから動かず、手戻りになります。
Hydrogenとは
Hydrogenは、React Router 7（フレームワークモード）とViteの上に載ったShopifyのフレームワークです。@shopify/hydrogenがImage Money CartForm Analyticsなどの部品、Storefrontクライアント、カートハンドラを提供します。
Remixベースだった時代の記事はimportパスが違うので、参考にしません。
Oxygenとは
Oxygenは、Shopifyが提供するエッジホスティング（世界各地のサーバーで動かす配信基盤）です。
Hydrogen販売チャネルからGitHubリポジトリを繋ぐと、ブランチごとにデプロイされます。
Shopifyのプランに含まれ、追加費用はかかりません。
プロジェクトはどう作るか
npm create @shopify/hydrogen@latestで作ります。
言語（TS推奨）・スタイリング・MarketsのURL構造を選びます。
実ストアが無くてもmock.shopで動かせます。
構成の中心はapp/root.tsxとapp/routes/です。
ほかにapp/lib/context.ts（Storefrontクライアント・カート・顧客アカウントの初期化）、server.ts、storefrontapi.generated.d.ts（型生成の出力）があります。
発展：バージョンは四半期ごとに更新する
Hydrogenはカレンダーバージョン（2026.x.y）で、Storefront APIのバージョンに追従します。
四半期ごとの更新作業が保守に入ります。
この作業を、保守の工数として見込んでおきます。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。