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
58
AWS Step Functionsで実現するジョブ基盤 -プロダクトチームを支える基盤づくり-
hacomono
PRO
1
140
プロダクトの一番の理解者を目指してQAが取り組んでいること 〜現場・マネジメント各視点のプラクティス〜
hacomono
PRO
1
370
アウトカムを最大化させるプロダクトエンジニアの動き
hacomono
PRO
1
630
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
610
hacomonoの品質とQA[Findy Job LT]
hacomono
PRO
0
300
社運懸かった大型機能をゼロから作り直した話
hacomono
PRO
0
250
MagicPodでモバイルアプリの”自動テスト”を最速で立ち上げよう
hacomono
PRO
1
360
Other Decks in Technology
See All in Technology
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
3
850
大失敗しないための Web API 開発レシピ / A recipe for not making a big failure on WebAPI development
yokawasa
1
230
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.3k
Introduction to Bill One Development Engineer
sansan33
PRO
0
250
Data Hubグループ 紹介資料
sansan33
PRO
0
1.8k
MCPを利用して自然言語で3Dプリントしてみよう!
hamadakoji
0
1.3k
Tensix Core アーキテクチャ解説
tenstorrent_japan
0
300
OpenTelemetry Collector internals
ymotongpoo
4
480
組織とセキュリティ文化と、自分の一歩
maimyyym
3
1.4k
キャッシュレス決済のプロダクトから決済基盤への進化
b1a9id
0
220
20250612_GitHubを使いこなすためにソニーの開発現場が取り組んでいるプラクティス.pdf
osakiy8
1
510
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.4k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
138
7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Writing Fast Ruby
sferik
628
61k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Docker and Python
trallard
44
3.4k
Rails Girls Zürich Keynote
gr2m
94
14k
Visualization
eitanlees
146
16k
The World Runs on Bad Software
bkeepers
PRO
68
11k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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) • •