Shopify が提供する Hydrogen は、Remix を基盤としたサーバーサイドレンダリング（SSR）対応の React フレームワークで、Shopify のデータへ直接アクセスできる カスタムストアフロント を構築するための最新ソリューションです。
そして Oxygen は、Hydrogen ベースのストアフロントを高速かつ安定的にホスティングするために用意された Shopify 公式のホスティング基盤です。
最近筆者も Hydrogen を用いたプロジェクトに携わり、多くの可能性を実感しました。本記事では、Hydrogen の特徴、従来型ストアフロントとの違い、メリット・デメリット、そして技術的な仕組みまで総合的に解説します。
1. Traditional Storefront と Custom Storefront の違い
Shopify のストアフロントには以下の2種類があります。
- Traditional Storefront（従来型）
- Custom Storefront（カスタムストアフロント）
ユーザーからは見分けがつきませんが、開発者にとっては大きな違いがあります。
Traditional Storefront（従来型）
従来型ストアは Shopify 初期から存在するテーマベースの方式です。
- 多数の無料・有料テーマを利用可能
- Liquid テンプレート言語を使用
- テーマエディタでドラッグ＆ドロップの簡単カスタマイズが可能
- ノーコード〜ローコードでストア構築が可能
開発負荷は軽いものの、カスタマイズ性の自由度は低めです。
Custom Storefront（カスタムストアフロント）
こちらが Hydrogen + Oxygen が活用される領域です。
- テーマ構造の制約がなく、React で完全自由に UI/UX を構築できる
- デザイン性・表現力に優れた独自体験を提供可能
- Shopify Storefront API を通じてバックエンドデータに直接アクセス
- 高度な機能や複雑なロジックを取り入れたい場合に最適
2. Hydrogen を使ったカスタムストアのメリット
1. 圧倒的なカスタマイズ自由度
テーマの制限なく、React アプリとして自由に構築できます。
これにより、以下のような表現も可能になります。
- 完全オリジナルのページデザイン
- 洗練されたインタラクション
- 独自の UX 演出
ブランド体験にこだわるストアにとって大きな強みとなります。
2. Shopify のデータと柔軟に連携
Hydrogen では Shopify アプリに頼らず、自前で機能を構築できます。
例：
- 商品バンドル機能
- レビュー機能
- マーケティング機能
- カスタムカートロジック
React の自由度をそのまま活かせる点は従来型にはないメリットです。
3. React エコシステムをフル活用
- 再利用可能なコンポーネント
- 状態管理ライブラリ（Zustand / Redux 他）
- UI ライブラリやツールとの連携
一般的な React 開発と同じ感覚で実装できます。
3. Hydrogen のデメリット
1. 開発コストが上がりやすい
Traditional store ならテーマの組み合わせで簡単に構築できますが、
Hydrogen はフル React 開発です。
- React 経験者が必要
- 実装工数が増える
- プロジェクト費用が高くなる
などの課題があります。
2. Hydrogen 経験者がまだ少ない
Hydrogen は比較的新しい技術で、経験者が多くありません。
ただし普及が進めば今後改善されるでしょう。
3. Shopify アプリが使えないケースがある
従来型テーマ向けの多くのアプリは Hydrogen 非対応です。
必要であれば自作が必要になります。
4. Hydrogen はなぜ「ヘッドレス」なのか？
一般的な Web アプリは
- フロントエンド（Reactなど）
- バックエンド（Rails、Node、Laravelなど）
を別々に構築します。
しかし Hydrogen を使う場合：
-
バックエンド（商品・顧客・決済・注文管理など）
→ Shopify Admin がすべて提供 - フロントエンドのみを Hydrogen で構築
この構造により バックエンドが不要（＝ヘッドレス） というわけです。
さらに Hydrogen は以下を内包しています。
- カート処理
- 決済フロー
- Mock Shop（テスト用ストア環境）
- Shopify API と簡単に連携できるユーティリティ
開発者は UI とロジックに集中できます。
5. 技術的特徴 ― Hydrogen を支える仕組み
1. SSR（サーバーサイドレンダリング）対応
Hydrogen は SSR を前提に設計されています。
SSR の魅力：
- HTML が最初から生成されるため SEO に強い
- 初回表示が速い
- オンラインストアに適した構造
React SPAでは難しい最適化も SSR なら実現しやすいです。
2. Remix をベースに構築
Hydrogen の内部構造には Remix の哲学が深く反映されています。
- ルーティング
- フォルダ構造
- データロード
- SSR レンダリング
Hydrogen は「Shopify 用に強化された Remix」と言っても良いでしょう。
3. shopify/hydrogen-react パッケージ
Hydrogen の要となるパッケージです。
含まれる機能：
- カート
- 商品データ操作
- Collections API
- Shopify Storefront API とのラッパー関数
このパッケージは将来的に他の React フレームワークでも利用可能になる予定です。
4. GraphQL Storefront API
Hydrogen でデータを取得する際は GraphQL を利用します。
- Query → データ取得
- Mutation → 作成 / 更新 / 削除
対象データ：
- 商品
- コレクション
- 顧客アカウント
- カート情報
GraphQL により、必要なデータのみを効率的に取得できます。
まとめ
本記事では、Shopify の新世代フロントエンド技術である Hydrogen と Oxygen について解説しました。
✔ Hydrogen の強み
- React による自由度の高い UI/UX
- バックエンド不要のヘッドレス構造
- Shopify API とのシームレスな統合
- SSR による高速表示と高い SEO 効果
✔ 課題点
- 開発コストが高くなりやすい
- 経験者がまだ少ない
- 一部アプリが利用できない
Hydrogen は今後さらに普及し、
「より自由で創造的な Shopify ストア構築」を実現する重要技術になっていくでしょう。
ご質問や加筆のご希望があれば、お気軽にお知らせください！