Tweet
Tweet

Slide 1

Slide 1 text

STORES 株式会社 小さく進める Nuxt 3 移行

Slide 2

Slide 2 text

目次 2 自己紹介 はじめに 移行の方針 実際にやっていること まとめ 01 02 03 04 05

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

渡邊 涼太（wattanx） ・新卒で受託開発系の会社に入社し、業務系Webアプリケーションの 開発に従事。 ・2022年1月に STORES に入社。 ・現在は STORES ネットショップの開発に関わっている。 ・猫が好き。 ・大阪在住。 ・https://twitter.com/pontaxx 自己紹介

Slide 5

Slide 5 text

はじめに

Slide 6

Slide 6 text

はじめに 自分でつくれる、 本格的なネットショップ むずかしい知識や技術いらずで 自分だけのネットショップをかんたんに。

Slide 7

Slide 7 text

はじめに ネットショップを開設したオーナーさんが触る ダッシュボードをNuxt 3 に移行しようとしている

Slide 8

Slide 8 text

はじめに 移行に向けて動き出す前のNuxt のバージョンや周辺ツール ● Nuxt 2.15.8 ● Vue 2.6.14 ● @nuxtjs/composition-api ● Jest (2022年6月)

Slide 9

Slide 9 text

はじめに 現在のNuxt のバージョンや周辺ツール ● Nuxt ^2.16 ● Vue ^2.7 ● Nuxt Bridge ● Vitest (2023年5月)

Slide 10

Slide 10 text

はじめに どのように移行を進めてきたのか

Slide 11

Slide 11 text

移行の方針

Slide 12

Slide 12 text

移行の方針 ● コード行数：約 30 万行 ● ページ数：約 170 ページ ● Vue コンポーネント：約 1000 個 プロダクトの規模感

Slide 13

Slide 13 text

移行の方針 ● Nuxt 3 へ直接バージョンアップする ● Nuxt Bridge を使用する

Slide 14

Slide 14 text

移行の方針 ● https://github.com/nuxt/bridge ● Nuxt 3 と上方互換性のあるライブラリ (Nuxt 3 の機能の一部が Nuxt 2 でも使えるようなる) ● 使うと、Nuxt 3 へバージョンアップする際の差分を小さくできる Nuxt Bridge とは

Slide 15

Slide 15 text

移行の方針 1. Nuxt 3, Vue 3 に直接移行するのは難易度が高いため 2. Nuxt Bridge なら、同じリポジトリ内で移行しやすく、Nuxt 3の恩 恵をある程度受けられるため 3. Nuxt Bridgeで動かない Nuxt Modules がいくつかあるが、それらは 剥がして自分達で作れるため

Slide 16

Slide 16 text

移行の方針 ● 安定版が出ていない Nuxt Bridge のデメリット

Slide 17

Slide 17 text

移行の方針 ● バグがあった場合は、Nuxt Bridge のリポジトリに Issue を立てたり Pull Request を出したりしてコントリビュートしてる ● Issueのトリアージもしてる（権限をもっているので）

Slide 18

Slide 18 text

移行の方針 どのように意思決定しているか

Slide 19

Slide 19 text

移行の方針 WG（ワーキンググループ）を立ち上げた

Slide 20

Slide 20 text

移行の方針 ● 少人数で意思決定ができる ● 有志のメンバーがオーナーシップを持って進めやすくなる WGという形をとることで

Slide 21

Slide 21 text

移行の方針 プロダクト開発と並行で進めやすくなる

Slide 22

Slide 22 text

実際にやっていること

Slide 23

Slide 23 text

実際にやっていること 小さく進められるようにタスクを分解している

Slide 24

Slide 24 text

実際にやっていること 1. Nuxt Bridge の導入（bridge: falseで） 2. Jest -> Vitest へ移行 3. Vue 2.7 へ移行 4. Vue 3 移行の準備 5. Nuxt Bridge の有効化 6. Nuxt 3 互換のAPI への移行

Slide 25

Slide 25 text

実際にやっていること 1. Nuxt Bridge の導入（bridge: falseで） 2. Jest -> Vitest へ移行 3. Vue 2.7 へ移行 4. Vue 3 移行の準備 5. Nuxt Bridge の有効化 6. Nuxt 3 互換のAPI への移行

Slide 26

Slide 26 text

実際にやっていること Nuxt 3 移行に向けてがんばっています https://speakerdeck.com/offich/stores-dashboard-nuxt3-migration

Slide 27

Slide 27 text

実際にやっていること Nuxt Bridge の有効化

Slide 28

Slide 28 text

実際にやっていること（Nuxt Bridge の有効化） bridge: false で無効にしているNuxt Bridge の機能を有効化する

Slide 29

Slide 29 text

実際にやっていること（Nuxt Bridge の有効化） Nuxt Bridge へのマイグレーション やること多くないですか？ https://nuxt.com/docs/bridge/overview

Slide 30

Slide 30 text

実際にやっていること（Nuxt Bridge の有効化） 実はすべての対応を一度にする必要はない

