Slide 1
Slide 1 text
Hydrogenで
2022年〜を感じる
@ryusou
Slide 2
Slide 2 text
Hydrogenとは？
Shopifyが開発している
React basedのフレームワーク
https://hydrogen.shopify.dev/
※現在開発者プレビュー段階のものになり
ます。
Slide 3
Slide 3 text
Hydrogenの注目ポイント
①React Server Componentsをいち早く試せる
React は正式リリースされていない(α)
Hydrogenは独自にラップすることで実現している
→ DEMO
Slide 4
Slide 4 text
Hydrogenの注目ポイント
①React Server Componentsをいち早く試せる
useQuery(useShopQuery)
Hooksがサーバー側で動く....！！
Slide 5
Slide 5 text
Hydrogenの注目ポイント
②「ヘッドレス」コマース + UIの提供
コマンド一つでECサイトの雛形が作れる
TailwindCSS/Headless UIを利用
Next.js/Gatsby側にUIを組み込むこともできるらしい
ヘッドレス 良い ＝独自にUIを組み立てられる
微妙 ＝作るの大変(表裏一体ではあるが..)
Slide 6
Slide 6 text
Hydrogenの注目ポイント
③ ViteでPWA(試したわけではないので....)
vite-plugin-pwa：
https://www.npmjs.com/package/vite-plugin-pwa
Slide 7
Slide 7 text
まとめ
Hydrogenには2022〜がつまっていた
ヘッドレスコマース..etc + ヘッドレスUI は
流行りそう
外部APIは部分的に部分的に採用するのが
良さそう
Slide 8
Slide 8 text
りゅーそう
株式会社 microCMS エンジニア
Twitter @ryusou_mtkh
イベントやっているので、ぜひ！
Slide 9
Slide 9 text
良いお年を！
@ryusou
ありがとうございました