TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs

2023/02/03 に開催された、 #kyotojs での発表時の登壇資料です。

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