Headless Commerce 導入中のお話

YAMAP エンジニア Advent Calendar 2020 の16日目になります。
（おっと、昨年も16日目でした、偶然すぎる・・・）

YAMAPで、フロントエンドエンジニア -> ほぼ、ECのエンジニアとして活動中の @issyxissy です。
フロントエンドはリーダーとして関わっており、YAMAP STORE の全般の開発を行っています。

昨年のShopifyとGASの連携のお話をしました。
（詳しくは → [Shopify と GASを連携、そして、WMSと連携してみたお話](https://qiita.com/issyxissy/items/f3a2d872a46b98ec17bc))

今年は、昨年やりたかった、Headless Commerce導入 についてのお話をさせていただきます(ノ ꒪⌓꒪)ノ

## どういった経緯？
[YAMAP STORE](https://store.yamap.com) がオープンしてから1年半程度が経過しましたが、売上・注文数・取り扱いブランドなど、オープン当初に比べると激増していますｗ
(ありがたいことに、ユーザ様のおかげです、ありがとうございます)

1年半程度ですが、まだまだやりたいことが実現できないこともあります。
その中で弊害となったことを大きくまとめると、↓の3点になります。

    1. Shopifyだと、自社サービスとの連携がしづらい
        - ログイン周りは、multipass でセッションを保持できるが、自社とのデータの連携は超大変
    2. もっと新機能をUIにこだわって実装したい
        - Shopify アプリは豊富だけど、日本語非対応が多く、また、UIに拘りたいが、UI調整に限界がある
    3. ビジネス要件が満たせないことが多々ある
        - システムの機能的制約が多いため、事業展開のスピード感を上げづらいことが多い

## システムの自由度を上げる (Flexibility)
技術制約は、事業スピード感に直結すると思っています。

    「これできる？」
       ↓
    「システム的には無理です」
       ↓
    「え、そんなこともできないの？」
       ↓
    「・・・（汗）」
     　↓
    「どうしよう・・・、他の方法を考えるかー」
    「今回は諦めるか・・・」

ビジネスサイドからの要件に対して、システム的には無理という話になりやすい一例です。
（もちろん、無茶な要件ではなくて、普通だったらできるのに、という要件です）

これを解決するために、システムの自由度を上げることが大切だと思っています。
とはいえ、システムの自由度を上げすぎると、uncontrollable になりやすいので、気をつけなければ〜( ꒪⌓꒪;

## Headless Commerce
Shopifyでは、Headless に 利用できるため、今回はそれを利用します。

Headless Commerceについて知りたい人は↓へ。
https://netshop.impress.co.jp/node/8042

Headlessにすることで、バックエンドはShopify、フロントエンドはReact/Next.jsに構成が実現できました。
UIに拘ったりするのには、Headlessの構成はもってこいだと思います。
フロントエンドとバックエンドのやりとりは、GraphQLを利用します。

![Screen Shot 2020-12-16 at 22.17.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221028/65d48e02-bc34-3935-a23b-abd1a50d526e.png)


※超巨大な事業になったときに、バックエンドはShopifyから移行は考えるかもです・・・ごめんなさい、Shopifyさん。

## 今回、やりたいこと
要件としては、3つになります。それが達成できれば、クリアです(ノ ꒪⌓꒪)ノ

    1. 今後のための基盤づくり
        - 拘って新機能を開発できるようにしたよね
        - 自社サービス(YAMAP, YAMAP MAGAZINEなど)との連携をやりたいよね
    2. 技術的なキャッチアップ
        - エンジニアとして、面白く開発したいよね
        - GraphQLで開発したいよね
        - Headlessにしたいよね
        - レコメンドの基盤を作りたいよね

この2つとは別に、[YAMAP STORE](https://store.yamap.com/)では ユーザ様に商品の良さを最大限に伝えるため、読み物というコンテンツ制作を重視しています。

そのため、

    3. コンテンツ制作をスケールしやすくするための基盤づくり

になります。

## コンテンツ制作の基盤づくり
すでに、ディレクター、ライターなど、コンテンツ制作チームは様々な人ががんばって日々コンテンツを制作しています。
基盤づくりでやりたいこととして、3つです。

    1. デザインクォリティを一定にしたい
    2. コンテンツの内容に注力してもらいたい
    3. ライターさんなど人が増えても、権限周りや管理をしっかりしたい

Shopifyのブログ機能だと、どうしても実現できなかったので、移行を決意しました。
ここでも、Headlessにしようと思い、Headless CMSを検討することになりました。

    1. デザインクォリティを一定にしたい
        - 繰り返しフィールドなどで、項目を固定化しやすい
    2. コンテンツの内容に注力してもらいたい
        - セクションごとにフィールドを分けて、テキストを流し込む＆画像アップロードするだけの状態を作る
    3. ライターさんなど人が増えても、権限周りや管理をしっかりしたい
        - メンバーが増えても、エンドポイント(コンテンツの種類)ごとに管理可能
        - Shopifyにログイン不要！

いろいろ検討した結果、国産のmicroCMSに決定しました。

上記の要件を満たせるかつ、**日本語**なので、コンテンツ制作チームが操作に困らない点が決定打でした(ノ ꒪⌓꒪)ノ

## 実現予定なこと
これらのやりたいことを図解したら、こんな感じになりました。

![Screen Shot 2020-12-16 at 22.36.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221028/5256f570-f2ad-1865-f75b-2da8a0cdb10c.png)

- React / Next.js
    - SPAとSSRを担っています
    - とはいえ、BFFとしても稼働にします
- Firebase Realtime Database
    - Shopify外でデータを持ちたい場合、利用します
    - もうShopifyアプリには頼らない(ノ ꒪⌓꒪)ノ
    - 今のところ、Firebaseで大丈夫ｗ
- [microCMS](https://microcms.io/)
    - Shopifyのブログから移行
    - Headless CMSにして、テンプレート化して、スケールしやすくします
    - いろいろな機能追加、お待ちしておりますｗ
- AWS lambda
    - レコメンドやバッチ周りを動かしています
    - 裏側で超がんばってくれている裏方屋

## 得られる恩恵 (はず)
- 爆速になる（はず）
- SEO最適化しやすくなる (はず)
- いろいろな機能開発がしやすくなる（はず）
- コンテンツ制作がしやすくなる（はず）
- 開発が楽しくなる (はず) ← **※ココ重要**

## 今回思ったこと
- Flexibility を考えて、ビジネス要件を満たすアーキテクチャ構築は大事
- オペレータのことを考えたシステム選択も大事
- エンジニアが楽しく開発できる環境構築はもっともーっと大事(ノ ꒪⌓꒪)ノ

## 今後の予定 (来年かな？)
現在、鋭意開発中です！来年にはお披露目できると思われます！
今後は、↓をやりたいですね。

- レコメンドをもっと改造したいなー
- バックヤードのシステムを刷新して、戦略的に在庫管理したいなー
- 商品管理をバックヤードで一元管理して、もっと効率管理したいなー

## 最後に
YAMAP では、様々な職種で募集しています。アウトドアに興味がある人は、ぜひ〜(ノ ꒪⌓꒪)ノ
https://www.wantedly.com/companies/yamap