Hydrogenでも使えるShopifyアプリリストと、インテグレーションのアプローチ

このHydrogenシリーズをお読みの方はすでにご存知の通り、Shopify HydrogenはフロントエンドとバックエンドをAPIで分離する「ヘッドレス」アーキテクチャを採用しています。ストアフロントはAPIを通じてShopifyと通信する独立したReactアプリケーションとして動作します。これは非常に強力な設計ですが、多くのマーチャントが最初に直面する落とし穴があります――多くのShopifyアプリがそのまま動作しなくなる、という点です。

従来のLiquidテーマでは、アプリはJavaScriptタグやHTMLスニペットをページテンプレートに直接注入します。Hydrogenはそのテンプレートエンジンを使いません。theme.liquidも、{% render %}タグも存在せず、スクリプトがフックできるDOM要素もないため、アプリは起動しても何も見つからず、静かに失敗します。

では何が動作するのか？そしてどうやって連携させるのか？この記事ではそれを解説します。

アプリが動作しない理由――何が変わるのか

核心はここにあります：ヘッドレスストアフロントでは、アプリは自分自身を注入できません。代わりに、あなたがデータを取得します。対応したアプリはREST/GraphQL API、ブラウザ側で動作するJavaScript SDK、またはその両方を提供している必要があります。HydrogenのローダーやクライアントコンポーネントからそれらのAPIを呼び出し、データを整形して、自分でレンダリングします。

これはアプリの評価基準を変えます。「Shopify App Storeのページが充実しているか」ではなく、「ドキュメント化されたAPIやSDKがあり、サーバーサイドのローダーからレンダリングをブロックせずに呼び出せるか」が問いになります。

Hydrogenとの連携に適したアプリのカテゴリ

検索・商品ディスカバリー

検索は最も一般的なインテグレーションのひとつです。主要な検索プラットフォームはもともとAPI優先で設計されているため、Hydrogenとの相性は良好です。

ShopifyのSearch & Discoveryアプリは特筆に値します。HydrogenはどのみちStorefront APIと通信するため、このアプリのメリット（カスタムフィルター、商品ブースト、同義語ルール）を追加のAPIコールなしに享受できます。

レビュー・ロイヤルティ・マーケティング

これらのプラットフォームは顧客の信頼シグナルとリテンションを管理します。一部のUIコンポーネントがLiquidテーマ向けに作られているため、Hydrogen上での設定には少し手間がかかります。

注意点として、これらのアプリの多くはヘッドレス対応やAPIアクセスをエンタープライズ上位プランに限定しています。Okendoはエンタープライズプラン以上でないとSDKにアクセスできません。スタック選定前にトータルコストを確認してください。

サブスクリプション

サブスクリプション連携はHydrogen上で最も技術的に複雑なインテグレーションのひとつです。核心的な課題は、ShopifyのカートAPIがSelling Planへのマッピングなしにサブスクリプション取引をネイティブサポートしないことです。商品ローダーでSellingPlanを取得し、UIに選択肢を表示し、選択されたプランIDをカートに渡す実装が必要です。

Selling Planを使った実装の簡略例です：

import { AddToCartButton } from '@shopify/hydrogen';

export function SubscriptionAddToCart({ variantId, sellingPlanId }) {
  return (
    <AddToCartButton
      lines={[{
        merchandiseId: variantId,
        quantity: 1,
        sellingPlanId: sellingPlanId,
      }]}
    >
      定期購入して節約する
    </AddToCartButton>
  );
}

Selling PlanのIDは商品のGraphQLクエリから取得します。カートに入ったあとはShopifyのチェックアウトエンジンが処理を引き継ぎ、定期課金ロジックはアプリ側に存在します。ストアフロントのコードには含まれません。

コンテンツ管理

ヘッドレスストアフロントは専用CMSとの相性が抜群です。Shopifyのブログやページ機能の代わりに、専用コンテンツプラットフォームを組み合わせるマーチャントも多くいます。

コンプライアンス・プライバシー

社員・B2B向け機能

すべてのインテグレーションに共通するパターン

いくつか実装していくと、毎回同じ形が見えてきます。

1. APIキーはサーバーサイドに保持する。クライアントコンポーネントには置かない。Hydrogenのローダーまたはリソースルート（/api/wishlist、/api/reviewsなど）から取得する。
2. 初期レンダリングに必要なデータはローダーで取得する。それ以外――アナリティクスイベント、ウィッシュリストの状態、チャットウィジェットなど――はページがインタラクティブになったあとにクライアント側で非同期ロードする。
3. UIは自分で構築する。アプリはデータを提供し、見た目はあなたが決める。初期コストは増えるが、デザインの一貫性を保ちやすく、他者のCSSと戦う必要がなくなる。

注意すべき点

Hydrogenへの移行で多くのマーチャントが驚くのは、技術的な問題ではなく商業的な問題です。

• エンタープライズプランの壁。「Hydrogen対応」と謳うアプリが、上位プランでしか実際には使えないケースが多くあります。プロトタイプを作る前に料金ページを確認してください。
• テーマエディタがない。すべてのUI変更にコードのデプロイが必要です。ドラッグ&ドロップはありません。チームがこのワークフローに対応できているかを確認してからヘッドレスに移行してください。
• APIバージョン管理（CalVer）。HydrogenとShopifyのStorefront APIはCalVer（カレンダーバージョニング）を採用しています。これはv3.2.1のような連番ではなく、リリース日をバージョン番号とする方式です。例えば2025-07は2025年7月リリースを意味します。Shopifyは四半期ごとに新バージョンをリリースし（2025-01、2025-04、2025-07、2025-10）、Hydrogenパッケージはそのいずれかに対応しています。@shopify/hydrogenを新バージョンに更新すると、対象APIバージョンが変わり、既存のフィールドや挙動が変更・削除されている可能性があります。Hydrogenのバージョンを上げる際は必ずShopifyの変更履歴を確認し、@shopify/hydrogenのバージョンと.env内のStorefront APIバージョンが一致していることを確認してください。

ヘッドレスアーキテクチャは、デザインの自由度、マルチチャネルの一貫性、カスタムチェックアウトフローを必要とするストアには真に適した選択肢です。ただし、Liquidテーマよりも開発チームへの要求水準は高くなります。アプリエコシステムは急速に成熟しており、ここで紹介した連携は現代的なHydrogenスタックの確かな出発点になるはずです。

このシリーズでは、今後も実際に私たちが実装したインテグレーションを詳しく掘り下げていきます。少しでも参考になれば幸いです！