【Shopify Hydrogen】触ってみた

Hydrogenとは（現時点では開発者プレビュー）

Hydrogenは、Shopifyのカスタムストアヘッドレスを構築するために使用されるフロントエンドのWeb開発フレームワークです。このフレームワークには、あなたのブランドをユニークにするためのスタイリングやデザインに時間を費やすことができるように、必要な構造、コンポーネント、ツールが含まれています。（引用）

Shopifyは基本的にテンプレートを使うことで簡単にサイトを公開することができます。
テンプレートをHTML、CSS、JS、Liquidを使ってカスタマイズすることで比較的短時間でストアの公開が可能です。
ただ、よくも悪くもテンプレートベースのサイトになってしまい独自性を出すのが難しい場合があります。
そこでShopifyが開発を進めているのがHydrogenです！
Shopifyが用意しているAPIを独自で構築したフロントサイトから使用し独自のECサイトを構築する事ができます。
１からフロント環境を構築するのは大変なため、各種Shopifyを用いたECに必要な機能が搭載されているReact製のFrameworkとなります。
公式：Hydrogen Framework for dynamic commerce
Docs：Hydrogen

技術構成

• ・React.js
• ・Vite
• ・TypeScript（Viteのためno configで対応）
• ・Tailwind CSS

使ってみた感想

最近何かと話題のViteが使われているため、環境構築がかなりスムーズです。
ローカル環境のサーバー起動速度も爆速で、開発体験にストレスがあまりなさそうな印象。
初期段階から様々なコンポーネントが用意されており開発者間でも認識をすり合わせながら開発ができそう。
Reactをある程度理解できる方が見たらサクッと触れそうなためShopifyのLiquidでの開発よりフロントエンド系のエンジニアには好まれそうだなと感じました。

テンプレートに組み込まれているコンポーネント

• ・Button
• ・Cart
• ・CartIcon
• ・CartIconWithItems
• ・CartProvider
• ・CartToggle
• ・CartUIProvider
• ・CurrencySelector
• ・DefaultSeo
• ・FeaturedCollection
• ・Footer
• ・Gallery
• ・Header
• ・Layout
• ・LoadingFallback
• ・LoadMoreProducts
• ・MobileCountrySelector
• ・MobileNavigation
• ・MoneyCompareAtPrice
• ・MoneyPrice
• ・Navigation
• ・NotFound
• ・OpenIcon
• ・ProductCard
• ・ProductDetails
• ・ProductOptions
• ・Seo
• ・Welcome

CSS

CSSはDefaultでTailwindCSSに対応しています。不要であれば、Doc内に削除の方法も書かれており、プロジェクトに合わせたCSSの管理ができそうです。

Routes

src/pages配下のコンポーネントは、すべてルートとして登録されるようです。

スターターガイド

スターターガイドに関してはこちらに詳しく記載があります！
少ない手順で簡単に環境を構築することができるので一度触ってみてはいかがでしょうか。2022年内に正式にリリースするようなので注目のフレームワークです。

Sample Code

サンプルのコードをGithubに置いてます。
興味ある方は見てみて下さい。
https://github.com/niiharamegumu/HydrogenStore