Slide 1

Slide 1 text

Nuxt 2 → 3 を戦っていくには

Slide 2

Slide 2 text

自己紹介 株式会社 hacomono Platform group / Enabling team, FrontEnd TechLead みゅーとん ( @_mew_ton )  AngularJS (v1) → React (redux が主流の頃) → Nuxt 2.15 → Nuxt 3  個人のミッションとして, アバターワーク推進してます vue-fes 2022, 2023 ともアバターで登壇しました 採用面談や社内 MTG などでも  "VRChat フロントエンドエンジニア集会" 毎月開催してます • • ⚬ ⚬ • X(twitter) .. @_mew_ton github .. mew_ton

Slide 3

Slide 3 text

vue-fes japan 2023 では Nuxt2 から 3 へマイグレーションする方法考えてたら マイクロフロントエンドのフレームワークができた話  3 行で要約 iframe 使う Nuxt3 化の紹介 よく考えたらマイクロフロントエンドと同じ構成 フレームワーク化して OSS にした • • •

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

話すこと / 話さないこと  話す vue-fes の感想 vue-fes で得た Nuxt 2 → Nuxt 3 の知見をそこそこまとめ   話さない vue 2 → vue 3 v3 化のメリット

Slide 6

Slide 6 text

vue-fes の感想  vue, nuxt の v3 化, みんな苦労してるんだなぁ・・

Slide 7

Slide 7 text

Nuxt 3 化の方法まとめ

Slide 8

Slide 8 text

Nuxt 3 化の方法まとめ 一気に乗り換える Nuxt Bridge を経由せずに一気に Nuxt 3 に乗り換えてしまう  Nuxt Bridge を導入 アーキテクチャを徐々に Nuxt 3 に近づけていく  段階的に乗り換える iframe を使う Nuxt 2 と Nuxt 3 のプロジェクトが両方存在する状態にする • • • •

Slide 9

Slide 9 text

手順紹介: 一気に乗り換える 場合  3 行でまとめ Nuxt 2 側を v2.17 にアップグレードし, v3 向けの記述に直していく Nuxt 3 で新しくプロジェクトを作る. Nuxt 2 側からコピペし, その過程で使えなくなった Nuxt Modules を直していく.  Pros / Cons Nuxt Bridge を経由せずにシンプルにえいや. 大きいプロジェクトで適応し辛い.   参考: Nuxt 3 Migration Simplified: A Cheat Sheet https://harlanzw.com/blog/nuxt-3-migration-cheatsheet ※ Vue.js クリニックのセッションで紹介されてたサイト • • • • •

Slide 10

Slide 10 text

手順紹介: Nuxt Bridge を使う場合  3 行でまとめ Nuxt Bridge を導入し, オプションを最低限のモードにする. コードベースを少しずつ Nuxt 3 向けになおしていく. 少しずつ Nuxt 3 の機能を有効にする. 完遂したら Nuxt 3 にする.  Pros / Cons 公式の方法に則っており, 安心感はある. 大きな変更を小出しにできる. 小出しであれど, 影響範囲は大きめ. コードの負債を潰し切るためのスタミナとパワーが要る.   参考: Demystifying Nuxt Bridge / wattanx (STORES) https://speakerdeck.com/wattanx/demystifying-nuxt-bridge  • • • • •

Slide 11

Slide 11 text

手順紹介: 段階的に乗り換える場合  3 行でまとめ Nuxt 3 側に iframe だけのページを作り, そこから Nuxt 2 側のページを開く. ブラウザのパスを親と子で同期させる Nuxt 3 側で新しいページを作ったら, iframe のページから新ページにリダイレクトさせる  Pros / Cons いままでの負債を見なかったことにできる. プロジェクトが大きすぎる場合に使える. もっともパワーが必要. iframe に対する生理的嫌悪感.   参考: Nuxt2 から 3 へマイグレーションする方法考えてたら ( 略) / mewton https://tome.app/mewton-8cb/vue-fes-2023-clnjmh8ez0044l77dwardvtga • • • • •

