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
42
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
GoのGenericsによるslice操作との付き合い方
syumai
3
680
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
270
XSLTで作るBrainfuck処理系
makki_d
0
210
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
170
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
190
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
470
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
140
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
370
ReadMoreTextView
fornewid
1
460
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
480
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
92
6.1k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Raft: Consensus for Rubyists
vanstee
140
7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Why Our Code Smells
bkeepers
PRO
337
57k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Optimizing for Happiness
mojombo
379
70k
Making Projects Easy
brettharned
116
6.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