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
320
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.
hacomonoらしさをデザインする
hacomono
PRO
2
140
IoTの沈黙をどう検知する?Web系エンジニアが挑んだ苦難と改善記録
hacomono
PRO
1
70
AWS Step Functionsで実現するジョブ基盤 -プロダクトチームを支える基盤づくり-
hacomono
PRO
1
160
プロダクトの一番の理解者を目指してQAが取り組んでいること 〜現場・マネジメント各視点のプラクティス〜
hacomono
PRO
1
390
アウトカムを最大化させるプロダクトエンジニアの動き
hacomono
PRO
1
660
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
630
hacomonoの品質とQA[Findy Job LT]
hacomono
PRO
0
320
社運懸かった大型機能をゼロから作り直した話
hacomono
PRO
0
270
MagicPodでモバイルアプリの”自動テスト”を最速で立ち上げよう
hacomono
PRO
1
370
Other Decks in Technology
See All in Technology
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
230
生成AIでwebアプリケーションを作ってみた
tajimon
2
150
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
440
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
420
Prox Industries株式会社 会社紹介資料
proxindustries
0
280
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
11k
GitHub Copilot の概要
tomokusaba
1
130
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
380
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
170
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
150
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
240
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
RailsConf 2023
tenderlove
30
1.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
How GitHub (no longer) Works
holman
314
140k
Faster Mobile Websites
deanohume
307
31k
Automating Front-end Workflow
addyosmani
1370
200k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Optimizing for Happiness
mojombo
379
70k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Making Projects Easy
brettharned
116
6.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
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) • •