はじめに
こんにちは！株式会社ブロードエッジ・ウェアリンク CTOの高丸です。
今回は、Qiita Advent Calendar 2024の4日目の記事です。
1日目の記事でも説明した、wine@（ワインアット）オンラインストアのデザインリプレイス（アーキテクチャリプレイス）プロジェクトで技術選定をする際に、Hydrogenフレームワークを選定したことに関して書いていきます。
ヘッドレス化の決断
1日目の記事でも紹介しましたが、
wine@は、2022年にサービスを開始して以来、オフラインのワインバーでワインの飲み比べができ、オンラインストアでその好みのワインが買えるという、OMO（Online Merges with Offline）のコンセプトを実現してきました。
しかし、ECとしてのUXに関してはまだまだ改善の余地がありました。
私が入社したのは2023年3月ですが、デザインリプレイスのプロジェクトがすでに走っており、BtoC向けUXに強いデザイン会社との協働で、UI/UX面の刷新案がまとまりつつありました。
ところが、その洗練されたUIをShopifyのテーマ上でそのまま実現するのは至難の業。
「じゃあ、どうやる？」と考えたとき、選択肢はほぼヘッドレス化しかありませんでした。
なぜヘッドレス化だったのか？
弊社にはカルテというワインの好み診断システムがあり、まずそれとShopifyを連携する必要があります。
さらに、刷新されたUIでは、ShopifyデフォルトのEC機能に追加実装する必要があり、
柔軟性やメンテナンスを考えると、ヘッドレス化しかありませんでした。
私自身、入社前に副業等でShopifyの経験があり、APIがしっかり整備されている点には信頼感を持っており、ヘッドレス化に不安はありませんでした。
ただし、ヘッドレス化と言っても、実現方法は深く検討する必要がありました。
「Hydrogen（Remix）」との出会い
ヘッドレス化が決まった段階で、私は2つの大きな選択肢を検討しました。
- Next.jsなど、現在主流のフロントエンドフレームワークを使う
- Shopify謹製のフレームワーク「Hydrogen」を使う（HydrogenはRemixベース）
私の知り合いのフロントエンドエンジニアに相談すると、「Next.jsを使ったほうが無難」といった声が多かったです。
私もNext.jsの経験はあったので、最初はそちらに気持ちが傾いていました。
ところが、Hydrogenのドキュメントや思想に触れるうち、私の中で「これはイケるかも🤔」という感覚が強まっていきました。
Remixをベースとした構成は、シンプルさが印象的。
Hydrogenは、Shopify向けに特化しているため、EC用のコンポーネント群やShopify API呼び出しの仕組みが最初から揃っています。
さらには、ShopifyのOxygen環境へのデプロイが容易で、開発に集中してECサイトの運用ができます。
開発チームとして、技術的なチャレンジもやっていきたいと想っていた私は、このときには、Hydrogenで心は決まっていました。
Remixとは
この記事を執筆している時点では、人気が徐々に増え始めているので、詳しい説明は割愛しますが、
Remixは、
-
loaderとactionという操作で、サーバーサイドの処理が可能 - 入れ子のルーティングと、並列のデータフェッチ
- Web標準技術を重視している
といった特徴があります。
これらがあるおかげで学習曲線が緩やかであるというところが、今回の技術選定の重要なポイントかなと思います。
Remixも、Reactベースではあるので、基本的なReactの知識は必要にはなりますが、それ以外はWeb標準を使っているところが多く、Web開発者には馴染みが深いと思います。
また、入れ子のルーティングもわかりやすく、React関連で「コロケーションをどうするか」と議論になる部分も、すんなりコロケーションしていく形で進められます。スクラッチでReactアプリケーションを作っていく上でのルールとしては、非常にわかりやすいと思います。
SSRもしやすく、SEO観点でも問題ないです。
技術的なチャレンジと制約
ただし、Hydrogenはまだ新しく、採用事例はNext.jsに比べて圧倒的に少ないです。
また、HydrogenはShopifyに特化しており、Remixそのものと微妙に違う部分もあります。（特にOxygen環境）
加えて、ヘッドレス化する上で、大きな問題となるのは、Shopifyアプリにどれだけ依存しているかです。
アプリストアに公開されているアプリは、Liquid（Shopifyのテンプレート言語）向けのもので、オンラインストアのテーマ上でだけ使えるようなものがほとんどでした。
弊社も最速のECサイト構築を求めて、Shopifyアプリを多用していました。
つまりはどうにかして、Shopifyアプリを脱却しなければいけませんでした。
Shopify中級者以上向けの情報になりますが、使っていたアプリで影響がありそうだったのは、以下のアプリたちでした。
- Omni Hub（これ自体というよりは、付随する機能群が影響あり）
- Growave（弊社ではお気に入りの機能のために使われていました）
- All in Gift（のしやラッピングのオプション）
- 配送日時指定.amp（配送日時指定）
結果として、段階的なリリースのうち、Checkout Extensionへの移行やプランアップグレードなどで対応しました。（詳しくは後日の記事で紹介していきます）
これから、もしShopifyをヘッドレス化しよう、Hydrogenを導入しようと思っている方々は、
まずは、ShopifyアプリのHydrogen対応（API機能）があるかを確認することをおすすめします。
この技術選定はアリだったのか？
Next.jsが着実にデファクトスタンダードの地位を築きつつある裏で、Remixの人気は増えていると思います。
最近のNext.jsは一層便利になる一方で、パフォーマンス向上のための仕組みが増え、個人的には時々「ちょっと覚えていくのは疲れるな…」と感じることもあります。
もちろん、これは好みの問題であり、Next.jsは素晴らしいフレームワークです。
しかし、Remixは私にフィットしました。
Remixを使用して得た知見も、後日の記事で書いていきたいと思っております！
Discussion