Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hydrogenで 2022年〜を感じる

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Ryusou Ryusou
December 15, 2021
Programming
670
0

Hydrogenで 2022年〜を感じる

PWA Night vol.34 ～2021年最後はLT会！〜
https://pwanight.connpass.com/event/231422/

Avatar for Ryusou

Ryusou

December 15, 2021

More Decks by Ryusou

See All by Ryusou
Astro 3.0入門
Avatar for Ryusou nozaki
0
490
再実装 React Testing Library
Avatar for Ryusou nozaki
0
260
microCMSでimgixに入門する
Avatar for Ryusou nozaki
0
1.2k
Jamstack Conf 2021を見てブログ構成を見直した話
Avatar for Ryusou nozaki
1
1.4k
ユーザーが編集中の状態管理について考えよう
Avatar for Ryusou nozaki
3
7.2k
はじめてのUniversal JavaScript
Avatar for Ryusou nozaki
1
2.8k

Other Decks in Programming

See All in Programming
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
180
How I Won Prize Money at a Hackathon Using Codex and Symphony Alpha
Avatar for yasei no otoko yasei_no_otoko
0
130
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
Avatar for dachi dachi023
0
7.9k
Oxlintはいいぞ（続）
Avatar for Yuji Yamaguchi yug1224
1
480
【デモ】Kiroで体験する仕様駆動開発｜設計からコーディングまでAIと進める開発フロー
Avatar for 工藤皓夢 cmkudo
0
500
Dockerfile CMD for Node.js
Avatar for Ohno Keita grazie1999
0
140
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
Avatar for Kanaru kanaru0928
0
240
Hono + Inertia + React で LP を構築した話
Avatar for Yuka Ooka oukayuka
2
180
高専、大学編入、そして未踏へ〜プロダクト開発とキャリアの歩み - Technical College, University Transfer, and On to “Mitou” / My Journey in Product Development and Career
Avatar for __pkmiya pkmiya
0
100
VibeCodingからAgenticWorkflowへ
Avatar for starfish719 starfish719
0
940
Discordを用いたラボオートメーション関連情報収集の自動化
Avatar for noguhiro2002 noguhiro2002
0
460
30年振りにコンパイラの定数整数除算を改善した
Avatar for herumi herumi
9
4.3k

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
710
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
900
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
670
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
220
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
4.5k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
300

Transcript

  1. Hydrogenで 2022年〜を感じる @ryusou

  2. Hydrogenとは？ Shopifyが開発している React basedのフレームワーク https://hydrogen.shopify.dev/ ※現在開発者プレビュー段階のものになり ます。

  3. Hydrogenの注目ポイント ①React Server Componentsをいち早く試せる React は正式リリースされていない(α) Hydrogenは独自にラップすることで実現している → DEMO

  4. Hydrogenの注目ポイント ①React Server Componentsをいち早く試せる useQuery(useShopQuery) Hooksがサーバー側で動く....！！

  5. Hydrogenの注目ポイント ②「ヘッドレス」コマース + UIの提供 コマンド一つでECサイトの雛形が作れる TailwindCSS/Headless UIを利用 Next.js/Gatsby側にUIを組み込むこともできるらしい ヘッドレス　良い　＝独自にUIを組み立てられる 　　　　　　微妙　＝作るの大変(表裏一体ではあるが..)

  6. Hydrogenの注目ポイント ③ ViteでPWA(試したわけではないので....) vite-plugin-pwa： https://www.npmjs.com/package/vite-plugin-pwa

  7. まとめ Hydrogenには2022〜がつまっていた ヘッドレスコマース..etc + ヘッドレスUI は 流行りそう 外部APIは部分的に部分的に採用するのが 良さそう

  8. りゅーそう 株式会社 microCMS エンジニア Twitter @ryusou_mtkh イベントやっているので、ぜひ！

  9. 良いお年を！ @ryusou ありがとうございました