Nuxt 3 移行に向けてがんばっています

by offich

Slide 1

Slide 1 text

STORES 株式会社 v-tokyo 2023年 2月 Nuxt 3 移行に向けてがんばっています

Slide 2

Slide 2 text

目次 2 自己紹介はじめに今までやってきたことよかったこと終わりに 01 02 03 04 05

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

自己紹介 4 梅木綾佑(うめきりょうすけ）・複数のWEB系企業を経て、STORES 株式会社に入社・最近アコースティックギターをはじめました

Slide 5

Slide 5 text

はじめに

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

はじめに 7 ネットショップ設立オーナーさんが触るダッシュボードをNuxt 3 移行するまでやっていること

Slide 8

Slide 8 text

はじめに 8 3行サマリー ● 有識者でワーキンググループを作って、Nuxt 3 移行を進めているよ ● Nuxt 3 へのマイグレートではなく、まずは Nuxt Bridge を使う段階的なアップデートを行うことにしたよ ● Nuxt Bridge が依存している Vue 2.7 にアップデートしたので、これから Nuxt Bridge を入れて、最終的に Nuxt 3 で動かせるようにするよ

Slide 9

Slide 9 text

はじめに 9 Nuxt 3 が2022年秋についにリリースされました！いろいろと進化してる！使いたい！よし！早速バージョンあげてみよう！

Slide 10

Slide 10 text

はじめに 10 けど、色々とやることありそう、、、ということで、色々と対応してきたのでまとめてみました

Slide 11

Slide 11 text

今までやってきたこと

Slide 12

Slide 12 text

今までやってきたこと(ワーキンググループの発足) 12 何をすればいいんだっけ？を整理するためにワーキンググループを発足

Slide 13

Slide 13 text

今までやってきたこと 13 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備 ④ Vue 3 への移行準備 ③ Jest から Vitest への移行

Slide 14

Slide 14 text

今までやってきたこと(Nuxt Bridge 移行への準備) 14 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備 ④ Vue 3 への移行準備 ③ Jest から Vitest への移行

Slide 15

Slide 15 text

今までやってきたこと(Nuxt Bridge 移行への準備) 15 ● Nuxt 3 へあげる ● Nuxt Bridge を使用する 1. Nuxt 3 = Vue 3 なので、Vue 3 に直接移行するのは難易度が高いため 2. Nuxt Bridge なら、Vue 2.7 にあげつつ、Nuxt3の恩恵をある程度受けられるため 3. Nuxt Bridgeで動かない Nuxt Modules がいくつかあるが、それらは剥がして自分達で作れるため

Slide 16

Slide 16 text

今までやってきたこと(Nuxt Bridge 移行への準備) 16 ということで、Nuxt Bridge を入れたが、 Vue 2.7 を要求することがわかったので、 bridge: false x Vue 2.6 でまずはリリースを行った

Slide 17

Slide 17 text

今までやってきたこと 17 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備 ④ Vue 3 への移行準備 ③ Jest から Vitest への移行

Slide 18

Slide 18 text

今までやってきたこと(Vue 2.7 移行への準備) 18 社内デザインシステムライブラリの Vue 2.7 移行 ● 弊社のデザインシステムで使用している UI ライブラリを Vue 2.7 にあげて動かない箇所の修正 ○ https://careerhack.en-japan.com/report/detail/1553

Slide 19

Slide 19 text

今までやってきたこと 19 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備 ④ Vue 3 への移行準備 ③ Jest から Vitest への移行

Slide 20

Slide 20 text

今までやってきたこと(Jest から Vitest への移行) 20 壊れたテストの修正ダッシュボードのVue 2.7 へあげると、テストがほとんど動かなくなってしまった 😇

Slide 21

Slide 21 text

今までやってきたこと(Jest から Vitest への移行) 21 Jest から Vitest への移行

Slide 22

Slide 22 text

今までやってきたこと(Jest から Vitest への移行) 22 壊れたテストの修正 ● Jest で動かすことに時間をかけるよりは、Vitest を使用して解決できることがわかったので、そちらに移行することに採用 ● 解決も図れて、@Nuxt/test-utils は Vitest の両方をサポートしているため、Nuxt Bridge 移行では Vite を利用していきたい

Slide 23

Slide 23 text

今までやってきたこと(Jest から Vitest 移行) 23 大変だったこと ● Webpack でビルドしている社内旧UIライブラリでUMD 形式の出力だと、なぜか Vitest の中で空でレンダリングされていた。 ● そこで ESM 形式に出力して、Vitest の中でしっかり UI ライブラリがレンダリングされるようにした

Slide 24

Slide 24 text

今までやってきたこと(Jest から Vitest 移行) 24 大変だったこと ● Vitest で実行すると、Jest での実行時間より長く伸びてしまうことがわかった ● GitHub Actions で並列で処理をするようにして、遅くなるのを回避 ○ 結果、10分 -> 4分の短縮に成功！！

Slide 25

Slide 25 text

今までやってきたこと 25 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備 ④ Vue 3 への移行準備 ③ Jest から Vitest への移行

Slide 26

Slide 26 text

今までやってきたこと(Vue 3 への移行準備) 26 Vue 3 への対応 ● Vue.extend を deﬁneComponent へ変更 ● コンポーネントに Emits Options を追加 ● .sync 修飾子 API の書き直し ● Slots API の書き直し

Slide 27

Slide 27 text

今までやってきたこと(Vue 3 への移行準備) 27 大量ファイルの中の API の置き換えや追加 ● ダッシュボードの Vue ファイルは 1240 ファイルもある ● とても手作業で全部を行うことは難しい、、、。

Slide 28

Slide 28 text

今までやってきたこと(Vue 3 への移行準備) 28 ● ということで、既存のコンポーネントファイルたちに自動で置換できるスクリプトを作成して、一気に API の書き換えを行った。 ○ https://github.com/wattanx/wattanx-converter ○ https://wattanx-converter.vercel.app/ 大量ファイルのAPI の置き換えや追加

Slide 29

Slide 29 text

今までやってきたこと(Vue 3 への移行準備) 29

Slide 30

Slide 30 text

今までやってきたこと(Vue 3 への移行準備) 30 ● Vue Composition Converter ○ Option API から Composition API に変更する ● Vue Script Setup Converter ○ Composition API から Script Setup に変更する ● Vue Mixins Converter ○ Mixin から Composition API に変更する ● Insert Emits Options ○ コンポーネントのOption に Emits を追加する

Slide 31

Slide 31 text

終わりに

Slide 32

Slide 32 text

終わりに(よかったこと) 32 Vue 2.7 で動かせるメリットが大きい ● Script Setup で書けるようになった 🎉🎉🎉 ● vue-tsc で生成したコンポーネントの型と Nuxt の components オプションの型が互換性があるようになった

Slide 33

Slide 33 text

終わりに(これからのこと) 33 Nuxt Bridge 移行をやる上でまだまだやることはたくさん Composables の書き換え RFC で上がっている対応

Slide 34

Slide 34 text

終わりに(学び) 34 Nuxt 3 移行行うことは多くある ● Nuxt Bridge を使うにも、先に Vue 2.7 対応が入る ● Nuxt 3 にあげるにも、Vue 3 対応が入る

Slide 35

Slide 35 text

終わりに(学び) 35 あらかじめリソースや時間をかけて、バージョンアップ計画を立てる必要がある

Slide 36

Slide 36 text

終わりに 36 また何か更新があれば、発信していくので、続編をお楽しみに〜