こんにちは、エンジニアの川島です。
ヘッドレスコマース実装を解説する本連載記事、第二回の投稿から長らく間が空いてしまいましたが、ようやく第三回をお届けします:)
コメント欄からメッセージをくださった皆様、どうもありがとうございました。

さて、第三回となる本記事では、連載初回でもご紹介したヘッドレスコマース用のGatsbyスターター、「Gatsby-Shopify-Starter」の構造と、実装に役立つプラグインを解説します。

▼補足
本記事執筆中の3月2日に、Gatsbyのv3.0.0がリリースされました！
本記事の内容はGatsbyのv2に基づいていますが、v3への移行を近いうちに試してみる予定なので、修正が必要そうな点があれば追記しますね。

Gatsby-Shopify-Starterの基本構造

Gatsby-Shopify-Starterは、Shopifyとの連携やカート機能を備えたGatsbyスターターです。
実際の動作は以下のデモストアで確認できます。
https://gatsby-shopify-starter.alexanderhoerl.de/

Gatsby-Shopify-Starterを用いて新規Gatsbyサイトを作成すると、内部構造は下記のようになっています（2021年2月現在）。※キャッシュファイルなど一部省略

emotionについて

gatsby-shopify-starterでは、CSS-in-JSライブラリのEmotionが利用されています。
本連載ではCSS-in-JSではなくCSS ModulesとSassでスタイリングを進めてゆきますが、CSS-in-JSで実装したい方は適宜、該当箇所を読み替えていただければ幸いです。

プラグインの導入

Gatsbyプラグインを追加し、より実装しやすいようにスターターを拡張してゆきます。

作業に取り掛かる前に、インストール直後のgatsby-shopify-starterに対し、yarn upgradeコマンドで各プラグインをアップデートしておきましょう。アップデート後にgatsby developコマンドが失敗する場合は、gatsby cleanコマンドで一度キャッシュを削除すると良いです。

gatsby-plugin-sassのインストール

普段からSassをバリバリ書いてる都合上、Sass使えないだけでけっこう辛いので、Gatsbyサイトにも導入してゆきます。（CSS-in-JSで書きたい方は本節を飛ばしてください）

以下コマンドでインストールします。

yarn add sass gatsby-plugin-sass

インストールが完了したら、gatsby-config.jsに記述を追加しましょう。

plugins: [`gatsby-plugin-sass`],

これで、GatsbyでSassを記述できるようになります:)
CSS ModuleとSassを用いたGatsbyのコンポーネント実装については、次回記事で解説しますね。

Gatsby公式によるSass導入ガイドはこちらです。

実装に便利なプラグインの紹介とインストール

その他、よく使うプラグインのご紹介です。
Gatsby公式サイトへのリンクを繋いでおくので、適宜、必要なものをインストールしてください。

各ディレクトリとファイルの役割

Gatsbyそのものの構造は公式ガイドでも解説されているので、本節ではgatsby-shopify-starterを扱うにあたって重要なファイルに絞り、概要を紹介します。

gatsby-config.js

Gatsby全体の構成を記述するファイルです。gatsby-config.jsについてはGatsby公式でも解説されています。
gatsby-source-shopifyプラグインのオプション（利用するShopify Storefront APIのバージョン指定など）もここで設定できます。

なお、ここまで紹介した各種プラグインをインストールした後のgatsby-config.jsは以下のような記述になります。

See the Pen
gatsby-config.js by sayaka (@river_is_land)
on CodePen.

gatsby-node.js

GatsbyサイトのBuild時に実行されるGatsby Node APIの関数を記述するファイルです。
gatsby-shopify-starterでは、Shopifyの商品を取得するGraphQLと、取得されたデータを元に個々の商品詳細ページを生成する処理が初めから記載されています。

ページ生成APIであるcreatePagesの詳細は、Gatsbyドキュメントを参照してください。

src/context/StoreContext.js ｜src/provider/ContextProvider.js

Gatsbyサイト内でグローバルに扱うデータ（コンテクスト）を記述しているファイルです。
ContextProvider.jsには、Shopifyのチェックアウト機能との橋渡しを担うshopify-buyプラグイン関連の処理が記述されています。
基本的には、gatsby-shopify-starterの初期記述のままで問題なく開発を進められます。

shopify-buyプラグインの処理についてはこちらのドキュメントで確認できます。

src/layouts/index.js

GatsbyサイトのLayoutコンポーネントです。
前述したContextProviderの他、サイト全体のヘッダーコンポーネントや、StaticQueryによるGraphQLなどが記述されています。

src/pages

こちらのディレクトリに配置したコンポーネントは、ファイル名に基づいたURLのページに自動変換されます。
gatsby-shopify-starterでは、インデックス、404ページ、カートページなどが初めから準備されています。実案件ではAboutページや問い合わせ用ページも併せて追加することが多いですね。

src/templates/ProductPage

gatsby-node.jsのcreatePage APIで利用される、商品詳細ページのテンプレートです。
テンプレート内のGraphQLによって、Shopify商品の各データを取得しています。
商品の価格、説明文、画像、バリエーション情報など、一般的に必要なデータは初めから記述されていますが、不足があれば適宜書き換えてください。metafields情報を渡したい場合もこちらに記述します。

src/components/ProductForm

商品詳細ページにおいて、数量選択、バリエーション選択、カート追加などを担うコンポーネントです。
React Hooksによる、stateやコンテクストの取得・更新も行われています。
これまで実装した案件は単一バリエーション商品を前提としていたため、まだ詳細を確認できていないのですが、コンポーネント内の開発者コメントによれば……

Using this in conjunction with a select input for variants can cause a bug where the buy button is disabled, this happens when only one variant is available and it's not the first one in the dropdown list.
バリアントの選択入力と組み合わせて使用​​すると、購入ボタンが無効になるバグが発生する可能性があります。これは、使用可能なバリアントが1つだけで、ドロップダウンリストの最初のバリアントではない場合に発生します。

……とのことで、バリエーション選択欄における在庫ステータス判定時に、限定的な状況で発生するバグがあるようです。
実装の際は念のためご留意ください。

src/components/Cart/index.js｜src/components/Cart/LineItem/index.js

カートページの描画と、カート内商品のShopify決済画面受け渡しを担うコンポーネントです。
コンテクストに渡されているデータを元に、現在のカート内商品を表示します。
購入ボタンをクリックするとShopifyの決済画面に遷移し、通常のShopifyストアと同様に購入手続きが可能です。

おわりに

gatsby-shopify-starterへの追加プラグイン導入も終わり、スターター内ファイルの構造もおおよそ把握できたことと思います。
次回は、CSS ModulesとJSXを用いて、オリジナルのコンポーネントを実装してゆきます。もしGatsbyサイトに不慣れな場合は、今後の実装においても本章をときどき参照いただくと、各コンポーネントの関連を理解しやすくなるかもしれません。お役に立てれば幸いです:)