RemixでECサイト？Shopify Hydrogen入門（Liquidとの比較）

はじめに

RailsでもAPIモードがあるように、EC業界でもモノリシックから分離型へのシフトが進んでいます。
中でもShopifyは公式にRemixベースのフレームワーク「Hydrogen」を提供しています。

本記事は、Liquidテーマは知っているけどHydrogenって何？という方に向けて、環境構築の流れとLiquidとの違いをざっくりまとめた入門記事です。

前提知識

Liquidについて

Shopifyのフロントエンドは長らくLiquidテーマが中心でした。
Liquidはテンプレートエンジンで、HTMLの中に{{ product.title }}のような形で変数を埋め込み、データを表示します。
メリット：非エンジニアでもテーマ編集でECサイトを作れる、すぐに公開可能
デメリット：自由度が低く、大規模なカスタマイズや最新のフロント技術を使うのが難しい
👉 つまり「テーマ中心の構成」とは、このLiquidをベースにShopifyの仕組みで全体を構築する方式を指します。（モノリシックぽい）

概要

HydrogenとShopifyAPI群の関係

HydrogenはFEとして機能し、BEはShopifyが提供している各種APIが担っています。
フロントエンド (Hydrogen)
・RemixベースのReactフレームワーク
・イメージ的にはShopify特化のRemixアプリ

バックエンド (Shopify API群)
・Storefront API（GraphQL）→ 商品一覧、カート、チェックアウト等の顧客向け機能
・Admin API(REST/GraphQL）→ 在庫管理や注文管理等の管理者向け機能
👉 Hydrogen単体でDBやロジックを持つわけではなく、APIをどう描画するかを担うフロント専用フレームワークです。

Storefront APIは既存の機能

ShopifyのStorefront API（GraphQL）自体は、Hydrogenが登場する前から提供されていました。
Liquidテーマでは要件を満たせない際に、UIを一から実装し、Storefront APIを用いていたのです。
その結果、開発者は次のような負担を抱えていました。
・API接続やGraphQLクエリを最初から自分で実装する必要がある
・商品一覧・カート・チェックアウトといったECに必須のUIも、一から構築する必要がある
・SEO対策もNext.jsやGatsby等を用いて自力で行う必要がある
👉 つまり自由度は高いが、学習コストと初期構築コストが大きいのが当時のヘッドレス開発でした。

Hydrogenが解決するポイント

Hydrogenは、このStorefront APIを前提に最適化された公式フレームワークです。
そのため次のような利点があります。
・初期設定済み → API接続やGraphQLクエリが用意されている
・EC必須のUIが揃っている → 商品一覧、カート、チェックアウト等のサンプルが揃っている
・SEO対策済み → ECサイトに必須のSEO要件を考慮した仕組みが組み込み済み

👉 前提知識、Hydrogenの概要をまとめると、
「Liquidテーマでは要件を満たせない状況においてヘッドレス構築を選択する場合は、Hydrogenを使うのが圧倒的に楽」
ということです。

実際のコード例

環境構築

先にShopifyのパートナーアカウントと開発ストアを用意しておく必要があります。
Hydrogenで構築するストアは、通常の本番ストアではなく「開発ストア」を使ってテストします。
（パートナーアカウントを作ると無料で開発ストアが作成できます）

• パートナーアカウントの作成
• 開発ストアの作成

では実際にHydrogenを触ってみましょう。
Shopify CLIを使えば数分で雛形プロジェクトを立ち上げることができます。

依存関係
・Node.js v18 以上
・npm または yarn
・Shopify CLI

以下のコマンドでHydrogenプロジェクトを立ち上げられます。

npm create @shopify/hydrogen@latest my-hydrogen-app
cd my-hydrogen-app
npm install
npm run dev

Liquidとの比較

商品一覧を例に比較していきます

Liquidの場合（テーマ依存の静的ループ）

{% paginate collection.products by 12 %}
  <ul class="grid">
    {% for product in collection.products %}
      <li>
        <a href="{{ product.url }}">
          <img src="{{ product | img_url: '400x' }}" alt="{{ product.title }}">
          <h3>{{ product.title }}</h3>
          <span>{{ product.price | money }}</span>
        </a>
      </li>
    {% endfor %}
  </ul>
  {{ paginate | default_pagination }}
{% endpaginate %}

ポイント

• テーマが渡してくれるcollection.productsをループする
• 複雑な複合条件検索や状態をまたいだUI制御は苦手

Hydrogenの場合（GraphQLで条件を自由に指定、Reactで描画）

import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
import {useLoaderData, Link} from '@remix-run/react';

export async function loader({context, request}: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const tag = url.searchParams.get('tag') ?? '';
  const data = await context.storefront.query(PRODUCTS_QUERY, {
    variables: {first: 12, query: tag ? `tag:${tag}` : undefined},
  });
  return json({data, tag});
}

export default function Products() {
  const {data, tag} = useLoaderData<typeof loader>();
  const {nodes, pageInfo} = data.products;

  return (
    <section>
      <div>
        <Link to="?tag=新商品">新商品</Link>
        <Link to="?tag=人気">人気</Link>
        <Link to=".">全て</Link>
      </div>
      <ul>
        {nodes.map((p:any) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
      {pageInfo.hasNextPage && <Link to="?cursor=...">もっと見る</Link>}
    </section>
  );
}

ポイント

• クエリでタグ、タイトル、価格帯等の複合条件を好きに合成できる
• 状態管理や非同期制御もReact/Remixの書き方で実装可能
• 無限スクロールや複雑なフィルタUIも構築しやすい

👉 比較をまとめると、

• Liquidテーマだとテーマが用意している範囲での絞り込み・ソート・ページングはできる
• 複合条件（タグ＋価格帯＋キーワード検索）や無限スクロールなどを実装しようとすると、Liquidでは限界があり、JSや外部サービスに頼る必要が出てくる
• Hydrogenは、GraphQLクエリとReactの状態管理を使って柔軟に対応できる

まとめ

小規模、要件がシンプル → Liquid（速い・学習コスト低）
高度なUIや複合検索が前提 → Hydrogen（拡張と保守が楽）

テーマ改変で詰まったら「その画面だけHydrogenで作る」というハイブリッドな実装もあるようです。

備考

• Hydrogen概要とクイックスタート
• Storefront API（GraphQL）