Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt2 -> 3 を戦っていくには
Search
hacomono Inc.
PRO
November 07, 2023
Technology
0
260
Nuxt2 -> 3 を戦っていくには
Vue Fes Japan 2023 After Meetup
株式会社hacomono/みゅーとん
hacomono Inc.
PRO
November 07, 2023
Tweet
Share
More Decks by hacomono Inc.
See All by hacomono Inc.
Waroomとインシデントと私
hacomono
PRO
0
100
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
560
初めてアジャイルテストに挑戦してみたら、スクラムチームが良いサイクルを回し始めた話
hacomono
PRO
1
230
スクラムチームの品質戦略 1年の歩み
hacomono
PRO
1
360
スクラムエッセンス導入3ヶ月のチームに起きた変化
hacomono
PRO
1
340
アジャイルの灯火を絶やさない! 社内アジャイルコミュニティ運営
hacomono
PRO
1
310
hacomonoにおけるプロダクトエンジニアの役割と生態
hacomono
PRO
5
790
"ウルトラジャンプ" な成長を支えるプロダクトエンジニアというキャリア
hacomono
PRO
4
1k
PoCに向けた最小限の機能開発で考えたこととしくじり
hacomono
PRO
1
780
Other Decks in Technology
See All in Technology
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
Evangelismo técnico: ¿qué, cómo y por qué?
trishagee
0
360
AGIについてChatGPTに聞いてみた
blueb
0
130
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
12k
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
220
TypeScript、上達の瞬間
sadnessojisan
46
13k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.6k
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
120
DMARC 対応の話 - MIXI CTO オフィスアワー #04
bbqallstars
1
160
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
BBQ
matthewcrist
85
9.3k
Automating Front-end Workflow
addyosmani
1366
200k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Transcript
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 にした • • •
None
話すこと / 話さないこと 話す 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) • •