ShopifyのStorefront APIを使用してNext.js製のECフロントを構築した

Reactでスライダーを実装したので、実装方法を記録しておきます。 UIに関する実装は自分なりの得意な実装方法を持っておきたいなという気持ちがあります。 なので、今後もUIに関する実装方法は積極的にブログに残していきます。 今回はスライダーということでSwiperというライブラリを使用しました。 <a href="https://swiperjs.com/" target="_blank" rel="noopener noreferrer">https://swiperjs.com/</a> Swiperは仕事でReactではない環境（Vanilla JS）で使用したことがあったのですが、Reactで使うのは初めてです。 調べてみるとReact Componentが提供されているようなので、それを使ってVanilla JSよりも更に簡単に動かせそうです（Reactだけでなく、VueとSvelteのコンポーネントも提供されているようです）。 以下は公式ドキュメントの最小サンプルです。<pre><code>// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/swiper.scss';

export default () =&gt; {
 return (
 &lt;Swiper
 spaceBetween={50}
 slidesPerView={3}
 onSlideChange={() =&gt; console.log('slide change')}
 onSwiper={(swiper) =&gt; console.log(swiper)}
 &gt;
 &lt;SwiperSlide&gt;Slide 1&lt;/SwiperSlide&gt;
 &lt;SwiperSlide&gt;Slide 2&lt;/SwiperSlide&gt;
 &lt;SwiperSlide&gt;Slide 3&lt;/SwiperSlide&gt;
 &lt;SwiperSlide&gt;Slide 4&lt;/SwiperSlide&gt;
 ...
 &lt;/Swiper&gt;
 );
};</code></pre> スライダーのスタイルもSassで提供されているので、<code>import 'swiper/swiper.scss'</code>で読み込みます。 Swiperコンポーネントにスライダーの挙動や見た目に関するオプションを指定できます。 SwiperSlideコンポーネントにスライダー要素の実態を埋め込んでおきます。 これだけで動くスライダーができて大変お手軽です。 <h2 id="hc57404ac77">実際に使ってみる</h2>今回は、ECサイトにありがちな、スライダーの下にサムネイル画像の一覧があり、サムネイル画像をクリックするとスライダー要素も連動して動くものを実装します。 こんなコンポーネントになりました（Next.jsでの実装です）。 SwiperコンポーネントのonSwiperでSwiperインスタンスを受け取ることができるのでそれをstateに持ちます。 Swiperインスタンスが持っているプロパティはとても多く、以下のページにプロパティとメソッドの一覧があります。 <a href="https://swiperjs.com/api/#methods" target="_blank" rel="noopener noreferrer">https://swiperjs.com/api/#methods</a> mapのindexをslideTo関数の引数に受け取り、SwiperインスタンスのslideToメソッドを呼び出すことでクリックされたスライド要素へのスライドを実現しています。 <pre><code>import { useState } from 'react';
import { Product } from '@/types';
import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination } from 'swiper';

SwiperCore.use([Navigation, Pagination]);

type Props = {
 product: Product;
};

const ProductImages: React.FC&lt;Props&gt; = ({ product }) =&gt; {
 const [swiperInstance, setSwiperInstance] = useState&lt;SwiperCore | null&gt;(null);
 const slideTo = (index: number) =&gt; {
 if (!swiperInstance) return;
 swiperInstance.slideTo(index);
 };
 return (
 &lt;&gt;
 {/* スライダー本体 */}
 &lt;Swiper
 spaceBetween={50}
 slidesPerView={1}
 navigation
 pagination={{ clickable: true }}
 onSwiper={(swiper) =&gt; setSwiperInstance(swiper)}
 &gt;
 {product.images.map((image) =&gt; {
 return (
 &lt;SwiperSlide key={image.id}&gt;
 &lt;Image
 src={image.src}
 alt={product.title}
 width={500}
 height={500}
 /&gt;
 &lt;/SwiperSlide&gt;
 );
 })}
 &lt;/Swiper&gt;

 {/* サムネイル画像一覧 */}
 {product.images.map((image, index) =&gt; {
 return (
 &lt;Image
 onClick={() =&gt; slideTo(index)}
 key={image.id}
 src={image.src}
 alt={product.title}
 width={100}
 height={100}
 /&gt;
 );
 })}
 &lt;/&gt;
 );
};


