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

Vue Fes Japan 2023
Special Lunch Session

Transcript

1. 20
   2 3
   /
   10
   /
   2
   8
   (Sat)                                            ⼩林和弘
   Vue
   2
   の EOL まで 2 ヶ⽉ですが、
   
   
   進捗どうですか？
   Vue Fes Japan
   20
   23
   
   Special Lunch Session
   
   Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
   

   View Slide

2. ⾃⼰紹介
   Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
   
   

   View Slide

3. メドピアグループの紹介
   
   Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
   

   View Slide

4. Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
   
   

   View Slide

5. Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
   
   

   View Slide

6. Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
   
   

   View Slide

7. 開発を⽀援する取り組み
   輪読会
   Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
   • Vue
   3
   migration guide
   
   
   • TypeScript Handbook
   
   
   • JS Primer
   
   
   • React 公式ドキュメント
   
   

   View Slide

8. 開発を⽀援する取り組み
   モブプロ
   • playwright を利⽤した VRT
   
   
   • Next.js プロジェクトの技術選定
   
   
   • 既存プロジェクトへの bun の適応
   Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
   
   • webpack → rspack の移⾏
   
   
   • eslint のカスタムルール作成
   
   
   • vite_rails の適応
   

   View Slide

9. 開発を⽀援する取り組み
   スポンサー
   • Vue Fes Japan
   2 023
   ゴールドスポンサー
   
   
   • Vue Fes Japan
   2 022
   プラチナスポンサー
   
   
   • Vue Fes Japan
   2 019
   プラチナスポンサー
   Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
   
   

   View Slide

10. 詳細を知りたい⽅は、カジュアル⾯談へ
    
    会社紹介はここまで
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    

    View Slide

11. Vue
    2
    の EOL まで 2 ヶ⽉ですが、進捗どうですか？
    
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    

    View Slide

12. 
    

    View Slide

13. 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.
    
    

    View Slide

14. Vue
    2
    を使い続けてもいいの？
    Stay on Vue
    2
    • 最新版の Vue
    2
    .
    7
    系であれば技術的には（ある程度）問題ない
    
    
    • script setup
    
    
    • Composition API
    
    
    • セキュリティパッチ更新がない
    
    
    • 社会的な規制、会社のポリシーに抵触するかも
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    

    View Slide

15. Vue
    3
    へアップデートしましょう
    メドピアのほとんどのサービスが Vue
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    

    View Slide

16. Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    

    View Slide

17. 医師専⽤コミュニティサイト MedPeer
    medpeer.jp
    • Rails View 上に Vue を乗せる MPA 構成
    
    
    • vue-router や vuex は未使⽤
    
    
    • vue ファイルの数: 393（2023-10-13 現在）
    
    
    • Vue
    2
    .
    7
    へはアップデート済
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    

    View Slide

18. 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.
    
    

    View Slide

19. eslint の Vue
    3
    エラーを解消
    医師専⽤コミュニティサイト MedPeer
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    

    View Slide

20. eslint のカスタムルールで Vue
    2
    記述を排除
    医師専⽤コミュニティサイト MedPeer
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    

    View Slide

21. Vue
    3
    の createApp の Wrapper を作成
    医師専⽤コミュニティサイト MedPeer
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    

    View Slide

22. Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    

    View Slide

23. 薬剤師のコミュニティサイト ヤクメド
    yakumed.jp
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    • Rails View 上に Vue を乗せる MPA 構成
    
    
    • vuex は未使⽤
    
    
    • vue ファイルの数: 268（2023-09-06 現在）
    
    
    • Vue
    2
    .
    6
    系と Vue
    3
    系を利⽤（2023-09-06 現在）
    

    View Slide

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

    View Slide

25. エントリーポイント単位で Vue
    3
    対応
    薬剤師のコミュニティサイト ヤクメド
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    

    View Slide

26. Vue
    3
    のテストはモノレポで vitest 環境を構築
    薬剤師のコミュニティサイト ヤクメド
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    

    View Slide

27. 
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    

    View Slide

28. 特定保健指導の効率化⽀援サービス 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 現在）
    

    View Slide

29. Vuex
    3
    を Pinia 化
    特定保健指導の効率化⽀援サービス Tonoel
    Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    • Nuxt
    2
    系の状態管理ライブラリは Vuex
    3
    
    • Vuex
    3
    は Vue
    3
    に⾮対応 🤔
    
    
    • 状態管理ライブラリを Pinia🍍に置き換え
    

    View Slide

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

    View Slide

31. Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    

    View Slide

32. 医療機関起点の薬局予約サービス やくばと
    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 済
    

    View Slide

33. とりあえず 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
    
    
    • ユニットテストがコケるのも気にしない
    

    View Slide

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

    View Slide

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

    View Slide

36. Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
    
    ご清聴ありがとうございました
    https://medpeer.co.jp/recruit/
    https://tech.medpeer.co.jp/
    採⽤情報
    メドピア開発者ブログ
    

    View Slide

37. 
    

    View Slide

38. 
    

    View Slide