Zenn
🍷

Shopify Hydrogen でストア構築を試してみる（Developer Preview 段階）

2021/12/13に公開
GraphQL
React
Shopify
tech

これは、OPENLOGI Advent Calendar 2021 15日目の投稿記事です。

https://qiita.com/advent-calendar/2021/openlogi

はじめに

物流アウトソーシングのプラットフォームを開発している OPENLOGI の Advent Calendar としてこの記事を書きました。オープンロジでは、 Shopify などの外部 EC カートサービスとの連携の開発を行っていますが、個人でも Shopify のテーマ開発やアプリ開発をしています（注：社内ではテーマ開発は行っていません）。
今回は Shopify Unite 2021 で発表された、Shopify の最新のテーマ開発フレームワークである、Hydrogen を、実際にチュートリアルを見ながら触った内容を書きたいと思います。

Shopify Hydrogen とは


https://hydrogen.shopify.dev/
https://shopify.dev/custom-storefronts/hydrogen

Hydrogen は、Shopify のカスタムストアフロントを構築するための、フロントエンド開発の React 製フレームワークです。最初から EC サイトに必要そうなページやコンポーネント、ツールが用意されているため、開発コストが短縮できます。
それによってデザイン・ブランディングに注力でき、ハイパフォーマンスで、クリエイティブそしてダイナミックな！コマース体験を構築できると書いてあります。

Shopify カスタムストアフロント とは

Shopify は無料で提供されているテーマや、有料のテーマを選んですぐにストアの構築を行うことができ、さらにShopify テーマ用のテンプレート言語である Liquid をカスタマイズすることで、独自のデザインのストアを構築できます。これが一般的なストアフロントです。

参考：Liquid のチートシート。このように Shopify 独自の変数が使えます。
https://www.shopify.com/partners/shopify-cheat-sheet

しかし、テーマのカスタマイズではストアの世界観の表現に限界があったり、既存の販売チャネルやアプリでは実現できない構造にしたいという場合があると思います。また、1から Liquid を学習するよりも、慣れている React、あるいはそれ以外の言語でストアを開発したいという場合、既存の CMS にコマース機能だけを追加したいという場合もあるでしょう。
そのような、コマース機能部分だけ Shopify が提供している Shopify storefront api を使って、他の部分と API でつなぎ柔軟に（ヘッドレスコマースの）ストア構築することを、カスタムストアフロントと呼んでいます。

Gatsby などの静的サイトジェネレータでヘッドレスコマース開発をすることができますが、Hydrogen は Shopify 製のフレームワークであるため、事前の準備や連携が不要で、すぐにカスタムストアフロントを始められるというわけです。（※Gatsby などでも Hydrogen をインストールして、使うこともできるとありましたが、この記事では試していません。）
※カスタムストアフロントは以前は Shopify でもヘッドレスコマースと呼ばれていました。

使われているスタック

Vite はフロントエンドのビルドツールで、高速にサーバを立ち上げて更新をしてくれるツールです。（今回始めて触りました⚡）

実際に試してみよう！

Create a Hydrogen appにそって進めています。
https://shopify.dev/custom-storefronts/hydrogen/getting-started/create

準備

  • Node v14.0 以上
  • yarn (または npm)
    がインストールされていることを確認してください。

自分のストアのデータで構築する場合の準備（今回はこれ）

  • 予め Shopify パートナーアカウントを作成し、開発ストアを用意します
  • 作成した開発ストアに商品を登録し、公開しておきます
  • 作成した開発ストアでプライベートアプリを作成し、Storefront API にアクセスできるようにしておきます（参考記事: https://help.shopify.com/ja/manual/apps/private-apps）　
    これで Shopify storefront api で、登録した注文情報を取得できるようになりました。

    登録した商品詳細画面に行くと、「販売チャネルとアプリ」欄に作成したプライベートアプリ名（私の場合 hydrogen-test）があることを確認してください

1. Hydrogen app を新規作成する

アプリを作成する用の新規ディレクトリに移動して、下記を実行します。

yarn create hydrogen-app

アプリ名を聞かれるので設定すると、アプリ名ディレクトリに必要なテンプレートがインストールされました。
次に、先程作成した開発ストアと紐付けるために、 アプリルート/shopify.config.js を編集します。（初期状態では Hydrogen デモストアに紐付いています。）

export default {
  locale: 'ja-jp', // 日本語のストアにしたいので、en-us から編集
  storeDomain: '作成したストアのドメイン.myshopify.com', // 編集
  storefrontToken: '作成したprivate appで作られたストアフロントのアクセストークン', // 編集
  graphqlApiVersion: 'unstable',
};

編集したらサーバを立ち上げます。

yarn

yarn dev

http://localhost:3000/ に行くと、Hydrogen ストアが表示され、先程追加した商品が表示されています🎉

登録したフェンネル茶が表示されています！

チェックアウト以降は Shopify の URL に飛びます。

