Nuxt 3でJamstackテンプレートを作るときの考え方

Vue Fes Japan 2023の登壇資料です。

Transcript

1. Nuxt 3でJamstackテンプレートを 作るときの考え方 2023/10/28　まぁし（知念）
2. このセッションをやろうと思った背景 • WebサイトとWebサービスにおける開発手法の二極化 • 各事業会社がサービス運用するための最適化された事例は多い（素晴らし い）が、Webサイトで汎用的に使える事例が少ない、とくにNuxt 3 これらの課題に対して、Nuxt 3でWeb制作する知見を集めたい また、知っていることは共有していきたい 参加者の視点のプラスになれば嬉しいし、詳しい人からの指摘があれば 僕自身もさらにブラッシュアップしたい
3. アンケートお願いします🙏
4. Jamstackで開発してますか？ 受託や新規サービス構築時に、毎回、開発環境から新規制作してる？ 何のフレームワークで、どのようなテンプレートを作ったらいい？ ↓ どのプロジェクトでも使える共通化したテンプレートがあると良い！ ↓ こんな悩みのある方と情報交換したいので、一緒に学びましょう
5. Nuxt 3のテンプレートが欲しい
6. 株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主 知念 昌史 / まぁし X(Twitter)@chocodogmagic • 職歴：大学新卒 → 美容師 → エンジニア12年くらい • 2019年に東京 → 沖縄へ帰省してフルリモート • Vue.js/Nuxt/Jamstack/セマンティックなHTML/PWA/ アクセシビリティ/SEO/パフォーマンス改善/Movable Type
7. 個人的な活動 • 平日9:00〜朝活：おはようエンジニア #ohayo_engineer ◦ X（旧Twitter）SpacesでWeb関連の情報発信中、フォローしてね ◦ 540回継続しているがいまだに早起きは苦手、一緒にがんばろ？ • コミュニティ運営 ◦ PWA Night（東京） / v-okinawa（沖縄） / CSS福笑い（東京） • 好き ◦ スプラトゥーン3（トライストリンガー XP1980） ◦ ポケモンSV スカーレット
8. https://www.tam-tam.co.jp/
9. Vue.js / Nuxtの実績多数 クラウドワークス様 GLOBIS様 SACCSY様 メディカ出版様 藤子・F・不二雄ミュージアム様
10. これから話すこと 1. Jamstackのテンプレートとは 2. Webサイトによくある最低限必要な機能 3. 汎用的にするための工夫 4. Nuxt 3のJamstackテンプレートSample
11. 今日のまとめ • 最近のWeb制作には様々な手法があり、銀の弾丸は無い ◦ が、条件を絞ることで近いことはできる（この前提が重要） • 汎用的なテンプレートを作るポイントは公式ドキュメントや慣例を参考に • 運用に耐えられることを重視しよう • Web開発の流行や変化の背景を見よう • オレオレ、ぼくのかんがえたさいきょうの〜は厳しい時代
12. 1. Jamstackテンプレートとは
13. 前提を揃えることが重要 その1
14. Jamstackとは 初出2015〜2019年頃までのJAMStack（表記も少し違う） JavaScript API Markup JavaScriptを使ってAPIでデータを取得し、HTMLに埋め込み、静的ファイルを生 成、CDNで配信する構成のこと Headless CMSとの相性の良さ、React/Vueの普及とも重なる
15. Jamstackのメリット Jamstack構成のメリットはフロントエンドとデータを分解できること 従来の開発手法による課題を解決できる • サーバーサイドの言語を使う場合（PHP、Rubyなど）、見た目に関するコードとDBの データを埋め込むためのコードがテンプレートに混在し、密結合となる（モノリス） • または、SPAのようにクライアントサイドでAPIのデータを処理して表示する方法も あったが（Ajaxなど）、パフォーマンスやcrawler非対応（当時）という課題があった • PC/スマホ/タブレットなど端末の多様化や、コーポレート、メディア、 アプリなど複数チャネルが必要になり、共通のデータを扱いたい
16. 2023年現在「Jamstack」という定義の変化 Next、Nuxtのようなフレームワークの登場、Vercel / NetlifyのようなSSRに対 応した環境がそろってきたことで静的generate以外の選択肢ができた フロントエンドとバックエンドのコードを分離して、マイクロサービスを組み合 わせて構築していくことそのものをJamstackと呼ぶようになっている （このタイミングで表記も現在のJamstackに） さらに、Jamstackでの開発が当たり前になってきたのでそろそろ死語になるかも この資料では認識合わせのためにあえてJamstackを使っています
17. 前提を揃えることが重要 その2
18. Webサイト：いわゆるホームページ（コーポレートサイトなど） • 静的ページがほとんど、もしくはCMSで足りる • 状態（state）管理が必要となる場面が少ない • バックエンドは問い合わせフォームくらい Webサービス：事業会社のサービス（SmartHR、Amebaなど）、Webアプリ • ログイン、投稿など、ユーザーからの入力・操作する画面が多い • 状態管理が必須、動的なページ • バックエンドとの連携が必須 WebサイトとWebサービスの違い
19. WebサイトとWebサービス（Webアプリ）で二極化 • HTML/CSS/jQuery → 運用はある ------------------------------ • Pug/EJS、Sass（Gulp） • JavaScript（ES6〜） • WordPress等の従来のCMS ------------------------------ • Next.js/Nuxt • Jamstack • React / Vue • Next.js / Nuxt • コンポーネント開発 • デザインシステム → 素のHTMLで作っていない → TypeScriptが基本 → CSS設計の概念が不要 → マイクロサービス化 Webサイト Webサービス/Webアプリ 制作パターンが 複雑化 制作パターンが 固定化
20. WebサイトとWebサービス（Webアプリ）で二極化 • HTML/CSS/jQuery → 運用はある ------------------------------ • Pug/EJS、Sass（Gulp） • JavaScript（ES6〜） • WordPress等のCoupled CMS ------------------------------ • Next.js/Nuxt • Jamstack • React / Vue • Next.js / Nuxt • コンポーネント開発 • デザインシステム → 素のHTMLで作っていない → TypeScriptが基本 → CSS設計の概念が不要 → マイクロサービス化 Webサイト Webサービス/Webアプリ 制作パターンが 複雑化 制作パターンが 固定化 ← 今回はここに注目
21. 今回は WebサイトのJamstack開発を 前提として話します
22. ちなみに、gulpのWebテンプレートは公開済み（古 https://github.com/chinen-octtn/task-runner
23. 1. Jamstackテンプレートとは（まとめ） • Webサイト・コーポートサイトのような静的サイトをHeadless CMS等のAPI 経由で更新できる仕組みで構築するためのテンプレート • コンポーネント開発の知見が増えている今の潮流に乗るために、Nuxtで開発 する • Webサイトでは状態管理ライブラリをがっつり活用するケースは多くない ※Nextはすでに事例がたくさんあるがNuxtの事例は少ない ※App Router登場でカオスみがある（Server ActionsもStableに）
24. 2. Webサイトによくある機能
25. どのプロジェクトでもだいたい使いそうなもの • Googleアナリティクス等の解析タグ、タグマネージャー • sitemap.xml • CMSでの更新 • ページネーション • テスト • Storybookのようなスタイルガイド管理ツール もっとあるかも、ご意見募集中 （ただし機能を盛りすぎると逆に扱いが難しくなるので注意、Nextさん）
26. 注意するポイント • Googleアナリティクス等の解析タグ、タグマネージャー ◦ NuxtLinkを使用する場合はSPAのようにコンテンツが切り替わるため、画面の遷移を解析タ グに伝える必要がある • sitemap.xml ◦ 大抵はプラグインがやってくれるが、不要なファイルまで載ってしまう ◦ 特定のページを追加・除外したい状況が発生するので、設定できるようにしておく • Headless CMSとの連携 ◦ どのサービスとも組み合わせやすいように、CMS特有の処理はフェッチの ロジック内でまとめる ◦ 下書きプレビューの実装
27. Jamstackでは考慮する範囲が増える • 開発 → デプロイ環境 ◦ レンタルサーバー？オンプレミス？ ◦ クラウド？ ▪ AWS：S3、Netlify、Vercel、Cloudflareなどなど ◦ GitHub？GitLab？ • Headless CMSとbuildコマンドの連携 ◦ 日時指定の公開、非公開 ◦ 下書きプレビューはリアルタイムで確認したい
28. 2. Webサイトによくある機能（まとめ） • ライブラリやモジュールも必要な機能は最小限にしておく ◦ アップデート・セキュリティパッチ等の保守も大変になる（プラグイン盛り盛り WordPressつらいよね？） • プロジェクトによってCSSフレームワーク使いたい、Vuetify使いたいなどが あるはず、そこは縛らずに追加したければ設定できる余地を残しておく ◦ 例えば、Vuetifyに最適化すると別のものを使いたいときに外す手間が発生する • StorybookやTestも重要なので入れておきたいが、もし使わないとしても 動作する環境であること
29. 3. 汎用的にするための工夫
30. Webサイト自体が複雑に、規模も大きく 受託では、多種多様なサイトを制作する。他社が作ったものを引き継ぐこともあ れば、自分等が作ったものの運用担当から外れることもある。 運用中のサイトからのリニューアルや、新規サービス立ち上げによるサイト制作 では作るページ数も多くなり、複数人のエンジニアで制作することも多い。 最適化すると便利になる反面、他のパターンでは使えなくなる ※とはいえ、Webアプリほどではない（前提の再確認）
31. 幅広く対応できる設計で、引き継ぎやすく ドキュメントは大事だが、オレオレルールを作ってドキュメントにするのは手間 が多い（他人に説明して理解してもらうのは大変だし、半年後の自分ですら他人 である） できるだけ共通認識を持ちやすい設計にして、 最小限の情報で共有できるのが理想
32. 公式ドキュメントを参照しよう
33. SFC：コードの書き方は慣例に合わせておく Vue.js公式ドキュメントより参照 https://ja.vuejs.org/guide/scaling-up/sfc.html
34. コンポーネント名・ファイル名の決め方 • コンポーネントは大文字から始める ◦ 🙆 <Button /> ◦ 🙅 <button /> • layoutに関わるような一度しか使わないcomponentはTheをつけていたが公 式ドキュメントからなくなった？ ◦ 例）<TheHeader /> • ディレクトリ構造がコンポーネントを呼び出すときの名前になる ◦ components/Parts/Button.vue → <PartsButton /> Nuxt公式ドキュメントより参照 https://nuxt.com/docs/guide/directory-structure/components
35. ディレクトリ構造 Nuxtにはディレクトリのルールが決められており、 そのルールに則ることで、Auto Imports等のメリットがある • できる限り公式に合わせる方が良い • Nuxt関連ファイルをsrc/ディレクトリに変更するくらい は良さそう（ディレクトリ直下はライブラリの設定ファ イルが多くなる傾向があるため）
36. ディレクトリ設計の考え方 主にレイアウト単位か機能単位かで設計が分かれる レイアウト・・・Webサイトはレイアウト単位の方が都合が良い components/Parts/Button components/Parts/List components/Layout/About 機能・・・Webサービスやアプリは機能単位の方が都合が良い components/Features/Login components/Features/Login/Input components/Features/Login/Button
37. ディレクトリ設計の例 pages・・・このディレクトリに配置した通りにルーティング pages/about/index.vue → /about/index.html pages/company/message/index.vue →/company/message/index.html このpages配下に置くファイルは、ルーティングやmeta情報などページの構成に 必要なものだけを管理して、見た目に関するコードは書かないようにする レイアウト用のコンポーネントを呼び出すのみ
38. ディレクトリ設計の例 components・・・コンポーネントのファイルを設置する レイアウト用のコンポーネントと、最小単位のパーツとなるコンポーネントを分 けると良さそう components/Parts/Button.vue・・・ボタンのコンポーネント components/Parts/List.vue・・・リストのコンポーネント components/Pages/About.vue・・・アバウトページ（ボタン等パーツを配置） components/Pages/Company.vue・・・会社情報ページ（パーツを配置） ※Parts→Elements、Pages→Layoutsなどと置き換えても良い
39. import文を書かなくてもcomponentsやcomposablesのファイルを呼び出せる useFetchのようなNuxtが提供する処理もどのコンポーネントでも利用可能 コード記述量の削減と、階層を意識せずに使えるメリットがあり、Auto Imports を生かしたい → ディレクトリ・ファイル名のルールは統一しておくと良い （composablesはuseXXX、パーツはParts配下に格納、レイアウト関連はpages のルーティングと合わせる、など） ※Colocationの考え方では関連ファイルをまとめたいがAuto Importsしてくれるのか Nuxt 3のAuto Importsが強力
40. 参考文献を取り入れよう
41. 参考：bulletproof-react 機能単位（Features）でディレクトリを分ける構築 components/features/auth/ components/features/users/ scaffoldingライブラリを使って、関連ファイルをまとめて生成している components/Elements/Button/index.ts components/Elements/Button/Button.tsx components/Elements/Button/Button.stories.tsx components/Elements/Button/Button.test.ts 参照 https://github.com/alan2207/bulletproof-react
42. 参考：Container/Presentational Pattern Presentational Component 見た目を責務としたコンポーネント、値はpropsで受け取る Container Component ロジック等の処理を持つコンポーネント、見た目には関与せず、 必要な情報をPresentational Componentに渡す 参照 https://www.patterns.dev/posts/presentational-container-pattern
43. 参考：Colocation 関連ファイルを近い場所に配置するという考え方 Button/Button.tsx Button/Button.css Button/Button.test.ts Button/Button.stories.tsx VueでSFCで作るやり方はColocationの概念にも近い 規模が大きいほど関連ファイルが把握しやすくなる 参照 https://kentcdodds.com/blog/colocatio
44. Build方法・デプロイ
45. Nuxt 3で複数のBuildに対応 • Static Site Generate（SSG） • Server Side Rendering（SSR） • Client Side Rendering（CSR） • Incremental Static Regeneration（ISR） • Stale While Revalidate（SWR） WebサイトではSSGで足りることも多いが、 ページ数が大量になると比例してGenerate時間 も膨大になるため、SSR等の検討も必要 nuxt.config.tsでディレクトリごとに設定可能 参照 https://nuxt.com/docs/guide/concepts/rendering
46. 3. 汎用的にするための工夫（まとめ） • 引き継ぎしやすいように複雑化を避ける、独自ルールを作らない • 公式ドキュメントを参考にしよう • ディレクトリ構造はNuxtのデフォルトをベースにしつつ、コンポーネント分 割は参考文献をあたろう • WebサービスやWebアプリの設計も参考になる（ただし同じにするのは難し いので良いところを取り入れる） • 運用フェーズの更新頻度や体制に合わせてBuild方法を検討する
47. これらの利点を取り入れた構成を作る
48. 4. Nuxt 3のJamstackテンプレート Sampleコード
49. 絶賛、制作中 本日公開したかったのですが・・・業務優先でまだpublicにできていません🙏 X（旧Twitter）にて報告しますので フォローしてお待ちください！ contributeしたい方もぜひ連絡を！
50. 今日のまとめ（Nuxt 3でJamstackテンプレートを作るときの考え方） • 最近のWeb制作には様々な手法があり、銀の弾丸は無いが、【Webサイトを Jamstack開発するためのテンプレート】という条件に絞ることはできる • 公式ドキュメントや慣例を参考にして独自ルールを作らない、あえて最適化 しないこともある（運用していく中で最適化するのはアリ） • Web開発の流行や変化の背景を見つつ、運用に耐えられることを重視しよう 開発するエンジニアも、サイトに訪問するエンドユーザーも、 運用するクライアント様もみんなが使いやすいものを作るために ひたすら考えてます
51. ご清聴、ありがとうございました！ X（Twitter） まぁし@chocodogmagic 毎月第3水曜日はPWA Night 参加してね！ 平日9:00〜SpacesでWeb情報発信中！ Web制作・Webアプリ開発ご依頼ください。 一緒にお仕事しませんか？各職種で採用中