Slide 12

Slide 12 text

Nuxt Bridge を導入できないケース プロジェクトがでかすぎる クソデカモノリスフロントエンド リリース 1 回の影響範囲が大きすぎる Vue, Nuxt の標準的な記法に則っていない Vue, Nuxt の標準的でない “ 変なこと” をしている • ⚬ • • •

Slide 13

Slide 13 text

hacomono での例 管理サイト Components .. 700 vue files, 100000 lines Pages .. 600 paths, 50000 lines Vuex Store .. 200 files, 700 stores  Nuxt 2.15 Module Federation のようなものを独自実装   • • メンバーサイト Components .. 400 vue files, 25000 lines Pages .. 250 paths, 15000 lines Vuex Store .. 80 files, 214 stores  Nuxt 2.15 nuxt property decorator Nuxt Island のようなものを独自実装 • • •

Slide 14

Slide 14 text

Nuxt 3 化前にやるべきこと

Slide 15

Slide 15 text

Vue 3, Nuxt 3 を理解する  別のプロジェクトを作る or 学習する時間を設けるなど 2 系と 3 系の差分を理解しておく         参考: Nuxt 3 Migration Simplified: A Cheat Sheet https://harlanzw.com/blog/nuxt-3-migration-cheatsheet • •

Slide 16

Slide 16 text

Vitest を予め導入しておく  webpack → vite となった際のエラーを部分的に事前に検知できる Nuxt 3 では vitest が標準になる nuxt-vitest ( 将来的には nuxt/test-utils に統合される)  ※ 弊プロジェクトでは, これで循環参照を検知した     参考: Nuxt to the Edge / Sebastien Chopin 参考: Nuxt 3 で始めるテスト導入戦略と初手 / 野崎 才門 (hacomono) https://speakerdeck.com/hacomono/nuxt-3dehazimerutesutodao-ru-zhan-lue-tochu-shou • • ⚬

Slide 17

Slide 17 text

機械的な修正を検討する  eslint-plugin-vue を使う 機械的にコードを変換     参考: Vue 2 の EOL まで 2 ヶ月ですが、進捗どうですか? / 小林 和弘 (MedPeer) https://www.slideshare.net/KazuhiroKobayashikzh/vue-2-eol-2 参考: eslint-plugin-vue の現状と今後 / 太田 洋介 (Future) https://ota-meshi.github.io/vue-fes-japan-2023-slide 参考: eslint-plugin-vue を使用して継続的に vue3 に移行する / 太田 洋介 (Future, vue-fes jp 2022) https://ota-meshi.github.io/vue-fes-japan-online-2022-slide 参考: 走りながらエンジンを交換する ~ 大規模プロダクトを成長させつつVue3 にするには / 篠田 貴大 (CloudSign) https://speakerdeck.com/bengo4com/20231028 • •

Slide 18

Slide 18 text

おわり

Slide 19

Slide 19 text

References

Slide 20

Slide 20 text

References (1/1)  vue-fes jp 2023 sessions Demystifying Nuxt Bridge / wattanx (STORES) Nuxt2 から 3 へマイグレーションする方法考えてたら ( 略) / mewton Nuxt to the Edge / Sebastien Chopin Nuxt 3 で始めるテスト導入戦略と初手 / 野崎 才門 (hacomono) Vue 2 の EOL まで 2 ヶ月ですが、進捗どうですか? / 小林 和弘 (MedPeer) eslint-plugin-vue の現状と今後 / 太田 洋介 (Future)  走りながらエンジンを交換する ~ 大規模プロダクトを成長させつつVue3 にするには / 篠田 貴大 (CloudSign) Vue.js クリニック • • • • • • • •

Slide 21

Slide 21 text

References (2/2)  site Nuxt 3 Migration Simplified: A Cheat Sheet  vue-fes jp 2022 sessions eslint-plugin-vue を使用して継続的に vue3 に移行する / 太田 洋介 (Future) • •