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

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

昨年のShopifyとGASの連携のお話をしました。
（詳しくは → Shopify と GASを連携、そして、WMSと連携してみたお話)

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

どういった経緯？

YAMAP STORE がオープンしてから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を利用します。

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

今回、やりたいこと

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

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

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

そのため、

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

になります。

コンテンツ制作の基盤づくり

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

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

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

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

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

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

実現予定なこと

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

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

得られる恩恵 (はず)

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

今回思ったこと

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

今後の予定 (来年かな？)

現在、鋭意開発中です！来年にはお披露目できると思われます！
今後は、↓をやりたいですね。

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

最後に

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