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
小さく進める Nuxt 3 移行
Search
wattanx
May 31, 2023
Programming
0
1.7k
小さく進める Nuxt 3 移行
wattanx
May 31, 2023
Tweet
Share
More Decks by wattanx
See All by wattanx
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
wattanx
4
2.4k
Demystifying Nuxt Bridge
wattanx
3
5k
プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
wattanx
0
1.9k
Other Decks in Programming
See All in Programming
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
590
Prolog入門
qnighy
4
1k
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
360
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
A New Era of Testing
mannodermaus
2
510
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
650
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
160
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
250
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
Featured
See All Featured
For a Future-Friendly Web
brad_frost
174
9.3k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Visualization
eitanlees
142
15k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Happy Clients
brianwarren
96
6.6k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Automating Front-end Workflow
addyosmani
1365
200k
Infographics Made Easy
chrislema
239
18k
Transcript
STORES 株式会社 小さく進める Nuxt 3 移行
目次 2 自己紹介 はじめに 移行の方針 実際にやっていること まとめ 01 02 03
04 05
自己紹介
渡邊 涼太(wattanx) ・新卒で受託開発系の会社に入社し、業務系Webアプリケーションの 開発に従事。 ・2022年1月に STORES に入社。 ・現在は STORES ネットショップの開発に関わっている。
・猫が好き。 ・大阪在住。 ・https://twitter.com/pontaxx 自己紹介
はじめに
はじめに 自分でつくれる、 本格的なネットショップ むずかしい知識や技術いらずで 自分だけのネットショップをかんたんに。
はじめに ネットショップを開設したオーナーさんが触る ダッシュボードをNuxt 3 に移行しようとしている
はじめに 移行に向けて動き出す前のNuxt のバージョンや周辺ツール • Nuxt 2.15.8 • Vue 2.6.14 •
@nuxtjs/composition-api • Jest (2022年6月)
はじめに 現在のNuxt のバージョンや周辺ツール • Nuxt ^2.16 • Vue ^2.7 •
Nuxt Bridge • Vitest (2023年5月)
はじめに どのように移行を進めてきたのか
移行の方針
移行の方針 • コード行数:約 30 万行 • ページ数:約 170 ページ •
Vue コンポーネント:約 1000 個 プロダクトの規模感
移行の方針 • Nuxt 3 へ直接バージョンアップする • Nuxt Bridge を使用する
移行の方針 • https://github.com/nuxt/bridge • Nuxt 3 と上方互換性のあるライブラリ (Nuxt 3 の機能の一部が
Nuxt 2 でも使えるようなる) • 使うと、Nuxt 3 へバージョンアップする際の差分を小さくできる Nuxt Bridge とは
移行の方針 1. Nuxt 3, Vue 3 に直接移行するのは難易度が高いため 2. Nuxt Bridge
なら、同じリポジトリ内で移行しやすく、Nuxt 3の恩 恵をある程度受けられるため 3. Nuxt Bridgeで動かない Nuxt Modules がいくつかあるが、それらは 剥がして自分達で作れるため
移行の方針 • 安定版が出ていない Nuxt Bridge のデメリット
移行の方針 • バグがあった場合は、Nuxt Bridge のリポジトリに Issue を立てたり Pull Request を出したりしてコントリビュートしてる
• Issueのトリアージもしてる(権限をもっているので)
移行の方針 どのように意思決定しているか
移行の方針 WG(ワーキンググループ)を立ち上げた
移行の方針 • 少人数で意思決定ができる • 有志のメンバーがオーナーシップを持って進めやすくなる WGという形をとることで
移行の方針 プロダクト開発と並行で進めやすくなる
実際にやっていること
実際にやっていること 小さく進められるようにタスクを分解している
実際にやっていること 1. Nuxt Bridge の導入(bridge: falseで) 2. Jest -> Vitest
へ移行 3. Vue 2.7 へ移行 4. Vue 3 移行の準備 5. Nuxt Bridge の有効化 6. Nuxt 3 互換のAPI への移行
実際にやっていること 1. Nuxt Bridge の導入(bridge: falseで) 2. Jest -> Vitest
へ移行 3. Vue 2.7 へ移行 4. Vue 3 移行の準備 5. Nuxt Bridge の有効化 6. Nuxt 3 互換のAPI への移行
実際にやっていること Nuxt 3 移行に向けてがんばっています https://speakerdeck.com/offich/stores-dashboard-nuxt3-migration
実際にやっていること Nuxt Bridge の有効化
実際にやっていること(Nuxt Bridge の有効化) bridge: false で無効にしているNuxt Bridge の機能を有効化する
実際にやっていること(Nuxt Bridge の有効化) Nuxt Bridge へのマイグレーション やること多くないですか? https://nuxt.com/docs/bridge/overview
実際にやっていること(Nuxt Bridge の有効化) 実はすべての対応を一度にする必要はない
実際にやっていること(Nuxt Bridge の有効化) • nuxt コマンドを nuxi コマンドに変更するよう記載されている
実際にやっていること(Nuxt Bridge の有効化) Nitro や Vite を使わないのであれば、 nuxt コマンドのままでも良い
実際にやっていること(Nuxt Bridge の有効化) • Nuxt Bridge の機能を有効にしつつ、ビルド・デプロイは今までどお りという選択がとれる • Nuxt
Modules が動かない場合は nuxt コマンドを使えば大抵解決す る
実際にやっていること(Nuxt Bridge の有効化) Nuxt Bridge を有効化するには何をすればいいの?
実際にやっていること(Nuxt Bridge の有効化) @nuxtjs/composition-api を消しても動くようする
実際にやっていること(Nuxt Bridge の有効化) • Nuxt Bridge では、@nuxtjs/composition-api を削除する必要がある (Nuxt Bridge
に同様のComposable 関数が含まれているため) • ただし、変更が入った Composable 関数があるので対応する必要がある https://nuxt.com/docs/bridge/bridge-composition-api • @nuxtjs/composition-api を使っていない場合は、何もしなくても有効 化できるかもしれません
実際にやっていること(Nuxt Bridge の有効化) • useFetch の $fetch と $fetchState を
fetch と fetchState に変更 する
実際にやっていること(Nuxt Bridge の有効化) • useRoute の返り値が computed ではなくなる
実際にやっていること • defineNuxtMiddleware, defineNuxtPlugin がなくなる
実際にやっていること(Nuxt Bridge の有効化) これだけで Nuxt Bridge の有効化ができました (まだ nuxi コマンドは使ってません)
実際にやっていること(Nuxt Bridge の有効化) でも、@nuxtjs/composition-api って Nuxt 3 では使えないんじゃないの?
実際にやっていること Nuxt Bridge を有効化すると Nuxt 3 互換の API を利用できる
実際にやっていること Nuxt 3 互換のAPI への移行
実際にやっていること(Nuxt 3 互換のAPI への移行) • Nuxt Bridge では Nuxt 3
互換のAPI(Composable 関数など) が利用できる
実際にやっていること(Nuxt 3 互換のAPI への移行) • Nuxt Bridge でも useState が利用できるので、Vuex
から useState へのマイグレーションもできる (Nuxt 3 では Nuxt 2 の store ディレクトリがサポートされなくなる)
実際にやっていること(Nuxt 3 互換のAPI への移行) • @nuxtjs/composition-api の Composable 関数と共存できるので 少しずつ
Nuxt 3 互換のAPI に変更することができる
実際にやっていること(Nuxt 3 互換のAPI への移行) 少しずつ移行できるので、動作確認も時間がかからない
実際にやっていること Nuxt Bridgeを使うと Nuxt 3 へバージョンアップするときに差分が少なくなる
実際にやっていること Nuxt Bridgeを入れることで Nuxt 2 の状態でどこまで移行できるんですか?
実際にやっていること Nuxt 2 to Nuxt 3 https://nuxt.com/docs/migration/overview
実際にやっていること Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる
Bridgeでも一部できる
実際にやっていること ほとんど Nuxt 2 の状態でマイグレーションできます
まとめ
まとめ 現在のNuxt のバージョンや周辺ツール • Nuxt ^2.16 • Vue ^2.7 •
Nuxt Bridge • Vitest (2023年5月)
まとめ プロダクト開発をしながら隙間時間で進められている
まとめ 少しずつ進められるので、 他の機能開発とコンフリクトしない
まとめ 少しずつ Nuxt 3 に向けたマイグレーションができるのが Nuxt Bridge の良いところ
まとめ Nuxt Bridge 移行の知見まとめ https://zenn.dev/wattanx/scraps/2200576686eabc
まとめ 今日話したことはすべてCLIでできます https://wattanx-converter.vercel.app/cli/nuxt-bridge-migration-tools.html