Nuxt2 -> 3 を戦っていくには

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

自己紹介株式会社 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

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

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

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

Nuxt 3 化の方法まとめ

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

手順紹介: 一気に乗り換える場合 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 クリニックのセッションで紹介されてたサイト • • • • •

手順紹介: 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 • • • • •

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

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

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 のようなものを独自実装 • • •

Nuxt 3 化前にやるべきこと

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

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 • • ⚬

機械的な修正を検討する 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 • •

おわり

References

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 クリニック • • • • • • • •

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

Nuxt2 -> 3 を戦っていくには

Nuxt2 -> 3 を戦っていくには

hacomono Inc. PRO

More Decks by hacomono Inc.

Other Decks in Technology

Featured

Transcript