また、Storefront API は GraphQL です。http://localhost:3000/graphiql でクエリを試しながら開発をしましょう。

2. カスタマイズしてみる

下記ファイルは必須ですが、それ以外はTailwind でスタイルを変えるなど、自由にカスタマイズすることができます。

index.html // デフォルトtitleを変える場合はこの<title>タグを変更、その他メタを変更する場合は編集
src/entry-server.jsx
src/entry-client.jsx

3. server component からストアのデータをフェッチしてみる

Hydrogen は useShopQuery と useQuery hook が用意されており、server component からデータをフェッチすることができます。

React Server Component とは・・？

https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components
React Server Component は、サーバ側でコンポーネントをレンダーすることで、バンドルサイズを減らしてアプリのパフォーマンスを改善することができる、最新の機能です（執筆時点で、まだアルファ版）。Hydrogen には早速組み込まれて本当に早いですよね・・！

React server component には、Shopify のドキュメントによると、3つのコンポーネントタイプがあります。

  • Server:
    • サーバ側でレンダーされるコンポーネント。クライアントサイドの処理は含まれない。
    • Server Component のみが Storefront API をコールできる。
    • コンポーネントのファイル名が .server.jsx のものが該当し、このファイルはクライアントのバンドルに属さない。
      クライアントに限定された機能（useState など）にはアクセスできない。
  • Client:
    • クライアント側でレンダーされるコンポーネント。クライアントサイドの処理を含む。
    • コンポーネントのファイル名が .client.jsx のものが該当。
    • サーバに限定された機能（file system など）にはアクセスできない。
  • Shared:
    • サーバとクライアントの両方でレンダーされるコンポーネント。ファイル名に .client も .server も付かない。

このようにルールがありますが、 Hydrogen では lint エラーを出してくれるので間違ってもすぐ気づくことができて便利です。

少し例を見てみます。
商品詳細ページのファイルは、src/pages/products/[handle].server.jsx ですので、サーバコンポーネントだということがわかります。ここではまず

import {useShopQuery, ProductProviderFragment} from '@shopify/hydrogen';
import {useParams} from 'react-router-dom';
import gql from 'graphql-tag';

（など）がインポートされており、GraphQL で商品情報を取得するクエリが書かれています。

const QUERY = gql`
  query product(
    $country: CountryCode
    $handle: String!
    $includeReferenceMetafieldDetails: Boolean = true
    $numProductMetafields: Int = 20
    $numProductVariants: Int = 250
    $numProductMedia: Int = 6
    $numProductVariantMetafields: Int = 10
    $numProductVariantSellingPlanAllocations: Int = 0
    $numProductSellingPlanGroups: Int = 0
    $numProductSellingPlans: Int = 0
  ) @inContext(country: $country) {
    product: product(handle: $handle) {
      id
      vendor
      seo {
        title
        description
      }
      images(first: 1) {
        edges {
          node {
            url
          }
        }
      }
      ...ProductProviderFragment
    }
  }

  ${ProductProviderFragment}
`;

使う時は、

export default function Product({country = {isoCode: 'US'}}) {
  const {handle} = useParams();
  const {data} = useShopQuery({query: QUERY});

  // 一部省略

  return (
    <Layout>
      <ProductDetails product={data.product} />
    </Layout>
  );
}

のように、 useShopQuery でデータをフェッチして、ProductDetails クライアントコンポーネント（ProductDetails.client.jsx）に商品データを渡しています。ProductDetails コンポーネントではデータを受け取り、UIを組み立てます。

その他のリファレンス（抜粋）

Hydrogen で構築するメリット

ここまでかなりざっくりと Hydorogen を見てきましたが、私が感じたメリットは下記でした。

  • Vite を使ったことがなくても、ゼロコンフィグで立ち上げがものすごく速く、React に慣れている人であれば、すぐにストア構築が可能で、楽しく開発ができる
  • 意外と（失礼！） Hydorogen のドキュメントは充実している
  • スクラッチでデザインを重視したブランドサイトを作る場合に向いているのではないかと思った

Hydrogen で構築するデメリット

また Hydrogen が向いていない場合もあると思います。

  • 開発コストを下げて開発したい場合は、今までのように既存テーマで開発したほうが早くて安いと思われる
  • ストアフロントの UI が変わるような Shopify アプリをメイン機能として使用している場合、Hydrogen ではすぐには使えないので、乗り換えが難しい（12/3 のShopify Partner Town Hall-Hydrogen Takeover での質問によれば、今後、アプリとの共存の解決策については考えているそうですが・・）

さいごに

Hydrogen で作ったサイトをデプロイしてホスティングができる Oxygen も来年リリース予定で、より Hydrogen での開発体験が楽しそうになってきました。
Shopify は開発者プレビューなどを通して少しずつフィードバックを元に機能を開発しているので、早期にテストをして Issue を立てたり、Shopify developer 用の Discord に参加してキャッチアップをしていきたいと思いました。

Discussion