Shopify Unite 2021において、ShopifyによるReactベースのカスタムストアフロント構築フレームワークであるHydrogenが紹介されました。わたしたちが考える未来のeコマースは、高速で、パーソナルで、ダイナミックなものです。Hydrogenは、わたしたちがそのビジョンの実現をどう見ているかを反映しています。
いよいよ、Hydrogenの開発者プレビューが利用可能になりました！Shopifyによってコマースのために最適化された一連のパワフルなコンポーネントと、クイックスタート環境が組み合わさり、Hydrogenは独自のカスタムストアフロントを今まで以上に素早く構築するのに役立ちます。
世界中の数百万のマーチャントと連携してわかったのは、たとえお客さまがどこにいても、パーソナライズされた文脈を提供する高速なユーザーエクスペリエンス(英語)がコマースには求められるということです。このことは、開発者にとって大きなチャレンジとなります。さまざまな技術スタックからトレードオフによってスピードかダイナミズムを選択しなければなりません。Hydrogenは、パフォーマンスを犠牲にすることなく動的なエクスペリエンスを構築するための多様なテクノロジーを組み合わせることで、よりシンプルな開発を可能にします。
わたしたちはHydrogenを、コマース、UX、開発者エクスペリエンスが交差する部分を最大限有効利用できるShopify独自のソリューションとして構築しています。そして、技術とコマースの専門知識を活用して、開発エクスペリエンスをよりシンプルで、高速で、楽しいものにします。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のデモをご確認いただけます。
Shopifyパートナープログラムでビジネスを成長させる
マーケティング、カスタマイズ、ウェブデザイン、開発サービスなど、あなたが提供するものが何であれ、Shopifyパートナープログラムが成功をサポートします。無料で登録して、収益シェアの機会、ビジネスを成長させるツール、情熱的なコマースコミュニティにアクセスしてください。
登録する原文：Gorka Madariaga、Jesse Phillips 翻訳：深津望
