JamStackとヘッドレスコマースの事例

Shifter Advent Calendar 2020 ということで、Shifterと親和性の高いというかShifterのテックスタックそのものであるJamStackを使ったヘッドレスコマースの事例を集めてみました。

Shifterを使ってWordPressやJamStackベースでコマースサイトを作ってみたい方はぜひご参考にしてみてください（圧倒的に英語の情報が多いですが:sweat_smile:）。

# そもそもヘッドレスコマースとは何か？
APIベースでコマースサイト（日本では一般的にECサイトやオンラインショップと呼ばれるもの）のフロント機能とバックエンド機能を切り離し、ヘッドであるフロントは自由に差し替えてコマース体験を提供しようという技術的なアプローチです。

過去２回、[Shifter Meetup](https://eventregist.com/p/JP_GetShifter)で登壇させていただいた資料がありますので、詳しくはこちらをご覧ください。

- [ヘッドレスコマースを実現する Shopifyのストアフロント用APIとSDKについて](https://speakerdeck.com/benzookapi/hetudoresukomasuwoshi-xian-suru-shopifyfalsesutoahurontoyong-apitosdknituite) @ [[6/3 Zoom開催] Shifter オンラインミートアップ！](https://eventregist.com/e/z2AE9hWSezLz)

- [ShifterでのShopify Headless Commerceの活用](https://speakerdeck.com/benzookapi/shifterdefalseshopify-headless-commercefalsehuo-yong) @ [[8/5 Zoom開催] Shifter オンラインミートアップ！真夏の Shopify 特集〜](https://eventregist.com/e/EELmUej3c34Ba)

豊富なAPIが揃っているマルチチャネルコマースプラットフォームの[Shopify](https://www.shopify.jp/)は、ヘッドレスコマースと相性の良いサービスと言えます（実際これから紹介する事例もそのほとんどがShopifyを使ったものです）。

ShopifyのAPIの詳細については、[こちらの開発者サイト](https://shopify.dev/concepts/shopify-introduction)をご覧ください。

# ということで事例

「JamStack Headless Commerce」というキーワードでインターネットを検索するとたくさん情報が出てきますが、私がお勧めするのは、今年開かれたNetlify主催の[Headless Commerce Summitの動画](https://www.netlify.com/blog/2020/09/03/watch-the-videos-from-headless-commerce-summit-e-commerce-jamstack-stories/)です。前述のようにShopifyの事例が多いですが、その他のものもあります。その中で以下の動画は特にお勧めです。

- [The Future of Commerce is Headless](https://www.youtube.com/watch?v=s3hDghdIiFY&feature=youtu.be)
- [Beyond the Shopify Storefront: Headless Commerce Considerations](https://www.youtube.com/watch?v=kKZ_-9tM6dg&feature=youtu.be)
- [Scaling Your E-commerce with Vue Storefront](https://www.youtube.com/watch?v=seNgpGrwNBY&feature=youtu.be)

ちなみに２番目の動画のスピーカーである[Kelly Vaughnさん](https://twitter.com/kvlly)は、Shopifyパートナーとして[Shopifyの開発者向けTwitchチャネル](https://www.twitch.tv/shopifydevs)などで開発者向けの配信もされています。ご興味ある方は覗いてみてください。

ところで技術的アプローチの事例はわかったけど、実際にビジネスでどのように採用されているかの事例もみたいという方もいらっしゃるでしょう。その場合は、上記の私の資料でも紹介している以下のブログをお勧めします。ヘッドレスコマースの採用の経緯やそのメリットだけでなくてデメリットも紹介されているので、本格的に導入を考えられている方は参考にしてみてください。

- [柔軟なEコマースを実現する「ヘッドレスコマース」とは？　事例やメリットを紹介](https://www.shopify.jp/blog/headless-commerce)

またJamStackを採用する際によく使われる[Gatsby](https://www.gatsbyjs.com/)というフレームワークがありますが、そのグッズサイトもShopifyを使ったヘッドレスコマース（さらにこちらは[PWA](https://web.dev/progressive-web-apps/)化もされています）として構築されています。フレームワークのサイトだけあって、実装の事例としてとてもよくできていると思います。

- [Gatsby Store](https://store.gatsbyjs.org/)

# JamStackとヘッドレスコマースの情報収集

日本ではまだ情報が少ないヘッドレスコマースですが、[こちらの佐藤さんという方](https://twitter.com/shotasato_nsw)はShopifyパートナーであり、JamStackやヘッドレスコマースの最新情報を海外のもの含め多数発信されています。Shopify自体の最新情報も最速で発信されているので、この分野に興味のある方はフォローをお勧めします。

また彼の所属する[non-standard world社のブログ](https://www.non-standardworld.co.jp/blog/)もJamStack、PWA、ヘッドレスコマースの記事がたくさん掲載されています。

# 最後に

簡単ではありますが、JamStackとヘッドレスコマースの事例と情報ソースをまとめてみました。Shifterでコマースサイトを作りたい方の参考になれば幸いです。

最後にちょっとした宣伝ですが、私がShifterに興味を持ったきっかけとして、そのベースとなっているWordPressとShopifyの思想や仕組みの類似性があります。WordPress（Shifter）もShopifyも開発者やパートナーのコミュニティを大事にし、プラグインやアプリと呼ばれる拡張機能を公開してユーザーに多大なメリットを提供することで成長してきました。こういったエコシステムが機能していることは両者の強みかと思います。

もしヘッドレスコマースだけではなく、そうしたShopifyのエコシステムに開発者として参加することに興味を持たれた方は、以下のブログもご覧になってみてください。

- [Shopifyアプリ公開パーフェクトガイド：アプリエコシステムに上手に参加する方法](https://www.shopify.jp/blog/partner-app-store-publishing-guide)

それでは皆さん、Happy Coding & Christmas!