Slide 1
Slide 1 text
2023/02/03 #kyotojs Takuma HANATANI(@potato4d)
TSX First な Zero-Runtime SSG
@potato4d/dodai とその仕組み
Slide 2
Slide 2 text
- ⾃⼰紹介
- @potato4d/dodai の概要
- 既存ソリューションの課題感とアンサー
- ビルドの仕組み
- おわりに
■ Agenda
Slide 3
Slide 3 text
- ⾃⼰紹介
- @potato4d/dodai の概要
- 既存ソリューションの課題感とアンサー
- ビルドの仕組み
- おわりに
■ Agenda
Slide 4
Slide 4 text
@potato4d
- LINE株式会社のエンジニアリングマネージャー
- 副業で合同会社ElevenBackの代表
- 普段は HR 領域のプロダクトの開発・マネジメント
- プロダクトのスタックは React/TypeScript が中⼼
- React & Styled & React Query と Next.js & Chakra +α
- 関⻄出⾝で今⽇は東京から戻ってきました 🏃💨
Slide 5
Slide 5 text
- ⾃⼰紹介
- @potato4d/dodai の概要
- 既存ソリューションの課題感とアンサー
- ビルドの仕組み
- おわりに
■ Agenda
Slide 6
Slide 6 text
@potato4d/dodai
ランタイムJSゼロ 最⼩限の洗練された機能
All TSX で構築可能
https://github.com/potato4d/dodai
テンプレート記述はすべてTSXであり
専⽤のテンプレートエンジンは不要。
SPA開発と同じ技術でサイトも構築
全ての処理をビルドタイムで実⾏。
ランタイムJSにはオピニオンを持たな
いため軽快であり、かつ機能拡張時は
任意の技術でハイドレーション可能。
パスベースのルーティング、ホットリ
ロードなど欲しい機能は完備。静的
サイト出⼒以外の機能は持たず、アッ
プデートのコストは最⼩限。
想定ケースは1~5個の固定ページと
N個の動的ページがあるサイト
Slide 7
Slide 7 text
- ⾃⼰紹介
- @potato4d/dodai の概要
- 既存ソリューションの課題感とアンサー
- ビルドの仕組み
- おわりに
■ Agenda
Slide 8
Slide 8 text
既存のSSGソリューションの課題点
- アプリケーションエンジニア寄りの技術は Too much になりすぎる
- Next/Nuxt などはリッチすぎてアップデート追従のコストが⾼い
- Astro などは DSL が⼀級市⺠であり、TSX 対応はあれど最優先ではない
- Webサイト制作寄りの技術は SPA 技術との格差がありすぎる
- Numjucks など機能⾯で下位互換のDSLは恩恵が薄い
- データの取扱を型など含めて安全に取り回せる技術がない
Slide 9
Slide 9 text
ワガママなWeb Appエンジニアが実現したいこと
できればSPA開発と同じ
TypeScriptに守られたTSXで
HTML・データを管理したい
更新頻度が低いWebサイトの
依存関係に悩まされたくない
技術スタックはそのままに
ランタイムで動くJSはゼロにしたい
Slide 10
Slide 10 text
技術……
• Web App エンジニア向けの技術で
• SSR/ISRをしないような更新頻度と規模のサイトを
• 低い開発コストかつ高いDXのもと開発する
Slide 11
Slide 11 text
技術……
• Web App エンジニア向けの技術で
• SSR/ISRをしないような更新頻度と規模のサイトを
• 低い開発コストかつ高いDXのもと開発する
結論：ニーズが狭いので自分で見繕うしかない
Slide 12
Slide 12 text
作った
Slide 13
Slide 13 text
dodai での解決 ①
TSX First
- Reactを利⽤しており、いつもの記法でコーディング
- export const でページのレンダリングを表現
Everything is TypeScript
- 動的ページの出⼒データも export const で管理
- 安全にページデータの取扱が可能
Slide 14
Slide 14 text
pages/items/[item].tsx の例。
Head が 内に、 Page が layouts/default.tsx の children にて描画される。
Slide 15
Slide 15 text
layouts/default.tsx のデフォルトの設定。
head と children を受け取り、それぞれ適切に描画を行う。
Slide 16
Slide 16 text
data/items/[item].tsx のデフォルト値。
export const data が自動的に /items/:item にマッピングされる。
Slide 17
Slide 17 text
dodai での解決 ②
React の Server Renderer で HTML を出⼒
- renderToStaticMarkup で完結する世界
- Hydration ⽤のコードも出現しない
原則ランタイムの環境は提供しない
- ランタイムJSが必要な場合は別途環境構築を要求
- 脱出ハッチが必要になるケースは SSG 以上の要件と
認定
Slide 18
Slide 18 text
実際の renderToStaticMarkup のコード。
import したメタデータを props/children として流し込んでいる。
Slide 19
Slide 19 text
dodai での解決 ③
最⼩限の機能
- Path-based routing
- Dev server
- Hot reload
最⼩限の依存
- glob や chokidar など⼗分に枯れた10個のみ
Slide 20
Slide 20 text
最新版(v0.5.4)の最新の依存関係。
基本的には小粒でドラスティックな変化のないパッケージが並んでいる。
Slide 21
Slide 21 text
- ⾃⼰紹介
- @potato4d/dodai の概要
- 既存ソリューションの課題感とアンサー
- ビルドの仕組み
- おわりに
■ Agenda
Slide 22
Slide 22 text
dodaiの利⽤技術
コアとなる技術 dodai 内で書かれている技術(ライブラリ⾮依存)
コア機能を補助するためのライブラリ
chokidar
Commander.js
consola
Express
glob
fs-extra
HotReload
boilerplate
Slide 23
Slide 23 text
dodaiのアーキテクチャ(build編)
Main Process
.tsx
Original Files
HTMLファイル
最終成果物
(./dist/*)
画像や robots など
Reactのための中間成果物
(./.dodai-build/*)
.js
File System
Program
Slide 24
Slide 24 text
dodaiのアーキテクチャ(build編)
Main Process
.tsx
Original Files
① Compiler API で Call
HTMLファイル
最終成果物
(./dist/*)
画像や robots など
File System
Program
Reactのための中間成果物
(./.dodai-build/*)
.js
Slide 25
Slide 25 text
dodaiのアーキテクチャ(build編)
Main Process
.tsx
Original Files
① Compiler API で Call
② トランスパイル
HTMLファイル
最終成果物
(./dist/*)
画像や robots など
File System
Program
Reactのための中間成果物
(./.dodai-build/*)
.js
Slide 26
Slide 26 text
dodaiのアーキテクチャ(build編)
Main Process
.tsx
Original Files
① Compiler API で Call
② トランスパイル ③ 成果物を書き出し HTMLファイル
最終成果物
(./dist/*)
画像や robots など
File System
Program
Reactのための中間成果物
(./.dodai-build/*)
.js
Slide 27
Slide 27 text
dodaiのアーキテクチャ(build編)
Main Process
.tsx
Original Files
① Compiler API で Call
② トランスパイル ③ 成果物を書き出し
④ rendertoStaticMarkup
HTMLファイル
最終成果物
(./dist/*)
画像や robots など
File System
Program
Reactのための中間成果物
(./.dodai-build/*)
.js
Slide 28
Slide 28 text
dodaiのアーキテクチャ(build編)
Main Process
.tsx
Original Files
① Compiler API で Call
② トランスパイル ③ 成果物を書き出し
④ rendertoStaticMarkup
⑤ JS として import
HTMLファイル
最終成果物
(./dist/*)
画像や robots など
File System
Program
Reactのための中間成果物
(./.dodai-build/*)
.js
Slide 29
Slide 29 text
dodaiのアーキテクチャ(build編)
Main Process
.tsx
Original Files
① Compiler API で Call
② トランスパイル ③ 成果物を書き出し
④ rendertoStaticMarkup
⑤ JS として import
⑥ string で結果を返却
HTMLファイル
最終成果物
(./dist/*)
画像や robots など
File System
Program
Reactのための中間成果物
(./.dodai-build/*)
.js
Slide 30
Slide 30 text
dodaiのアーキテクチャ(build編)
Main Process
.tsx
Original Files
① Compiler API で Call
② トランスパイル ③ 成果物を書き出し
④ rendertoStaticMarkup
⑤ JS として import
⑥ string で結果を返却
⑦ HTML を書き出し ⑧ static/ をコピー
HTMLファイル
最終成果物
(./dist/*)
画像や robots など
File System
Program
Reactのための中間成果物
(./.dodai-build/*)
.js
Slide 31
Slide 31 text
dodaiのアーキテクチャ(watch編)
HTML Server
(http://localhost:5432)
ᶃɺᶄͷॳճ࣮ߦޙᶅʙᶊ͕ࣗಈతʹ܁Γฦ͞ΕΔɻ
αʔόʔͰ݁͢Δॲཧ
ϒϥβͱαʔόʔͷॲཧ
Main Process
HotReload Server
(http://localhost:10020)
Slide 32
Slide 32 text
dodaiのアーキテクチャ(watch編)
リクエストごとに最新のHTMLを配信
HotReload Server
(http://localhost:10020)
ᶃɺᶄͷॳճ࣮ߦޙᶅʙᶊ͕ࣗಈతʹ܁Γฦ͞ΕΔɻ
αʔόʔͰ݁͢Δॲཧ
ϒϥβͱαʔόʔͷॲཧ
Main Process
HTML Server
(http://localhost:5432)
Slide 33
Slide 33 text
dodaiのアーキテクチャ(watch編)
リクエストごとに最新のHTMLを配信
.tsx
① chokidarで監視
ᶃɺᶄͷॳճ࣮ߦޙᶅʙᶊ͕ࣗಈతʹ܁Γฦ͞ΕΔɻ
αʔόʔͰ݁͢Δॲཧ
ϒϥβͱαʔόʔͷॲཧ
Main Process
HTML Server
(http://localhost:5432)
HotReload Server
(http://localhost:10020)
Slide 34
Slide 34 text
dodaiのアーキテクチャ(watch編)
リクエストごとに最新のHTMLを配信
.tsx
① chokidarで監視
② ブラウザからアクセス
ᶃɺᶄͷॳճ࣮ߦޙᶅʙᶊ͕ࣗಈతʹ܁Γฦ͞ΕΔɻ
αʔόʔͰ݁͢Δॲཧ
ϒϥβͱαʔόʔͷॲཧ
Main Process
HTML Server
(http://localhost:5432)
HotReload Server
(http://localhost:10020)
Slide 35
Slide 35 text
dodaiのアーキテクチャ(watch編)
リクエストごとに最新のHTMLを配信
.tsx
① chokidarで監視
② ブラウザからアクセス
③ /subscribe にポーリング
※ HTMLϑΝΠϧʹؚ·ΕΔॲཧ
ᶃɺᶄͷॳճ࣮ߦޙᶅʙᶊ͕ࣗಈతʹ܁Γฦ͞ΕΔɻ
αʔόʔͰ݁͢Δॲཧ
ϒϥβͱαʔόʔͷॲཧ
Main Process
HTML Server
(http://localhost:5432)
HotReload Server
(http://localhost:10020)
Slide 36
Slide 36 text
dodaiのアーキテクチャ(watch編)
リクエストごとに最新のHTMLを配信
.tsx
① chokidarで監視
② ブラウザからアクセス
③ /subscribe にポーリング
※ HTMLϑΝΠϧʹؚ·ΕΔॲཧ
④ 変更検知後ビルド
ᶃɺᶄͷॳճ࣮ߦޙᶅʙᶊ͕ࣗಈతʹ܁Γฦ͞ΕΔɻ
αʔόʔͰ݁͢Δॲཧ
ϒϥβͱαʔόʔͷॲཧ
Main Process
HTML Server
(http://localhost:5432)
HotReload Server
(http://localhost:10020)
Slide 37
Slide 37 text
dodaiのアーキテクチャ(watch編)
リクエストごとに最新のHTMLを配信
.tsx
① chokidarで監視
② ブラウザからアクセス
③ /subscribe にポーリング
※ HTMLϑΝΠϧʹؚ·ΕΔॲཧ
④ 変更検知後ビルド
⑤ 更新を通知
ᶃɺᶄͷॳճ࣮ߦޙᶅʙᶊ͕ࣗಈతʹ܁Γฦ͞ΕΔɻ
αʔόʔͰ݁͢Δॲཧ
ϒϥβͱαʔόʔͷॲཧ
Main Process
HTML Server
(http://localhost:5432)
HotReload Server
(http://localhost:10020)
Slide 38
Slide 38 text
dodaiのアーキテクチャ(watch編)
リクエストごとに最新のHTMLを配信
.tsx
① chokidarで監視
② ブラウザからアクセス
③ /subscribe にポーリング
※ HTMLϑΝΠϧʹؚ·ΕΔॲཧ
④ 変更検知後ビルド
⑤ 更新を通知
⑥ HTTP Response を返却
ᶃɺᶄͷॳճ࣮ߦޙᶅʙᶊ͕ࣗಈతʹ܁Γฦ͞ΕΔɻ
αʔόʔͰ݁͢Δॲཧ
ϒϥβͱαʔόʔͷॲཧ
Main Process
HTML Server
(http://localhost:5432)
HotReload Server
(http://localhost:10020)
Slide 39
Slide 39 text
dodaiのアーキテクチャ(watch編)
リクエストごとに最新のHTMLを配信
.tsx
① chokidarで監視
② ブラウザからアクセス
③ /subscribe にポーリング
※ HTMLϑΝΠϧʹؚ·ΕΔॲཧ
④ 変更検知後ビルド
⑤ 更新を通知
⑥ HTTP Response を返却
⑦ ポーリング終了検知後再読み込み
ᶃɺᶄͷॳճ࣮ߦޙᶅʙᶊ͕ࣗಈతʹ܁Γฦ͞ΕΔɻ
αʔόʔͰ݁͢Δॲཧ
ϒϥβͱαʔόʔͷॲཧ
Main Process
HTML Server
(http://localhost:5432)
HotReload Server
(http://localhost:10020)
Slide 40
Slide 40 text
dodaiのアーキテクチャ(watch編)
リクエストごとに最新のHTMLを配信
.tsx
① chokidarで監視
② ブラウザからアクセス
③ /subscribe にポーリング
※ HTMLϑΝΠϧʹؚ·ΕΔॲཧ
④ 変更検知後ビルド
⑤ 更新を通知
⑥ HTTP Response を返却
⑦ ポーリング終了検知後再読み込み
⑧ リロードによって再度アクセス
ᶃɺᶄͷॳճ࣮ߦޙᶅʙᶊ͕ࣗಈతʹ܁Γฦ͞ΕΔɻ
αʔόʔͰ݁͢Δॲཧ
ϒϥβͱαʔόʔͷॲཧ
Main Process
HTML Server
(http://localhost:5432)
HotReload Server
(http://localhost:10020)
Slide 41
Slide 41 text
IUUQTEQPUBUPENFFOUSZNJOJNBMIPUSFMPBE
Slide 42
Slide 42 text
- ⾃⼰紹介
- @potato4d/dodai の概要
- 既存ソリューションの課題感とアンサー
- ビルドの仕組み
- おわりに
■ Agenda
Slide 43
Slide 43 text
おわりに
- dodai もいくつかのWebサイトで使っていたもの切り出して誕⽣した
- 当時は React SSG + TypeScript + HotReload のみで CLI などはなし
- それを ts-node で実⾏していた
- ⼩さな要件を満たすためなら要件も依存関係も少なくなる
- 乗っかる側もリスクが少ない基盤になるのでコミュニティとして広がるかも
Slide 44
Slide 44 text
理想のSSGを
⼀緒に考えよう
理想のSSGを
⼀緒に考えよう