【Shopify】Hydrogenはどのように機能するのか？

Eコマースブランドがよく直面する問題は、現代のコマースプラットフォームが提供できるサービスに限界があることです。

自社のブランドビジョンに沿ってカスタマイズされたストアフロントを作りたいと考えています。また、ブランドに対する消費者の期待値は今まで以上に高くなっています。

消費者は、複数のチャネルにわたるブランド体験を求め、それがブランドアイデンティティと結びついていることを望んでいます。

これを提供するためには、標準のテーマやカスタムテーマで可能なことを超えた体験を提供する必要があります。

エンジニアやデザイナーの観点から、商品ページが他のすべてのページと同じ見た目になることを望んでいません。デザインの柔軟性を求めています。

Shopifyは、ヘッドレスコマースに特に力を入れており、これは特に豊かなカスタマーエクスペリエンスを提供したいEコマースブランドに対し、Hydrogenを提供することで、従来のフロントエンドの範囲を超えて拡張する能力を提供しています。

Shopifyストアをヘッドレス化することを検討しているなら、Hydrogenが選択肢として上がってきたかもしれません。

Hydrogenとは一体何なのでしょうか？ ヘッドレス化を進めることで得られる利点を実現するのに役立つのか？

一方、エンジニアとしては、Hydrogenが開発の効率性と柔軟性をどの程度提供してくれるのかに焦点を当てていきたいと思います。

2021年のUniteで発表されたShopify Hydrogenは、Reactベースのフレームワークで、よりパーソナライズされ、パフォーマンスが高いカスタムShopifyストアフロントを構築するための開発者向けツールセットです。

このヘッドレスフレームワークの目的は、開発チームを通じて、特別なShopifyカスタムフロントエンドストアフロントをより早く構築するお手伝いをすることです。

ShopifyはHydrogenを、「独自の考え方がありながらも柔軟性のある」ヘッドレスコマースサイトを構築するためのフレームワークソリューションとして提案しています。 

基本的に、これはShopifyのテーマインフラストラクチャの非常に初期のV3であり、カスタムShopifyストアフロントの未来です。

これまで、eコマースの開発者は、自分たちの創造的なビジョンを達成するために、各々の妥協点を持つさまざまな技術の中から選択をしなければなりませんでした。

今までは、サイトの速度を優先するか、あなたの経験がどれだけダイナミックで豊かにできるかを選ぶ必要がありました。

Hydrogenは、パフォーマンスを妥協することなく、特にダイナミックなショッピング体験を構築するために、さまざまな技術を組み合わせています。

迅速に開始できる開発環境、スマートキャッシング、コンポーネント、組み込みのキャッシュデフォルトがあります。

Hydrogenは、あなたが求める速度とあなたが望む創造性を提供することを目指しています。 

既存のShopifyストアは、ダッシュボードからHydrogenをセールスチャネルとして追加し、GitHubアカウントを接続するだけで始めることができます。

OxygenはShopifyのHydrogenストアフロント用のホスティングソリューションです。

ホスティングサーバーが全世界に分散しているOxygenは、ブランドがヘッドレスコマースに期待するローディング速度を実現します。

Oxygenは、大量のトラフィックを処理し、フラッシュセールやヒットしたソーシャルキャンペーンをサポートするために構築されました。

大きなブランドでも、大量のアクセスでサイトがクラッシュすることもありますので、Oxygenの目指すところは、優れたサイトパフォーマンスを維持することです。

また、ShopifyダッシュボードのHydrogenセールスチャネル内でOxygenを追加するのも非常に簡単です。

他のヘッドレスソリューションと同様に、HydrogenはReactフレームワークを使用して、非常に高パフォーマンスで無限にカスタマイズ可能なオンラインストアフロントを作成します。

Shopifyによれば、彼らがHydrogenを構築したのは、JAMStackフレームワークがプラットフォームに最適ではないと分かったからです。 従来のLiquidベースのShopifyテーマからHydrogen React Shopifyストアフロントに移行すると、eコマースストアのフロントエンドはAPIを介してのみバックエンドに接続されます。

Hydrogenには、ヘッドレスへのよりシームレスな移行を実現するための、バックエンドに直接マップする事前に構築されたコンポーネントとフックがあります。

Storefront APIにより、ブランドは特定のサードパーティの統合を新しいストアフロントに接続することができ、以前に依存していたShopifyアプリを置き換えます。

