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

Transcript

1. STORES 株式会社 v-tokyo 2023年 2月 Nuxt 3 移行に向けてがんばっています
2. 目次 2 自己紹介 はじめに 今までやってきたこと よかったこと 終わりに 01 02 03 04 05
3. 自己紹介
4. 自己紹介 4 梅木綾佑(うめきりょうすけ） ・複数のWEB系企業を経て、STORES 株式会社に入社 ・最近アコースティックギターをはじめました
5. はじめに
6. はじめに 自分でつくれる、 本格的なネットショップ むずかしい知識や技術いらずで 自分だけのネットショップをかんたんに。
7. はじめに 7 ネットショップ設立オーナーさんが触る ダッシュボードをNuxt 3 移行するまでやっていること
8. はじめに 8 3行サマリー • 有識者でワーキンググループを作って、Nuxt 3 移行を進めているよ • Nuxt 3 へのマイグレートではなく、まずは Nuxt Bridge を使う段階 的なアップデートを行うことにしたよ • Nuxt Bridge が依存している Vue 2.7 にアップデートしたので、こ れから Nuxt Bridge を入れて、最終的に Nuxt 3 で動かせるようにす るよ
9. はじめに 9 Nuxt 3 が2022年秋に ついにリリースされました！ いろいろと進化してる！ 使いたい！ よし！早速バージョンあげて みよう！
10. はじめに 10 けど、色々とやることありそう、、、 ということで、色々と対応してきたので まとめてみました
11. 今までやってきたこと
12. 今までやってきたこと(ワーキンググループの発足) 12 何をすればいいんだっけ？ を整理するためにワーキンググループを発足
13. 今までやってきたこと 13 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備 ④ Vue 3 への移行準備 ③ Jest から Vitest への移行
14. 今までやってきたこと(Nuxt Bridge 移行への準備) 14 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備 ④ Vue 3 への移行準備 ③ Jest から Vitest への移行
15. 今までやってきたこと(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 がいくつかあるが、それらは 剥がして自分達で作れるため
16. 今までやってきたこと(Nuxt Bridge 移行への準備) 16 ということで、Nuxt Bridge を入れたが、 Vue 2.7 を要求することがわかったので、 bridge: false x Vue 2.6 でまずはリリースを行った
17. 今までやってきたこと 17 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備 ④ Vue 3 への移行準備 ③ Jest から Vitest への移行
18. 今までやってきたこと(Vue 2.7 移行への準備) 18 社内デザインシステムライブラリの Vue 2.7 移行 • 弊社のデザインシステムで使用している UI ライブラリを Vue 2.7 に あげて動かない箇所の修正 ◦ https://careerhack.en-japan.com/report/detail/1553
19. 今までやってきたこと 19 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備 ④ Vue 3 への移行準備 ③ Jest から Vitest への移行
20. 今までやってきたこと(Jest から Vitest への移行) 20 壊れたテストの修正 ダッシュボードのVue 2.7 へあげると、 テストがほとんど動かなくなってしまった 😇
21. 今までやってきたこと(Jest から Vitest への移行) 21 Jest から Vitest への移行
22. 今までやってきたこと(Jest から Vitest への移行) 22 壊れたテストの修正 • Jest で動かすことに時間をかけるよりは、Vitest を使用して解 決できることがわかったので、そちらに移行することに採用 • 解決も図れて、@Nuxt/test-utils は Vitest の両方をサポートし ているため、Nuxt Bridge 移行では Vite を利用していきたい
23. 今までやってきたこと(Jest から Vitest 移行) 23 大変だったこと • Webpack でビルドしている社内旧UIラ イブラリでUMD 形式の出力だと、なぜ か Vitest の中で空でレンダリングされ ていた。 • そこで ESM 形式に出力して、Vitest の中でしっかり UI ライブラリがレンダ リングされるようにした
24. 今までやってきたこと(Jest から Vitest 移行) 24 大変だったこと • Vitest で実行すると、Jest での実行時間 より長く伸びてしまうことがわかった • GitHub Actions で並列で処理をするよう にして、遅くなるのを回避 ◦ 結果、10分 -> 4分の短縮に成功！！
25. 今までやってきたこと 25 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備 ④ Vue 3 への移行準備 ③ Jest から Vitest への移行
26. 今までやってきたこと(Vue 3 への移行準備) 26 Vue 3 への対応 • Vue.extend を defineComponent へ変更 • コンポーネントに Emits Options を追加 • .sync 修飾子 API の書き直し • Slots API の書き直し
27. 今までやってきたこと(Vue 3 への移行準備) 27 大量ファイルの中の API の置き換えや追加 • ダッシュボードの Vue ファイルは 1240 ファイルもある • とても手作業で全部を行うことは難しい、、、。
28. 今までやってきたこと(Vue 3 への移行準備) 28 • ということで、既存のコンポーネントファイルたちに自動で置換で きるスクリプトを作成して、一気に API の書き換えを行った。 ◦ https://github.com/wattanx/wattanx-converter ◦ https://wattanx-converter.vercel.app/ 大量ファイルのAPI の置き換えや追加
29. 今までやってきたこと(Vue 3 への移行準備) 29
30. 今までやってきたこと(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 を追加する
31. 終わりに
32. 終わりに(よかったこと) 32 Vue 2.7 で動かせるメリットが大きい • Script Setup で書けるようになった 🎉🎉🎉 • vue-tsc で生成したコンポーネントの型と Nuxt の components オプションの型が互換性があるようになった
33. 終わりに(これからのこと) 33 Nuxt Bridge 移行をやる上で まだまだやることはたくさん Composables の書き換え RFC で上がっている対応
34. 終わりに(学び) 34 Nuxt 3 移行行うことは多くある • Nuxt Bridge を使うにも、先に Vue 2.7 対応が入る • Nuxt 3 にあげるにも、Vue 3 対応が入る
35. 終わりに(学び) 35 あらかじめリソースや時間をかけて、 バージョンアップ計画を立てる必要がある
36. 終わりに 36 また何か更新があれば、 発信していくので、続編をお楽しみに〜