Hydrogenによる構築：開発者プレビューが利用可能になりました

ShopifyによるReactベースのカスタムストアフロント構築フレームワークである「Hydrogen」の開発者プレビューについて、解説します。

最終更新： 2021年11月16日

Shopify Unite 2021において、ShopifyによるReactベースのカスタムストアフロント構築フレームワークであるHydrogenが紹介されました。わたしたちが考える未来のeコマースは、高速で、パーソナルで、ダイナミックなものです。Hydrogenは、わたしたちがそのビジョンの実現をどう見ているかを反映しています。

いよいよ、Hydrogenの開発者プレビューが利用可能になりました！Shopifyによってコマースのために最適化された一連のパワフルなコンポーネントと、クイックスタート環境が組み合わさり、Hydrogenは独自のカスタムストアフロントを今まで以上に素早く構築するのに役立ちます。

世界中の数百万のマーチャントと連携してわかったのは、たとえお客さまがどこにいても、パーソナライズされた文脈を提供する高速なユーザーエクスペリエンス(英語)がコマースには求められるということです。このことは、開発者にとって大きなチャレンジとなります。さまざまな技術スタックからトレードオフによってスピードかダイナミズムを選択しなければなりません。Hydrogenは、パフォーマンスを犠牲にすることなく動的なエクスペリエンスを構築するための多様なテクノロジーを組み合わせることで、よりシンプルな開発を可能にします。

わたしたちはHydrogenを、コマース、UX、開発者エクスペリエンスが交差する部分を最大限有効利用できるShopify独自のソリューションとして構築しています。そして、技術とコマースの専門知識を活用して、開発エクスペリエンスをよりシンプルで、高速で、楽しいものにします。Hydrogenは完全オープンソースであり、みなさんと一緒に構築していきたいと考えています。ぜひ一度試してみて、改善点のフィードバックをお願いします。

Hydrogenを試してみる

未来のコマースを支える機能

Hydrogenの構成要素のおかげで、はじめから優れたコマースエクスペリエンスが実践できます。ストリーミングServer-Side Rendering (SSR) の組み合わせにより、最初の高速なレンダリングが可能となり、React Server Componentsが効率的なレンダリング後のステートアップデートをおこない、ビルトインのキャッシングとデータフェッチポリシーによってマーチャントは最高のコマースとユーザーエクスペリエンスのバランスをとることができます。

これらの機能を実現するためには、ReactとViteの可能性を押し広げ、最適化されたコンポーネントと開発者ツールの構築に注意深くなる必要がありました。ReactコアチームおよびGoogle Auroraチームと密に連携することで、これらが可能となりました。コミュニティからのフィードバックと、これから開発者にもたらされるものを見るのが、とても楽しみです。

Hydrogenアーキテクチャの詳細については、開発者ドキュメント(英語)をご覧ください。

セットアップを省略してすぐに構築

わたしたちは、開発が楽しいものであるべきだと本気で信じています。Hydrogenを使うことで、スキャフォールディングや設定に時間を費やすことなく、デザインから構築までを素早く実行できます。

Hydrogenには、スターターテンプレートが含まれ、数分ですぐに使える完全な購入ジャーニーをもったストアフロントを稼働させられます。このテンプレートはShopifyストアとすでに連携しているプロジェクトの基本ファイル構造を初期化するため、設定を省略してコーディングを始めることができます。

Shopifyデータモデルを中心に構築され、もっとも大変な仕事のほとんどをおこなうcomponents、hooks、utilitiesがすぐに使える状態になっているため、Hydrogenは開発プロセスを加速させます。これらのピースは効率的なデータ取得のためにStorefront APIに直接統合されているので、ShopifyのAPIやサードパーティのデータソースとやり取りするGraphQLクエリの手間と時間を削減します。

コンポーネントとストアフロントの雰囲気を完全にカスタマイズすることは、ストアを目立たせるうえで不可欠です。そのためHydrogenでは、スタイリングをシンプルにして高速化させるために、Tailwind CSSを使用しています。

開発作業中は、Viteによる開発環境が迅速なフィードバックループとビルドとモジュールの管理を可能にし、スムーズな開発エクスペリエンスのためにホットリロードを提供します。

Hydrogenにご協力ください

わたしたちはみなさんと一緒に構築していきたいので、Hydrogenはオープンソースになっています。アーキテクチャ、APIのデザイン、開発者エクスペリエンスに関するフィードバックは、フレームワークとツールを形成するうえで役立ちます。今後数ヶ月、みなさんからのフィードバックを元に、迅速な改良によってHydrogenを進化させていき、次世代のストアフロントを機能させるために整えていきます。ぜひHydrogenをお試しいただき、フィードバックをお寄せください！　始めるための方法は以下のとおりです。

ワンクリックでHydrogenを試してみましょう。
Hydrogenでカスタムストアフロントの構築を始めるには、こちらのチュートリアルに沿ってください。
GitHubのHydrogenコミュニティに参加して、リポにフィードバックをシェアしましょう。
簡単なアンケートであなたの経験を教えてください。
次回のパートナータウンホールに登録しましょう。次回はHydrogen Takeoverです！　プロダクト＆エンジニアチームから最新の情報を得て、ライブで質問し、Hydrogenのデモをご確認いただけます。