WebComponentとSSGで作る 個人開発Webフロントエンド / TechTalk #69

1. WebComponentとSSGで作る 個人開発Webフロントエンド @mazrean TechTalk #69
2. 若松俊介 / mazrean ▪ IT本部IT基盤部第二G • Web フロント本職ではない ▪ Frontend Up! / Go Day ▪ 強制デジタルデトックス中 • スマホが壊れた… @mazrean22 マズリーン 2
3. 「とりあえずNext.js」 していませんか？
4. Next.jsは大抵Better以上の選択肢 Next.jsは何でもできて優秀 ▪ レンダリング 方法の選択肢の多さ ▪ 強力なエコシステム 4
5. レンダリング方法の選択肢の多さ ▪ 大抵の方法を選択可能 • CSR(Client-side Rendering) • SSR(Server-side Rendering) • PPR(Partial Prerendering) ▪ そもそもNext.jsが潮流を作っている 5 Header Sidebar Footer 購入数選択 商品説明
6. 強力なエコシステム ▪ Reactの豊富なライブラリ 群を使用可能 ▪ 大抵の周辺ツール がサポートしている • バンドラ • Linter • 開発サーバー 6 …
7. 個人開発でBestか？ 個人開発でBestとは限らない ▪ 不要なレンダリング の複雑性 ▪ ライブラリ更新 が大変 7
8. 不要なレンダリングの複雑性 ▪ SSRは不要な場合も多い • 初期表示に動的コンテンツがないと意味がない ▪ 手間を生む • サーバー運用 • AIが最適解を選ばない • 脆弱性も生みやすい(React2Shell) 8 Header Sidebar Footer 購入数選択 商品説明 不要 AIが誤用
9. ライブラリ更新が大変 ▪ 使ったライブラリ は更新が必要 • 少なくとも脆弱性対応は必要 • 一度サボると更に大変に… ▪ Reactはライブラリ使用前提な部分もある • 特に状態管理 9 … 使ったら更新必須
10. Web Components 使いませんか？
11. Web Componts Web標準で構成されたコンポーネント機構 ▪ 素のブラウザ上で動作 • template + Shadow DOM ▪ CSR相当の役回りが可能 11 Web Components
12. Lit Web Componentsの薄いラッパーライブラリ ▪ 記述の煩雑さを軽減 • デコレーター による記法提供 • 簡易的な状態管理機構の提供 ▪ 外部依存がない • Litのみの更新でok 12
13. デプロイ時のレンダリング PPRは好きなテンプレートエンジンでok ▪ ejs ▪ tmpl • Goのテンプレートエンジン ▪ PHP 13 テンプレートエンジン
14. この構成のメリット ▪ 依存が極めて少ない • 基本的にLitとテンプレートエンジンのみ • 加えてLinter、バンドラが入る程度 ▪ 維持コスト が低い • 静的配信だけなら無料で済む ▪ CSR・PPRのコード上での区別が容易 • AIの書いたコードの読解が楽 14
15. 採用例
16. Go Proposal Weekly Digest ▪ Go言語本体への機能提案まとめ ▪ 週次更新 16 https://go-proposal-weekly-digest.mazrean.com/
17. まとめ ▪ Next.js、個人開発には複雑過ぎない？ ▪ Web Componentsで最小限の構成が可能 • テンプレートエンジンを組み合わせる • Litで記述も容易にできる ▪ 実際にいくつか開発してみている • Go Proposal Weekly Digest • もっと動的なサービスも作れる 17