Hydrogenとは、Shopifyにより開発されたReactをベースにしたフレームワークです。今回は、2021年秋に開発者プレビューが利用できるようになったこのHydrogenの構造と、現時点でできること、そして今後期待される開発についてご説明します。
Shopifyでオンラインストアを構築する場合、テーマカスタマイズが最もよく使われている手法になるかと思います。2021年にはDawnのリリースもあり、テーマカスタマイズのみでも柔軟なストア構築が可能になってきたと言えますが、Hydrogenなどを使ってカスタムストアフロントを構築するメリットとして、以下の点が挙げられるのではないかと思います。
カスタムストアフロントとは
- フロントエンド開発のトレンドでもあるReactを使ったストア構築ができる
- Liquidの編集やアプリの追加だけでは実現できなかった、よりリッチなデザインやパーソナライズされたストアの構築ができる
これまでにも、Shopifyが提供するStorefront APIを使ったストアの開発は行われており、ヘッドレスコマースというキーワードがShopifyの特徴の一つにもなっていたわけですが、Hydrogenは、これまでのヘッドレスコマースの構築をよりスピーディーに、そしてより効率的に行えるツールだと言えるでしょう。
Hydrogenの特徴とはじめかた
Hydrogenの特徴として、以下の3つ技術スタックが使用されています。
- Tailwind CSS
- React (React Server Components)
- Vite
Reactを使ったフロントエンド開発の経験がある方の多くは、Tailwindを使ったスタイリングについて理解されている方も少なくないのではと思いますが、React Server Componentを使った開発に慣れていない方は、Hydrogenを始める前に一度理解を深めておくと良いのではないかと思います。ViteはVue.jsの開発者にとって開発されたビルドツールで、HMR(Hot Module Replac)等の機能でスピーディーに開発ができるビルドツールになります。
まず、Hydrogenを始めるにあたって、以下の準備が必要となります。
- yarnまたはnpmのインストール
- Node v14以上での開発環境
- 開発用ストア
- ↑のストアで作成したStorefront APIを使用するプライベートアプリ
主な構築のステップは、こちらのページに記載されているので、ドキュメントに記載されたステップに沿ってそのまま開発を進めることができます。
Hydrogenの構造
Hydrogenは、components、hooks、utilitiesそれぞれが持つ機能により、カスタムストアフロントを実現できる構造になっています。
- components
Hydrogenは、一般的なReactアプリケーション同様各コンポーネントに必要なpropsを渡し、動的に表示を切り替えるようになっており、商品の表示やコレクション表示など、表示するアイテムごとにそれぞれのコンポーネントがあり、購入に係る画面では、カート関連のコンポーネントを使用して購入画面を構築することができます。
- hooks
hooksは、Storefront APIを使ってストアのデータを取得してくる役割を担っており、各hooksで呼び出されたデータがコンポーネントに渡され、画面に表示されるようになっています。useShopQueryなどのhooksでは、graphqlのqueryを引値として渡すことで、表示に必要なデータを取得できるようになります。
- utilities
hooksを使って取得したデータを表示する際に使える関数や、コードが実行されたタイミングがクライアント側であるか、サーバー側であるかなどを判断するための関数を持っており、utilities内の関数を使用することで、より効率的な開発ができるようになっています。
現時点でできること
- 開発環境
テーマと違い、現時点でストア管理画面からコードを編集したり、カスタマイズなどをする形式はなく、ローカルにて開発を進めていく形式になります。また、yarn create hydrogen-app では、jsxファイルを生成するようになっているため、デフォルトでのtypescript対応はされておらず、typescriptで開発を進めたい場合は個人で設定する必要があります。
- デプロイ
Shopifyは、Hydrogenに最も適したデプロイ環境としてOxygenをあげていますが、現状は開発中のため、Oxygenを使用することはできず、CloudflareやHeroku、Google Cloud Runなどを使ってデプロイすることが可能になります。試しにGithubのレポジトリと繋いでHerokuにデプロイしてみましたが、特に問題なく購入画面まで進めたため、実際に手元で作成したHydrogenを本番環境で試してみたいという方は、Oxygenの開発を待つ中で、上記に挙げたプラットフォームを試してみても良いかもしれません。
今後期待されていること
Hydrogen関連では今後、Oxygenの開発とノーコードでのカスタマイズが期待されています。テーマ開発では、Gitを使ったバージョンコントロールとブランチごとのテーマ表示が可能になりました。Hydrogenでも、Oxygenが使用できるようになれば、Vercelのようにバージョンごとのデプロイ環境が作られ、ストアの管理画面より確認できるようになるかもしれません。また、Shopifyの公式Slackでは、hydrogen-and-oxygenというチャネルで、カスタマイズ画面の開発を進めている方のメッセージなどが投稿されており、今後はノーコードでHydrogenで開発されたストアのカスタマイズが可能になる日が来るかもしれません。
StoreHeroでは売れるストアの設計からご支援が可能です。お気軽にご相談ください。=>StoreHeroのサービス紹介資料を見る
Shopify×グロース支援のお問い合わせ
StoreHeroは、Shopify×グロースに必要なデータを集約したプラットフォームを活用したグロース支援を行っています。
Shopify、Shopifyアプリ、Google、Instagramなどのデータから伸びしろを可視化し、Shopify×グロースのエキスパートが改善提案＆実装支援を行い着実な成長を実現しています。
StoreHeroのサービスにご興味をお持ちの方は、お気軽にお問い合わせください。