Slide 31

Slide 31 text

実際にやっていること（Nuxt Bridge の有効化） ● nuxt コマンドを nuxi コマンドに変更するよう記載されている

Slide 32

Slide 32 text

実際にやっていること（Nuxt Bridge の有効化） Nitro や Vite を使わないのであれば、 nuxt コマンドのままでも良い

Slide 33

Slide 33 text

実際にやっていること（Nuxt Bridge の有効化） ● Nuxt Bridge の機能を有効にしつつ、ビルド・デプロイは今までどお りという選択がとれる ● Nuxt Modules が動かない場合は nuxt コマンドを使えば大抵解決す る

Slide 34

Slide 34 text

実際にやっていること（Nuxt Bridge の有効化） Nuxt Bridge を有効化するには何をすればいいの？

Slide 35

Slide 35 text

実際にやっていること（Nuxt Bridge の有効化） @nuxtjs/composition-api を消しても動くようする

Slide 36

Slide 36 text

実際にやっていること（Nuxt Bridge の有効化） ● Nuxt Bridge では、@nuxtjs/composition-api を削除する必要がある （Nuxt Bridge に同様のComposable 関数が含まれているため） ● ただし、変更が入った Composable 関数があるので対応する必要がある https://nuxt.com/docs/bridge/bridge-composition-api ● @nuxtjs/composition-api を使っていない場合は、何もしなくても有効 化できるかもしれません

Slide 37

Slide 37 text

実際にやっていること（Nuxt Bridge の有効化） ● useFetch の $fetch と $fetchState を fetch と fetchState に変更 する

Slide 38

Slide 38 text

実際にやっていること（Nuxt Bridge の有効化） ● useRoute の返り値が computed ではなくなる

Slide 39

Slide 39 text

実際にやっていること ● defineNuxtMiddleware, defineNuxtPlugin がなくなる

Slide 40

Slide 40 text

実際にやっていること（Nuxt Bridge の有効化） これだけで Nuxt Bridge の有効化ができました (まだ nuxi コマンドは使ってません)

Slide 41

Slide 41 text

実際にやっていること（Nuxt Bridge の有効化） でも、@nuxtjs/composition-api って Nuxt 3 では使えないんじゃないの？

Slide 42

Slide 42 text

実際にやっていること Nuxt Bridge を有効化すると Nuxt 3 互換の API を利用できる

Slide 43

Slide 43 text

実際にやっていること Nuxt 3 互換のAPI への移行

Slide 44

Slide 44 text

実際にやっていること（Nuxt 3 互換のAPI への移行） ● Nuxt Bridge では Nuxt 3 互換のAPI（Composable 関数など） が利用できる

Slide 45

Slide 45 text

実際にやっていること（Nuxt 3 互換のAPI への移行） ● Nuxt Bridge でも useState が利用できるので、Vuex から useState へのマイグレーションもできる (Nuxt 3 では Nuxt 2 の store ディレクトリがサポートされなくなる)

Slide 46

Slide 46 text

実際にやっていること（Nuxt 3 互換のAPI への移行） ● @nuxtjs/composition-api の Composable 関数と共存できるので 少しずつ Nuxt 3 互換のAPI に変更することができる

Slide 47

Slide 47 text

実際にやっていること（Nuxt 3 互換のAPI への移行） 少しずつ移行できるので、動作確認も時間がかからない

Slide 48

Slide 48 text

実際にやっていること Nuxt Bridgeを使うと Nuxt 3 へバージョンアップするときに差分が少なくなる

Slide 49

Slide 49 text

実際にやっていること Nuxt Bridgeを入れることで Nuxt 2 の状態でどこまで移行できるんですか？

Slide 50

Slide 50 text

実際にやっていること Nuxt 2 to Nuxt 3 https://nuxt.com/docs/migration/overview

Slide 51

Slide 51 text

実際にやっていること Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでもできる Bridgeでも一部できる

Slide 52

Slide 52 text

実際にやっていること ほとんど Nuxt 2 の状態でマイグレーションできます

Slide 53

Slide 53 text

まとめ

Slide 54

Slide 54 text

まとめ 現在のNuxt のバージョンや周辺ツール ● Nuxt ^2.16 ● Vue ^2.7 ● Nuxt Bridge ● Vitest (2023年5月)

Slide 55

Slide 55 text

まとめ プロダクト開発をしながら隙間時間で進められている

Slide 56

Slide 56 text

まとめ 少しずつ進められるので、 他の機能開発とコンフリクトしない

Slide 57

Slide 57 text

まとめ 少しずつ Nuxt 3 に向けたマイグレーションができるのが Nuxt Bridge の良いところ

Slide 58

Slide 58 text

まとめ Nuxt Bridge 移行の知見まとめ https://zenn.dev/wattanx/scraps/2200576686eabc

Slide 59

Slide 59 text

まとめ 今日話したことはすべてCLIでできます https://wattanx-converter.vercel.app/cli/nuxt-bridge-migration-tools.html