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

若松俊介 / mazrean ■ IT本部IT基盤部第二G ● Web フロント本職ではない ■ Frontend Up! / Go Day ■ 強制デジタルデトックス中 ● スマホが壊れた… @mazrean22 マズリーン 2 

「とりあえずNext.js」 していませんか？ 

Next.jsは大抵Better以上の選択肢 Next.jsは何でもできて優秀 ■ レンダリング 方法の選択肢の多さ ■ 強力なエコシステム 4 

レンダリング方法の選択肢の多さ ■ 大抵の方法を選択可能 ● CSR(Client-side Rendering) ● SSR(Server-side Rendering) ● PPR(Partial Prerendering) ■ そもそもNext.jsが潮流を作っている 5 Header Sidebar Footer 購入数選択 商品説明 

強力なエコシステム ■ Reactの豊富なライブラリ 群を使用可能 ■ 大抵の周辺ツール がサポートしている ● バンドラ ● Linter ● 開発サーバー 6 … 

個人開発でBestか？ 個人開発でBestとは限らない ■ 不要なレンダリング の複雑性 ■ ライブラリ更新 が大変 7 

不要なレンダリングの複雑性 ■ SSRは不要な場合も多い ● 初期表示に動的コンテンツがないと意味がない ■ 手間を生む ● サーバー運用 ● AIが最適解を選ばない ● 脆弱性も生みやすい(React2Shell) 8 Header Sidebar Footer 購入数選択 商品説明 不要 AIが誤用 

ライブラリ更新が大変 ■ 使ったライブラリ は更新が必要 ● 少なくとも脆弱性対応は必要 ● 一度サボると更に大変に… ■ Reactはライブラリ使用前提な部分もある ● 特に状態管理 9 … 使ったら更新必須 

Web Components 使いませんか？ 

Web Componts Web標準で構成されたコンポーネント機構 ■ 素のブラウザ上で動作 ● template + Shadow DOM ■ CSR相当の役回りが可能 11 Web Components 

Lit Web Componentsの薄いラッパーライブラリ ■ 記述の煩雑さを軽減 ● デコレーター による記法提供 ● 簡易的な状態管理機構の提供 ■ 外部依存がない ● Litのみの更新でok 12 

デプロイ時のレンダリング PPRは好きなテンプレートエンジンでok ■ ejs ■ tmpl ● Goのテンプレートエンジン ■ PHP 13 テンプレートエンジン 

この構成のメリット ■ 依存が極めて少ない ● 基本的にLitとテンプレートエンジンのみ ● 加えてLinter、バンドラが入る程度 ■ 維持コスト が低い ● 静的配信だけなら無料で済む ■ CSR・PPRのコード上での区別が容易 ● AIの書いたコードの読解が楽 14 

採用例 

Go Proposal Weekly Digest ■ Go言語本体への機能提案まとめ ■ 週次更新 16 https://go-proposal-weekly-digest.mazrean.com/ 

まとめ ■ Next.js、個人開発には複雑過ぎない？ ■ Web Componentsで最小限の構成が可能 ● テンプレートエンジンを組み合わせる ● Litで記述も容易にできる ■ 実際にいくつか開発してみている ● Go Proposal Weekly Digest ● もっと動的なサービスも作れる 17