export default ProductImages;</code></pre> これでできるスライダーはこんな感じです。サムネイル画像（3種類のおにぎりの画像）をクリックするとスライダーもクリックされたサムネイル画像要素までスライドされます。 <img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/415dc12dde5243ff175c1ebb266024d7/25a48041a81848a543b5aeb8efdf3607.png" alt=""> Swiperは他にもページネーションをカスタマイズできたり、アニメーションをつけることができたり、イベントリスナを設定できたりと、とにかく用意されているAPIの量がとても多いのでスライダーに関する大体のことはできそうだなという印象のライブラリです。かつ、APIもシンプルでわかりやすいと思います。 React以外（VueやSvelete）でも使用することができるので学習コストも無駄にはならなそうです。

Reactでのスライダー（カルーセル）の実装

エンジニア歴2年目に突入し、もう半年ほど経ちそうです。 最近になって、本業では使わない（使えない）技術スタックを身につけるためにプライベートの時間を使って勉強する習慣がついてきました。 が、やはり仕事で使わないとすぐ頭から抜けてしまうので、理解したことを記録しておくためにこのブログを作ることにしました。 あと自作ブログをやってみたかったというのも理由としてはあります。<h3 id="h7d0aeafefc">筆者のスキルセット</h3><ul><li>まともに書ける言語の中ではPHP歴が一番長い（7系しか書いたことないです。仕事ではPHP7.4使ってます）</li><li>CSSは最低限かける。複雑なアニメーションとかは厳しい。</li><li>jsは仕事ではノンフレームワークなvalilla jsでしか書いたことない</li><li>Reactは独学で初めて2~3ヶ月くらい</li></ul> 自分のスキルセットはこんな感じです。 このレベル感の人間がGatsbyで自作ブログ構築するにあたって、学習の流れや難しかったところ・ハマったところ等を書こうと思います。<h3 id="hcdab8eedf6">学習の流れ</h3>Gatsby.jsは、ページの表示に必要なデータをGraphqlで一気に取得して、それをReactコンポーネントに流し込むことでSSG(ServerSideGenarating)してくれる静的サイトジェネレータです（という理解です）。 そのため、GraphqlとReactの理解は必須となります。 GraphqlはUdemyで1本講座を買って勉強しました。この方の動画はTypeScript入門で買ったことがあるのですが、わかりやすかったです。 <a style="color:#6b46c1" href="https://www.udemy.com/course/graphql-with-react/" target="_blank" rel="noopener noreferrer">フロントエンドエンジニアのためのGraphQL with React 入門</a> その後に、「Webサイト高速化のための静的サイトジェネレーター活用入門」という本を読みました。Gatsby本とか呼ばれてるらしいです（？） この本を手を動かしながらやりきると、Gatsby + Contentful製のブログが一本出来上がります。 このブログもそれをベースにカスタマイズして作りました。 ページネーションやSEOの実装まで丁寧に解説してくれています。 <a style="color:#6b46c1" href="https://www.amazon.co.jp/%E3%80%90%E7%89%B9%E5%85%B8%E4%BB%98%E3%81%8D-%E3%80%91Web%E3%82%B5%E3%82%A4%E3%83%88%E9%AB%98%E9%80%9F%E5%8C%96%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE-%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E6%B4%BB%E7%94%A8%E5%85%A5%E9%96%80-Compass-Books%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4839973008" target="_blank" rel="noopener noreferrer">Webサイト高速化のための静的サイトジェネレーター活用入門</a> Reactそのものに関しては、話すとボリュームが大きくなりそうなので省略します。<h3 id="h8c1ceaa430">Gatsby + microCMSでのブログ実装</h3>実現する機能としては以下のような感じです。<ul><li>コンテンツはすべてmicroCMSで管理</li><li>シンタックスハイライト</li><li>記事のカテゴライズ</li></ul> まずは、Gatsby本をやってできたブログから、Contentful依存の実装を剥がすしてmicroCMSでの実装に置き換えるところからはじめました。 microCMSを選んだのは、管理画面が日本語でUIもContentfulよりわかりやすいと感じたからです。 Gatsby本ではContentful依存の実装の剥がし方・microCMSへの乗り換え方まで付録で解説しくれていたのでこのステップでは特に困りませんでした。<h3 id="h610e988ca2">microCMSで用意するAPI</h3>ブログAPI、カテゴリAPI、aboutページ用APIを用意しました。 gatsby-source-microcms という、gatsbyでmicroCMSからGraphqlでデータ取得できるようにするためのプラグインが用意されているのでこちらにAPIの設定を記載します。<pre><code>
 // gatsby-config.js
 {
 resolve: "gatsby-source-microcms",
 options: {
 apiKey: process.env.microCMS_API_KEY,
 serviceId: "eringiv3devblog",
 apis: [
 {
 endpoint: "blog",
 query: {
 limit: 100,
 },
 },
 {
 endpoint: "category",
 query: {
 limit: 100,
 },
 },
 {
 endpoint: "about",
 format: "object",
 },
 ],
 },
 },
 </code></pre>リスト形式のレスポンスか、オブジェクト形式のレスポンスを返すかで、formatオプションの値を変える必要がある点に注意が必要です。 ドキュメントにきちんと記載されているのですが、見落としてしまいハマりました。 デフォルトでは、<code>format: "list"</code>が指定されるようで、オブジェクト形式のレスポンスを返すAPIで明示的に<code>format: "object"</code>を指定しないとビルドが失敗します。<h3 id="h5ead4ef981">コードにシンタックスハイライトを効かせる</h3>「Gatsby syntax highlight」とかでググっても、gatsby-remark-prismjsというプラグインを使ってmarkdownで入稿する前提でハイライトを効かせる方法ばかりヒットします。 「静的サイトジェネレータを使って技術ブログを開設する」という目的に対しては多くの場合、ContentfulやmicroCMSのようなヘッドレスCMSを使わなくても、markdownファイルにコンテンツを書き込んでgit pushすれば済む話なので、そもそもAPIのレスポンスの中に含まれるHTML文字列からシンタックスハイライトを効かせられるようにするというモチベーションが発生しないのだと思います。 ただ、今回はどうしてもmicroCMSを使ってみたかったのでmarkdownは使わずに済む方法を考えました。 レスポンスのHTML文字列からシンタックスハイライトを効かせる手順は以下のようにしました。<ol><li>microCMSの繰返し項目機能を使って、ブログコンテンツに繰返し項目（リッチエディタ項目 or HTML項目を設定）をもたせる</li><li>レスポンスに含まれる繰返し項目の項目IDで何の項目かを判別し、HTML項目の場合はHTMLとしてパースしReactコンポーネントに変換する</li><li>Prismjsを使って、useEffectでクライアント側でハイライトを行う</li></ol> コードはこんな感じになりました。 <a style="color:#6b46c1" href="https://github.com/EringiV3/devBlog/blob/master/src/components/post-body.js" target="_blank" rel="noopener noreferrer">https://github.com/EringiV3/devBlog/blob/master/src/components/post-body.js</a> 繰返し項目にHTML入力用の項目を設ける理由は、prismjsに言語の種類を識別させてハイライトして貰う必要があるためです。pre要素のclassに<code>language-xxx</code>を指定すると、xxx言語の構文として解釈してくれます。 ただ、問題点があってprismjsとjsxの相性が良くないみたいで自分の手元ではjsxのシンタックスハイライトを効かせることができていません。すぐには解決できなそうだったので今後の課題です。 繰返し項目のIDで処理を分岐させるのは、microCMSのブログに実装例があったのでそれを真似しました。 <a style="color:#6b46c1" href="https://microcms.io/blog/update-repeater-field" target="_blank" rel="noopener noreferrer">繰り返しフィールドが追加されました</a><h3 id="hcc1af24286">スタイリング</h3>Gatsby本では外部のcssファイルにクラス指定でスタイルを当てていましたが、それをやめてstyled jsxを使ってみることにしました。CSS in JSのライブラリは種類が多くてどれを選択すればいいか迷ったのですが、グローバルな領域にスタイルを書き込んでいくのはどうしても嫌・styledComponentはコンポーネントが増えてなんか嫌という理由でstyled jsxを選びました。軽量かつ、<code>&lt;style jsx&gt;&lt;/style&gt;</code>で囲むだけでコンポーネントに対してscopedなスタイルを当てることができてシンプルなのがいいなと思いました。記法も普通のCSSと同じなのでとっつきやすかったです。 基本的にはすべてscopedにして、ページネーション等の複数のjsxファイルにまたがるクラスに対してのスタイルは<code>&lt;style jsx global&gt;&lt;/style&gt;</code>でグローバルな領域のスタイルとして記述しました。 <h3 id="h9dcc071ccd">デプロイ</h3>Netlifyを使っています。GitHub, microCMSと連携してmasterへのコミットや、CMSで管理されているコンテンツの更新でデプロイされます。 <h3 id="ha739b3b8f6">その他</h3>Google Analyticsやサイトマップの設定も、プラグインが用意されており、gatsby-config.jsにちょこっと設定を書き足すだけだったので自分でやることはほぼありませんでした。 <h3 id="h4ddd7d9be8">計測</h3>トップページをLighthouseで計測してみたら4項目すべて100点でした！ <img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/eed9428f979e15fcda16f05bc5af5273/lighthouse.png" alt=""> まだ1記事しか存在していないのでいい点数が出やすいのは当然だと思うので、今後記事が増えても点数が下がらないように気をつけます。 ちなみに、記事詳細ページで計測したらもう少し低いスコアになりました。 <img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/2185222d9e6ab3bc2e1f56b7890125e9/lighthouse_blogpost.png" alt=""><h3 id="ha214098e44">まとめ</h3>Gatsby + microCMSという構成で、コンテンツはすべてmicroCMS管理かつシンタックスハイライトも効かせられる最低限の技術ブログができました。 今後の改善点として以下があります。<ul><li>シンタックスハイライトについて、現在はクライアントサイドで実行するようになっているがGatsbyのメリットを活かせていない気がするので、サーバーサイドでハイライトした状態のHTML文字列を返すようにしたい</li><li>TypeScript導入</li><li>microCMSのプレビュー機能対応</li></ul> TypeScriptはできれば最初から入れたかったのですが、初めて触るフレームワーク（Gatsby）、初めて触るCMS（microCMS）という構成だったので、カオスになるのを防ぐために、とても使いこなせるとは言えないレベルの習熟度のTypeScriptを入れるのは先送りとしました。 とりあえず公開するところまでたどり着けたのは「Webサイト高速化のための静的サイトジェネレータ活用入門」とmicroCMSの運営の方（Twitterでつまづいているところをつぶやいたら助けてくれた！）のおかげだと思います。 アウトプットのために作ったブログなのでこれで満足しないようにしたいです。

eringiv3.dev

Category: React

ShopifyのStorefront APIを使用してNext.js製のECフロントを構築した

Reactでのスライダー（カルーセル）の実装

Gatsby.js + microCMSで技術ブログを構築しました