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
2k
小さく進める Nuxt 3 移行
wattanx
May 31, 2023
Tweet
Share
More Decks by wattanx
See All by wattanx
フロントエンド技術選定の裏側
wattanx
0
48
Unlocking the potential of Nuxt Server Components
wattanx
2
540
Deep dive into Nuxt Server Components
wattanx
1
3.1k
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
wattanx
4
3.7k
Demystifying Nuxt Bridge
wattanx
3
6.5k
プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
wattanx
0
2.1k
Other Decks in Programming
See All in Programming
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
290
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
280
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
500
Porting a visionOS App to Android XR
akkeylab
0
290
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
620
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
450
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
PipeCDのプラグイン化で目指すところ
warashi
1
260
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
660
Goで作る、開発・CI環境
sin392
0
210
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
640
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
120
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
KATA
mclloyd
30
14k
A better future with KSS
kneath
239
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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