Shopify Hydrogenとは？
Shopify Hydrogenは、Shopifyが提供するヘッドレスコマース用のReactフレームワークです。従来のShopifyテーマとは異なり、完全なカスタマイズ性と高速なパフォーマンスを実現します。
なぜHydrogenなのか？
従来のShopifyテーマでは実現できなかった、以下のような要求に応えることができます：
- 高速なページ表示: Server-Side Rendering (SSR)により、初回表示が劇的に高速化
- 完全なデザイン自由度: Reactコンポーネントで自由にUIを構築
- 最新のWeb技術: Remix、Vite、Tailwind CSSなど、モダンなツールスタックを活用
- 優れた開発体験: TypeScript、Hot Module Replacement、強力な型補完
セットアップ手順
1. プロジェクトの作成
npm create @shopify/hydrogen@latestインタラクティブなプロンプトで、プロジェクト名、言語（TypeScript推奨）、スタイリング方法を選択します。
2. 開発サーバーの起動
cd your-hydrogen-store
npm install
npm run devhttp://localhost:3000でローカル開発サーバーが起動します。
3. Shopifyストアとの接続
.envファイルに、Shopify AdminからStorefront API認証情報を設定：
PUBLIC_STOREFRONT_API_TOKEN=your_token_here
PUBLIC_STORE_DOMAIN=your-store.myshopify.com基本的なコンポーネント構造
商品一覧ページの実装例
// app/routes/products._index.tsx
import { json, type LoaderFunctionArgs } from '@shopify/remix-oxygen';
import { useLoaderData } from '@remix-run/react';
import { getPaginationVariables } from '@shopify/hydrogen';
export async function loader({ context, request }: LoaderFunctionArgs) {
const paginationVariables = getPaginationVariables(request, {
pageBy: 12,
});
const { products } = await context.storefront.query(PRODUCTS_QUERY, {
variables: {
...paginationVariables,
},
});
return json({ products });
}
export default function Products() {
const { products } = useLoaderData<typeof loader>();
return (
<div className="products-grid">
{products.nodes.map((product) => (
<ProductCard key={product.id} product={product} />
))}
</div>
);
}
const PRODUCTS_QUERY = `#graphql
query Products($first: Int) {
products(first: $first) {
nodes {
id
title
handle
priceRange {
minVariantPrice {
amount
currencyCode
}
}
featuredImage {
url
altText
}
}
}
}
`;日本市場向けの最適化
1. 日本語フォントの最適化
// app/root.tsx
import { links } from './styles/fonts';
export const links: LinksFunction = () => [
...fonts,
{ rel: 'stylesheet', href: styles },
];2. 日本の決済方法への対応
Hydrogen Checkoutでは、以下の日本向け決済を簡単に統合できます：
- Shopify Payments: JCB、American Express対応
- コンビニ決済: Komoju、PAY.JP連携
- 代金引換: カスタムCheckout拡張で実装
3. 配送オプションのカスタマイズ
// 配送日時指定UIの実装例
export function DeliveryDatePicker() {
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
const [selectedTime, setSelectedTime] = useState<string>('');
const timeSlots = [
'午前中（8:00-12:00）',
'14:00-16:00',
'16:00-18:00',
'18:00-20:00',
'19:00-21:00',
];
return (
<div className="delivery-picker">
<DatePicker
selected={selectedDate}
onChange={setSelectedDate}
minDate={new Date()}
locale="ja"
/>
<select value={selectedTime} onChange={(e) => setSelectedTime(e.target.value)}>
{timeSlots.map((slot) => (
<option key={slot} value={slot}>{slot}</option>
))}
</select>
</div>
);
}パフォーマンス最適化
1. 画像の最適化
Hydrogenの<Image>コンポーネントは、自動的に：
- WebP/AVIF変換
- レスポンシブ画像生成
- Lazy loading
- Shopify CDNの活用
import { Image } from '@shopify/hydrogen';
<Image
data={product.featuredImage}
sizes="(min-width: 45em) 50vw, 100vw"
aspectRatio="1/1"
/>2. キャッシング戦略
export async function loader({ context }: LoaderFunctionArgs) {
const { products } = await context.storefront.query(PRODUCTS_QUERY, {
cache: context.storefront.CacheLong(), // 1時間キャッシュ
});
return json({ products });
}デプロイ
Oxygen（Shopify推奨）へのデプロイ
npm run build
npx shopify hydrogen deployOxygenは、グローバルエッジネットワークで高速配信を実現。日本のユーザーにも最適なパフォーマンスを提供します。
Vercel/Netlifyへのデプロイも可能
Hydrogenは標準的なRemixアプリなので、他のプラットフォームでも動作します。
まとめ
Shopify Hydrogenは、以下のような場合に最適です：
✅ 高度なカスタマイズが必要：ブランド独自のUXを実現したい ✅ パフォーマンス重視：Core Web Vitalsを最適化したい ✅ モダンな開発環境：ReactやTypeScriptを活用したい
一方、標準的なECサイトであれば、Shopify Theme（Dawn等）で十分な場合もあります。
プロジェクトの要件に応じて、最適な選択をすることが重要です。
DEMETIOでは、Shopify Hydrogenを使った高速ECサイト構築をサポートしています。
ヘッドレスコマースの導入をご検討の方は、お気軽にご相談ください。