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
340
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.
AI推進室の取り組み
hacomono
PRO
1
80
組込みエンジニアの私が長年抱えていた課題がAIで解決した話
hacomono
PRO
1
78
AI活用のための情報設計 〜もう一段上のAI活用へ〜
hacomono
PRO
0
120
カナリアリリースの異常検知を SLOバーンレートを用いて実装した話
hacomono
PRO
0
71
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
310
hacomonoらしさをデザインする
hacomono
PRO
2
170
IoTの沈黙をどう検知する?Web系エンジニアが挑んだ苦難と改善記録
hacomono
PRO
1
250
AWS Step Functionsで実現するジョブ基盤 -プロダクトチームを支える基盤づくり-
hacomono
PRO
1
230
プロダクトの一番の理解者を目指してQAが取り組んでいること 〜現場・マネジメント各視点のプラクティス〜
hacomono
PRO
1
500
Other Decks in Technology
See All in Technology
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
580
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
580
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
740
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
380
roppongirb_20250911
igaiga
1
240
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
4
490
S3アクセス制御の設計ポイント
tommy0124
3
200
Create Ruby native extension gem with Go
sue445
0
120
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.1k
Agile PBL at New Grads Trainings
kawaguti
PRO
1
450
Featured
See All Featured
Making Projects Easy
brettharned
117
6.4k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
For a Future-Friendly Web
brad_frost
180
9.9k
Side Projects
sachag
455
43k
Building Adaptive Systems
keathley
43
2.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The Invisible Side of Design
smashingmag
301
51k
Agile that works and the tools we love
rasmusluckow
330
21k
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) • •