クライアントワーク（受託）のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022

Reject Conference - Vue Fes Japan Online 2022の登壇資料です。

Transcript

1. クライアントワーク（受託）の
 Jamstack開発で
 Nuxt 3を提案・実装する
 2022/11/2　まぁし（知念）

2. なぜこのテーマで話そうと思ったか
 Vue.js/Nuxtコミュニティを応援したい
 （Vue.jsで開発するの楽しい）
 
 受託の最新事例がほぼない
 （Nuxt 2の情報は豊富だが、Nuxt 3については・・・）

3. クライアントワークでのNuxt 3
 導入事例を話します
 ※クライアント名は出せないため、いくつか担当したプロジェクトから共通項 をまとめています。特定はご遠慮ください 

4. 株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主 
 知念 昌史 / まぁし Twitter@chocodogmagic
 • 沖縄でリモートワーク/元・美容師
 • 技術コミュニティ運営
 ◦ PWA Night（東京）/ v-okinawa（沖縄） 
 • Vue.js/Nuxt/Jamstack/セマンティックHTML/
 アクセシビリティ/SEO/パフォーマンス改善/CMS
 • 最近のハマり：スプラトゥーン3（弓ウデマエS+12）

5. 今日話すこと
 1. Nuxt 3の状況
 2. 提案までの経緯
 3. RC版での実装時の悩み

6. Nuxt 3の状況
 時期 状況 お気持ち 2021年10月 Beta版リリース この時点ではまだ様子見 2022年2月 3月にRC版リリース予定と発表 導入の検討を始める 2022年3月 RC版リリースされず4月へ延期 まぁ大丈夫 2022年4月 RCリリース（Stable版は6月予定と発表） 業務プロジェクト選定候補へ 6月以降に公開するプロジェクトなら 導入しても良さそう 2022年6月 RC.4 Stable版のリリースが夏へ延期 ？！ 2022年9月 RC.10 Full Static Generation（Stable版は秋へ） SSGが安定した・・・はず 2022年11月2日 本日時点の最新はRC.12 もう一踏ん張り、応援
7. プロジェクト提案までの経緯

8. 要望
 運用担当（非エンジニア）が自由にサイト更新できない、CMS導入したい
 
 CMS候補
 • WordPress・・・有名、知見が多い、対応できるエンジニア多い
 • ヘッドレスCMS（Jamstack）・・・microCMSなら実績あり
 だが、社内では学習コストあり
 やりたいことはどちらでも達成できるのでギリギリまで検討

9. 検討時の懸念点
 WordPress
 • アップデート対応必須
 • PHPサーバー保守
 • 表示速度、セキュリティ面ではStatic Generationに劣る
 Jamstack（microCMS）
 • JSフレームワークが必要
 • ビルド環境（Node.jsが必要）
 • プレビューやページャーは
 自前で実装
 CMS保守をクラウド化したい → WordPress管理コスト避けたい
 今までAWSを利用しており、S3で完結したい（保守・運用コスト）
 エンジニアの成長視点ではJamstackを採用したい、実績にもなる

10. Jamstack提案といえばJSフレームワーク選定
 • Vue 2 + Nuxt 2
 • Vue 3 + Nuxt 3
 • Vue.js + Vite
 • （今ならAstroも候補）
 社内ではVueが得意なエンジニアが多かったため、Nuxtを採用することに
 ※検討時点ではNuxt 3はまだBeta版（2系のメンテ終了リスク避けたい）
 安定しているNuxt 2でいくか、最新のNuxt 3に挑戦するか
 6月にはStable版が出るはず・・・！
 • React + Next.js
 • React + Gatsby

11. Nuxt 3を採用！！！
 リリースまだじゃな い？大丈夫そ？ 動作検証してるし、 6月には安定版になる ので間に合うす〜
12. 構成例
 • AWS Amplify
 • CodeCommit
 • Nuxt 3
 • microCMS
 • Webhookでbuild→SSG
 • S3 → CloudFront
 • Route 53

13. 実装時の注意・悩み
 Nuxt 3を採用したが、RC版では思わぬ不具合が出る可能性があったため、
 いつでもNuxt 2に切り替えられるように対策する
 • Nuxtの初期ディレクトリ構造は変更しない
 ◦ nuxt.config.tsで極力設定変更しない、pages、components等はそのまま 
 ◦ 追加するプラグインも最低限に抑える方針 
 • <script setup>は使うが、できるだけSFCに収める
 ◦ 極端に分割せず、Nuxt 2 + Composition APIプラグイン構成に移植しやすく 
 Nuxt 2でも動く、を意識
 

