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
71
Unlocking the potential of Nuxt Server Components
wattanx
2
580
Deep dive into Nuxt Server Components
wattanx
1
3.3k
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
wattanx
4
3.8k
Demystifying Nuxt Bridge
wattanx
3
6.7k
プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
wattanx
0
2.1k
Other Decks in Programming
See All in Programming
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.3k
AIでLINEスタンプを作ってみた
eycjur
1
220
私の後悔をAWS DMSで解決した話
hiramax
4
190
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
410
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
1k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
340
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
140
コンテキストエンジニアリング Cursor編
kinopeee
1
750
機能追加とリーダー業務の類似性
rinchoku
2
970
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
160
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Into the Great Unknown - MozCon
thekraken
40
2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Scaling GitHub
holman
463
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Speed Design
sergeychernyshev
32
1.1k
Unsuck your backbone
ammeep
671
58k
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