そして、それは「サーバーサイドレンダリング（SSR）、ハイドレーションミドルウェア、クライアントコンポーネントコード変換」のためにViteに依存しています。

Hydrogenフレームワークへの移行は、オープンソースのJavaScriptフレームワークであるReact.jsを優先することを意味します。

Shopifyと同様に、Shogun FrontendもReactをヘッドレスストアフロントの未来と考えています。

Liquidは主にShopifyテーマ開発に限定されているのに対し、Reactは広く使用されており、その人気はますます高まっています。

Hydrogenを使用すると、開発者はShopifyテーマの構築と修正にLiquidを使用することはありません。

また、ShopifyとHydrogenを使用してヘッドレス化することには利点と欠点があります。それらのメリットとデメリットを一つずつ見ていきましょう。

Shopifyが大規模なプロジェクトに多大な労力を投入していることを考えると、Hydrogenには大きな魅力があります。開発段階で利点がいくつかあります。

React.js

ShopifyはReact.jsをダイナミックで、速く、カスタマイズ可能なコマースの未来と考えています。

これにより、React.jsがeコマースの次なる大きなトレンドとしてさらに信憑性を得ることになります。 

スターターキットが手に入る

Hydrogenを始める人々には、複数のスターターテンプレートとデモストアがすぐに利用可能です。

（例：ボタン、トグル、ナビゲーション）。

自分で要素を作る必要があるとはいえ、事前に構築されたコンポーネントを最初から使えるのは大きなメリットです。

チームがHydrogenに貢献できる

Shopifyは、Eコマース開発コミュニティからHydrogenの開発に協力を得ることを期待しています。特に強固な開発チームを持っている場合、Shopifyのサポートを受けながら、製品ビジョンの初期の段階から形成することができます。 

作成したコンポーネントを再利用できる

スターターキットが利用可能であるため、始めると、初期の要素を作成し、それらを必要に応じてサイト全体で繰り返し再利用することができます。

事前に構築されたアプリ接続が利用可能

現時点でHydrogenと統合されているアプリがいくつかあります。これには、SanityやContentfulのようなCMSソリューション、さらにはKlaviyo、Gorgias、Recharge、Nostoなどのアプリが含まれます。 

Hydrogenにもいくつかのデメリットはあります。それを解説していきます。

スクラッチから構築する開発者重視のワークフロー

コード重視の取り組みであるこのShopifyフレームワークは、ヘッドレス化の利点を提供しますが、すべてのものはHydrogenで開発者によって構築する必要があります。

これは、技術をもたないメンバーがサイトのフロントエンドレイヤーにアクセスして変更を加えることができないことを意味します。2022年のロードマップにはドラッグ&ドロップツールが利用はできません。Hydrogenは、開発リソースを持つEコマースチームに最適でしょう。‍ 

まだストアのプレビューがありません

自分でプレビュー環境を構築するか、新しいページ構築ソリューションのいずれかを使用する場合を除いて、Hydrogenで構築したストアのリアルタイムプレビューを見ることはできません。

これは技術をもたないEコマースチームメンバーとの実装を難しくする可能性があります。

React Server Componentsを使用

Hydrogenの出力は静的なプログレッシブウェブアプリ（PWA）ではありません。

そのため、開発者はShopifyサーバーの開発を必要とします。React Server Componentsは、新しい「ベータ版」とも言えるでしょう。

とても良いアイデアではありますが、まだ開発者の大部分には完全に採用されていません。

CMSを接続する必要があります

Shopifyは、HydrogenストアフロントにCMS機能を提供するためにSanityと協力しています。

Sanityは、チームがコンテンツデータ（画像、テキスト、ビデオ）のスキーマを作成することで、一定のローコードコンテンツ管理を可能にする、開発者向けのサードパーティCMSです。 

アプリのサポートは最小限

Shopifyは最終的なアプリサポートを示唆していますが、まだサードパーティアプリエコシステムの初期の段階です。

まだすべてのAPIは利用可能ではありません。使用したい各Shopifyアプリに対して、自分でミドルウェアを作成する必要があります。 現時点ではウェブストアフロントのみをサポートしています。Hydrogenは、スマートデバイス、モバイルアプリ、ビデオゲームなどの他のタイプのカスタムストアフロントを作成するためには使用できません。