14. 悩みポイント：旧環境との共存
 改修前はgulpで静的生成したファイルをサーバーにアップロードしていた
 Nuxt移行後も一部ページを残す必要あり
 
 1. publicディレクトリ（旧static）に生成後のファイルをそのまま設置
 2. 共通ヘッダー・フッターを新サイト用に変更するものは、
 コンテンツ部分のみコードを抜き出してpagesに配置
 ※新環境のCSSは旧環境のファイルと干渉しないよう作成しておく

15. 悩みポイント：旧環境との共存
 旧環境のgulpタスクでビルド時にパスを書き換える処理があり必要になる
 該当の処理を抜き出して（task.js）Node.jsで実行できるようにしておく
 package.jsonの scripts に追加して npm run generate でまとめて実行
 

16. 悩みポイント：トレイリングスラッシュ
 URLの末尾の “/” （トレイリングスラッシュ）が消えてしまう
 ローカル開発中は問題なかったが、AWSでデプロイしたページにアクセスするとスラッ シュ無しにリダイレクトされるような挙動が判明
 → nuxt.configで設定変更するもうまくいかず（当時RC.2）
 → RC.4がリリースされた段階でアップデートすることで解消
 最新版であれば問題ない

17. 悩みポイント：Crawlerが404
 Nuxtにはデフォルトでクロールする機能があり、nuxt generate時はpages配下とHTML内 のリンクをたどってファイル生成してくれる
 しかし、publicに置いたファイルはクロールしないため、pages内のコンテンツからpublic管 理のページへリンクしている場合はCrawlerが404を返してしまい、ページ内容も404に置 き換えられてしまう
 nuxt.configで crawler: false を設定し、generate.routesを手動で
 設定することになる（レアケースかも）

18. 悩みポイント：特定の状況でuseHeadを認識しない
 titleやmeta関連を設定するために useHead() が提供されている
 ドキュメント通りに書いていれば問題なく動作するが、一部ページでuseHead()が undefinedエラーになる。
 原因は特定できていないが、<script setup>でAPIのフェッチ useFetch()を実行している ところで使った際にエラーとなっていた
 何らかの不具合でAuto importsが失敗していると思われたため、
 明示的にimportすることで解消（最新Ver.なら解決しているかも）

19. 悩みポイント：Nuxt 2のプラグインが動かない
 @nuxtjs/gtm
 Google Tag Managerを設定するプラグイン。Jamstackでは静的な画面遷移のため、 scriptは外部ファイルとして遅延読み込みで対処（NuxtLinkは使わない）
 @nuxtjs/sitemap
 sitemap.xmlを生成するプラグイン。
 ローカルでは動いたが nuxt generate時に生成されず、
 有志のnpmパッケージを参考にモジュール追加して対応

20. 悩みポイント：generate.routes()でasync使えない
 Nuxt 2では nuxt.configのgenerate内で asyncとawaitで受け取った結果を配列で返して いれば良かったが、Nuxt 3ではroutes()がエラーになる

21. 悩みポイント：generate.routes()でasync使えない
 defineNuxtConfigの設定項目を asyncの関数で返すことで対処

22. 苦労はあったが無事リリース
 👏

23. まとめ

24. 受託のJamstack開発でもNuxt 3（RC）は使える
 ただし、
 • Nuxt 2でのJamstack実績があり、万が一の際はNuxt 2でも対応できたこと
 • Beta → RCのリリース時点から開発環境の検証をしていたこと
 • 開発しながら、リアルタイムでNuxt 3対応状況を追っていたこと
 • プロジェクト担当ディレクターやクライアントに対応状況を説明し、
 安心して任せてもらったこと
 これらの条件がうまく重なり、チーム内で準備や声かけがあってこそ
 RC版でもうまくいったと言える

25. Nuxt 3はもうすぐ安定版が
 正式リリース

26. 楽しみですね
 今のうちに準備しましょう
 Nuxtで困ったら相談ください、TAMでは実装のお仕事も待ってます 

27. Nuxt 3はいいぞ
 デフォルトでTypeScript対応、Auto Importsが強力、useFetchの使い勝手の良さ、 
 Composablesで関数の取り回し◎など、Nuxt 2と比べても開発しやすい環境が整っている 

28. Nuxtについて話したい方はぜひご連絡を！
 Twitter まぁし@chocodogmagic
 フォローしてね
 PWA Night CONFERENCE 2022
 　　　　　　　　　　12/3（土）
 平日9:00〜SpacesでWeb情報発信中！ 
 TAMで一緒にお仕事したい方も歓迎！
 ご依頼・採用も募集中