Vue 2 の EOL まで 2 ヶ月ですが進捗どうですか？

by Kobayashi Kazuhiro

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Vue 2 の EOL は 2023/12/31 End of Life を過ぎると… • 2024 年からは Vue 2 のアップデートが⾏われません • npm や CDN からの配信は引き続き⾏われます • 逃げ道として… • HeroDevs で Vue 2 の有償サポートが提供されています Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

eslint の Vue 3 エラーを解消医師専⽤コミュニティサイト MedPeer • eslint で Vue 3 のルールでエラーになったファイルを徐々に migrate • plugin:vue/vue 3 -recommended の Vue 3 ルールを有効化 • エラーが発⽣したファイルのルールをオフにする TODO ファイルを作成 • TODO 対象のファイルを Vue 3 の記述に migrate して TODO から削除 Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Vue 2 と Vue 3 を共存させて徐々に migration 薬剤師のコミュニティサイトヤクメド Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc. • package.json のエイリアスで Vue 3 を個別にインストール • Rails View に紐づくエントリーポイント毎に Vue 3 対応を進める • Vue 3 のテストはモノレポ環境に vitest を導⼊

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

特定保健指導の効率化⽀援サービス Tonoel tonoel-mgr.fitsplus.jp Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc. • Rails を API として使⽤した Nuxt の SPA構成 • ひとつのリポジトリで 2 つの Nuxt を管理するモノレポ • 初期構築時は Vuex 3 を利⽤ • 初期構築時から Composition API を利⽤ • vue ファイルの数: 163（2023-09-06 現在） • Nuxt 2 . 17 系を利⽤（2023-09-06 現在）

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Nuxt 3 の migration ブランチ特定保健指導の効率化⽀援サービス Tonoel Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc. • Nuxt 3 ⽤の migration ブランチを作成 • Nuxt 3 の migration ガイドに沿って破壊的変更に対応 • https://nuxt.com/docs/migration/overview • テストケースで⾒つかった細かい考慮漏れを対応

Slide 31

Slide 31 text

Slide 32

Slide 32 text

医療機関起点の薬局予約サービスやくばと yakubato.jp Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc. • Rails を API として使⽤した Nuxt の SPA 構成 • ひとつのリポジトリで 2 つの Nuxt を管理するモノレポ • 初期構築時から Pinia🍍を利⽤ • 初期構築時から Composition API を利⽤ • vue ファイルの数: 157（2023-09-06 現在） • Nuxt 3 に migration 済

Slide 33

Slide 33 text

とりあえず Nuxt 3 環境をつくる医療機関起点の薬局予約サービスやくばと Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc. • モノレポ内の 1 つの Nuxt のトップページの表⽰担保のみ対応 • 公式の migration ガイドの通りに設定‧コードを書き換える • Nuxt 3 ⾮対応の modules は⾃前で書き直す • @nuxtjs/axios → axios を⾃前で組み込み • @nuxtjs/gtm → @gtm-support/vue-gtm • ユニットテストがコケるのも気にしない

Slide 34

Slide 34 text

壊れているところを⼿分けして直す医療機関起点の薬局予約サービスやくばと Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc. • 開発環境で発⽣している warning log、error log 対応 • テストをパスするようにする • Storybook を Vue 3 対応する（ついでに vite 化） • eslint ルールを改修 • モノレポの他の Nuxt にも同じ対応を適応

Slide 35

Slide 35 text

まとめ Vue 2 / Nuxt 2 → Vue 3 / Nuxt 3 Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc. • 🐢 部分的に徐々に進める • 医師専⽤コミュニティサイト MedPeer • 薬剤師のコミュニティサイトヤクメド • 🐜 migration ブランチを⽤意して開発と並⾏して進める • 特定保健指導の効率化⽀援サービス Tonoel • 💪 気合で⼀気に進める • 医療機関起点の薬局予約サービスやくばと