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.
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
460
初めてアジャイルテストに挑戦してみたら、スクラムチームが良いサイクルを回し始めた話
hacomono
PRO
1
220
スクラムチームの品質戦略 1年の歩み
hacomono
PRO
1
340
スクラムエッセンス導入3ヶ月のチームに起きた変化
hacomono
PRO
1
330
アジャイルの灯火を絶やさない! 社内アジャイルコミュニティ運営
hacomono
PRO
1
300
hacomonoにおけるプロダクトエンジニアの役割と生態
hacomono
PRO
5
750
"ウルトラジャンプ" な成長を支えるプロダクトエンジニアというキャリア
hacomono
PRO
4
1k
PoCに向けた最小限の機能開発で考えたこととしくじり
hacomono
PRO
1
750
「ここは俺に任せておまえは先に行け」hacomono運用保守部の紹介
hacomono
PRO
0
110
Other Decks in Technology
See All in Technology
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
120
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
110
APIテスト自動化の勘所
yokawasa
7
4.1k
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
300
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.1k
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
160
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
630
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
120
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1365
200k
4 Signs Your Business is Dying
shpigford
180
21k
We Have a Design System, Now What?
morganepeng
50
7.2k
Documentation Writing (for coders)
carmenintech
65
4.4k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
Gamification - CAS2011
davidbonilla
80
5k
Designing for humans not robots
tammielis
249
25k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
A designer walks into a library…
pauljervisheath
202
24k
Bash Introduction
62gerente
608
210k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
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) • •