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.9k
小さく進める Nuxt 3 移行
wattanx
May 31, 2023
Tweet
Share
More Decks by wattanx
See All by wattanx
Unlocking the potential of Nuxt Server Components
wattanx
2
470
Deep dive into Nuxt Server Components
wattanx
1
2.8k
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
wattanx
4
3.4k
Demystifying Nuxt Bridge
wattanx
3
6k
プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
wattanx
0
2k
Other Decks in Programming
See All in Programming
運用しながらリアーキテクチャ
nealle
0
260
AWS CDKにおけるL2 Constructの仕組み / aws-cdk-l2-construct
gotok365
4
520
Domain-Driven Design (Tutorial)
hschwentner
13
22k
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
1
410
Better Code Design in PHP
afilina
0
190
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
2
490
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
2
320
AIプログラミング雑キャッチアップ
yuheinakasaka
21
5.5k
PromptyによるAI開発入門
ymd65536
1
190
RecSys2024 参加報告
unonao
1
110
自力でTTSモデルを作った話
zgock999
0
140
読まないコードリーディング術
hisaju
1
150
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
99
5.4k
Embracing the Ebb and Flow
colly
84
4.6k
Rails Girls Zürich Keynote
gr2m
94
13k
Gamification - CAS2011
davidbonilla
80
5.2k
Six Lessons from altMBA
skipperchong
27
3.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Docker and Python
trallard
44
3.3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Producing Creativity
orderedlist
PRO
344
40k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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