小さく進める Nuxt 3 移行

Transcript

1. STORES 株式会社 小さく進める Nuxt 3 移行
2. 目次 2 自己紹介 はじめに 移行の方針 実際にやっていること まとめ 01 02 03 04 05
3. 自己紹介
4. 渡邊 涼太（wattanx） ・新卒で受託開発系の会社に入社し、業務系Webアプリケーションの 開発に従事。 ・2022年1月に STORES に入社。 ・現在は STORES ネットショップの開発に関わっている。 ・猫が好き。 ・大阪在住。 ・https://twitter.com/pontaxx 自己紹介
5. はじめに
6. はじめに 自分でつくれる、 本格的なネットショップ むずかしい知識や技術いらずで 自分だけのネットショップをかんたんに。
7. はじめに ネットショップを開設したオーナーさんが触る ダッシュボードをNuxt 3 に移行しようとしている
8. はじめに 移行に向けて動き出す前のNuxt のバージョンや周辺ツール • Nuxt 2.15.8 • Vue 2.6.14 • @nuxtjs/composition-api • Jest (2022年6月)
9. はじめに 現在のNuxt のバージョンや周辺ツール • Nuxt ^2.16 • Vue ^2.7 • Nuxt Bridge • Vitest (2023年5月)
10. はじめに どのように移行を進めてきたのか
11. 移行の方針
12. 移行の方針 • コード行数：約 30 万行 • ページ数：約 170 ページ • Vue コンポーネント：約 1000 個 プロダクトの規模感
13. 移行の方針 • Nuxt 3 へ直接バージョンアップする • Nuxt Bridge を使用する
14. 移行の方針 • https://github.com/nuxt/bridge • Nuxt 3 と上方互換性のあるライブラリ (Nuxt 3 の機能の一部が Nuxt 2 でも使えるようなる) • 使うと、Nuxt 3 へバージョンアップする際の差分を小さくできる Nuxt Bridge とは
15. 移行の方針 1. Nuxt 3, Vue 3 に直接移行するのは難易度が高いため 2. Nuxt Bridge なら、同じリポジトリ内で移行しやすく、Nuxt 3の恩 恵をある程度受けられるため 3. Nuxt Bridgeで動かない Nuxt Modules がいくつかあるが、それらは 剥がして自分達で作れるため
16. 移行の方針 • 安定版が出ていない Nuxt Bridge のデメリット
17. 移行の方針 • バグがあった場合は、Nuxt Bridge のリポジトリに Issue を立てたり Pull Request を出したりしてコントリビュートしてる • Issueのトリアージもしてる（権限をもっているので）
18. 移行の方針 どのように意思決定しているか
19. 移行の方針 WG（ワーキンググループ）を立ち上げた
20. 移行の方針 • 少人数で意思決定ができる • 有志のメンバーがオーナーシップを持って進めやすくなる WGという形をとることで
21. 移行の方針 プロダクト開発と並行で進めやすくなる
22. 実際にやっていること
23. 実際にやっていること 小さく進められるようにタスクを分解している
24. 実際にやっていること 1. Nuxt Bridge の導入（bridge: falseで） 2. Jest -> Vitest へ移行 3. Vue 2.7 へ移行 4. Vue 3 移行の準備 5. Nuxt Bridge の有効化 6. Nuxt 3 互換のAPI への移行
25. 実際にやっていること 1. Nuxt Bridge の導入（bridge: falseで） 2. Jest -> Vitest へ移行 3. Vue 2.7 へ移行 4. Vue 3 移行の準備 5. Nuxt Bridge の有効化 6. Nuxt 3 互換のAPI への移行
26. 実際にやっていること Nuxt 3 移行に向けてがんばっています https://speakerdeck.com/offich/stores-dashboard-nuxt3-migration
27. 実際にやっていること Nuxt Bridge の有効化
28. 実際にやっていること（Nuxt Bridge の有効化） bridge: false で無効にしているNuxt Bridge の機能を有効化する
29. 実際にやっていること（Nuxt Bridge の有効化） Nuxt Bridge へのマイグレーション やること多くないですか？ https://nuxt.com/docs/bridge/overview
30. 実際にやっていること（Nuxt Bridge の有効化） 実はすべての対応を一度にする必要はない
31. 実際にやっていること（Nuxt Bridge の有効化） • nuxt コマンドを nuxi コマンドに変更するよう記載されている
32. 実際にやっていること（Nuxt Bridge の有効化） Nitro や Vite を使わないのであれば、 nuxt コマンドのままでも良い
33. 実際にやっていること（Nuxt Bridge の有効化） • Nuxt Bridge の機能を有効にしつつ、ビルド・デプロイは今までどお りという選択がとれる • Nuxt Modules が動かない場合は nuxt コマンドを使えば大抵解決す る
34. 実際にやっていること（Nuxt Bridge の有効化） Nuxt Bridge を有効化するには何をすればいいの？
35. 実際にやっていること（Nuxt Bridge の有効化） @nuxtjs/composition-api を消しても動くようする
36. 実際にやっていること（Nuxt Bridge の有効化） • Nuxt Bridge では、@nuxtjs/composition-api を削除する必要がある （Nuxt Bridge に同様のComposable 関数が含まれているため） • ただし、変更が入った Composable 関数があるので対応する必要がある https://nuxt.com/docs/bridge/bridge-composition-api • @nuxtjs/composition-api を使っていない場合は、何もしなくても有効 化できるかもしれません
37. 実際にやっていること（Nuxt Bridge の有効化） • useFetch の $fetch と $fetchState を fetch と fetchState に変更 する
38. 実際にやっていること（Nuxt Bridge の有効化） • useRoute の返り値が computed ではなくなる
39. 実際にやっていること • defineNuxtMiddleware, defineNuxtPlugin がなくなる
40. 実際にやっていること（Nuxt Bridge の有効化） これだけで Nuxt Bridge の有効化ができました (まだ nuxi コマンドは使ってません)
41. 実際にやっていること（Nuxt Bridge の有効化） でも、@nuxtjs/composition-api って Nuxt 3 では使えないんじゃないの？
42. 実際にやっていること Nuxt Bridge を有効化すると Nuxt 3 互換の API を利用できる
43. 実際にやっていること Nuxt 3 互換のAPI への移行
44. 実際にやっていること（Nuxt 3 互換のAPI への移行） • Nuxt Bridge では Nuxt 3 互換のAPI（Composable 関数など） が利用できる
45. 実際にやっていること（Nuxt 3 互換のAPI への移行） • Nuxt Bridge でも useState が利用できるので、Vuex から useState へのマイグレーションもできる (Nuxt 3 では Nuxt 2 の store ディレクトリがサポートされなくなる)
46. 実際にやっていること（Nuxt 3 互換のAPI への移行） • @nuxtjs/composition-api の Composable 関数と共存できるので 少しずつ Nuxt 3 互換のAPI に変更することができる
47. 実際にやっていること（Nuxt 3 互換のAPI への移行） 少しずつ移行できるので、動作確認も時間がかからない
48. 実際にやっていること Nuxt Bridgeを使うと Nuxt 3 へバージョンアップするときに差分が少なくなる
49. 実際にやっていること Nuxt Bridgeを入れることで Nuxt 2 の状態でどこまで移行できるんですか？
50. 実際にやっていること Nuxt 2 to Nuxt 3 https://nuxt.com/docs/migration/overview
51. 実際にやっていること Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでも一部できる
52. 実際にやっていること ほとんど Nuxt 2 の状態でマイグレーションできます
53. まとめ
54. まとめ 現在のNuxt のバージョンや周辺ツール • Nuxt ^2.16 • Vue ^2.7 • Nuxt Bridge • Vitest (2023年5月)
55. まとめ プロダクト開発をしながら隙間時間で進められている
56. まとめ 少しずつ進められるので、 他の機能開発とコンフリクトしない
57. まとめ 少しずつ Nuxt 3 に向けたマイグレーションができるのが Nuxt Bridge の良いところ
58. まとめ Nuxt Bridge 移行の知見まとめ https://zenn.dev/wattanx/scraps/2200576686eabc
59. まとめ 今日話したことはすべてCLIでできます https://wattanx-converter.vercel.app/cli/nuxt-bridge-migration-tools.html