Shopifyのストアフロントを作成するReactベースのフレームワークHydrogenを試してみた。
(Shopify用ということを読み飛ばしていて汎用的なフレームワークと勘違いした…)
公式ページにも記載されている通り、まだDeveloper previewなので注意。
本記事ではv0.6.3を使用した。
使用ライブラリ等
| ライブラリ等 | メモ | |
|---|---|---|
| UI | React | Server Componentsを使っているためv18を使用 |
| UIコンポーネント | Headless UI + Tailwind CSS | |
| ルータ | React Router | v6がリリースされたばかりだが、2021/11/11時点ではv5を使用 |
| Web API | GraphQL | graphql-tagを使用 |
| ビルド | Vite | |
| サーバサイド | Express |
TypeScript
yarn create hydrogen-app で作成されるscaffoldではJavaScriptが使用されているが、特に何も設定を追加せずともTypeScriptを使用できる。(Viteの恩恵)
ただしコンパイルオプション等を変更する場合は tsconfig.json を追加する必要がある。