Vue Fes Japan 2023 Special Lunch Session
202 3/10/28(Sat) ⼩林和弘Vue2の EOL まで 2 ヶ⽉ですが、進捗どうですか?Vue Fes Japan2023 Special Lunch SessionCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
View Slide
⾃⼰紹介Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
メドピアグループの紹介Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
開発を⽀援する取り組み輪読会Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.• Vue3migration guide• TypeScript Handbook• JS Primer• React 公式ドキュメント
開発を⽀援する取り組みモブプロ• playwright を利⽤した VRT• Next.js プロジェクトの技術選定• 既存プロジェクトへの bun の適応Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.• webpack → rspack の移⾏• eslint のカスタムルール作成• vite_rails の適応
開発を⽀援する取り組みスポンサー• Vue Fes Japan2 023ゴールドスポンサー• Vue Fes Japan2 022プラチナスポンサー• Vue Fes Japan2 019プラチナスポンサーCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
詳細を知りたい⽅は、カジュアル⾯談へ会社紹介はここまでCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
Vue2の EOL まで 2 ヶ⽉ですが、進捗どうですか?Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
Vue2の EOL は 2023/12/31End of Life を過ぎると…• 2024 年からは Vue2のアップデートが⾏われません• npm や CDN からの配信は引き続き⾏われます• 逃げ道として…• HeroDevs で Vue2の有償サポートが提供されていますCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
Vue2を使い続けてもいいの?Stay on Vue2• 最新版の Vue2.7系であれば技術的には(ある程度)問題ない• script setup• Composition API• セキュリティパッチ更新がない• 社会的な規制、会社のポリシーに抵触するかもCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
Vue3へアップデートしましょうメドピアのほとんどのサービスが VueCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
医師専⽤コミュニティサイト MedPeermedpeer.jp• Rails View 上に Vue を乗せる MPA 構成• vue-router や vuex は未使⽤• vue ファイルの数: 393(2023-10-13 現在)• Vue2.7へはアップデート済Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
eslint の Vue3エラーを解消医師専⽤コミュニティサイト MedPeer• eslint で Vue3のルールでエラーになったファイルを徐々に migrate• plugin:vue/vue3-recommended の Vue3ルールを有効化• エラーが発⽣したファイルのルールをオフにする TODO ファイルを作成• TODO 対象のファイルを Vue3の記述に migrate して TODO から削除Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
eslint の Vue3エラーを解消医師専⽤コミュニティサイト MedPeerCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
eslint のカスタムルールで Vue2記述を排除医師専⽤コミュニティサイト MedPeerCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
Vue3の createApp の Wrapper を作成医師専⽤コミュニティサイト MedPeerCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
薬剤師のコミュニティサイト ヤクメドyakumed.jpCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.• Rails View 上に Vue を乗せる MPA 構成• vuex は未使⽤• vue ファイルの数: 268(2023-09-06 現在)• Vue2.6系と Vue3系を利⽤(2023-09-06 現在)
Vue2と Vue3を共存させて徐々に migration薬剤師のコミュニティサイト ヤクメドCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.• package.json のエイリアスで Vue3を個別にインストール• Rails View に紐づくエントリーポイント毎に Vue3対応を進める• Vue3のテストはモノレポ環境に vitest を導⼊
エントリーポイント単位で Vue3対応薬剤師のコミュニティサイト ヤクメドCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
Vue3のテストはモノレポで vitest 環境を構築薬剤師のコミュニティサイト ヤクメドCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
特定保健指導の効率化⽀援サービス Tonoeltonoel-mgr.fitsplus.jpCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.• Rails を API として使⽤した Nuxt の SPA構成• ひとつのリポジトリで 2 つの Nuxt を管理するモノレポ• 初期構築時は Vuex3を利⽤• 初期構築時から Composition API を利⽤• vue ファイルの数: 163(2023-09-06 現在)• Nuxt2.17系を利⽤(2023-09-06 現在)
Vuex3を Pinia 化特定保健指導の効率化⽀援サービス TonoelCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.• Nuxt2系の状態管理ライブラリは Vuex3 • Vuex3は Vue3に⾮対応 🤔• 状態管理ライブラリを Pinia🍍に置き換え
Nuxt3の migration ブランチ特定保健指導の効率化⽀援サービス TonoelCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.• Nuxt3⽤の migration ブランチを作成• Nuxt3の migration ガイドに沿って破壊的変更に対応• https://nuxt.com/docs/migration/overview• テストケースで⾒つかった細かい考慮漏れを対応
医療機関起点の薬局予約サービス やくばとyakubato.jpCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.• Rails を API として使⽤した Nuxt の SPA 構成• ひとつのリポジトリで 2 つの Nuxt を管理するモノレポ• 初期構築時から Pinia🍍を利⽤• 初期構築時から Composition API を利⽤• vue ファイルの数: 157(2023-09-06 現在)• Nuxt3に migration 済
とりあえず Nuxt3環境をつくる医療機関起点の薬局予約サービス やくばとCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.• モノレポ内の 1 つの Nuxt のトップページの表⽰担保のみ対応• 公式の migration ガイドの通りに設定‧コードを書き換える• Nuxt3⾮対応の modules は⾃前で書き直す• @nuxtjs/axios → axios を⾃前で組み込み• @nuxtjs/gtm → @gtm-support/vue-gtm• ユニットテストがコケるのも気にしない
壊れているところを⼿分けして直す医療機関起点の薬局予約サービス やくばとCopyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.• 開発環境で発⽣している warning log、error log 対応• テストをパスするようにする• Storybook を Vue3対応する(ついでに vite 化)• eslint ルールを改修• モノレポの他の Nuxt にも同じ対応を適応
まとめVue2/ Nuxt2→ Vue3/ Nuxt3Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.• 🐢 部分的に徐々に進める• 医師専⽤コミュニティサイト MedPeer• 薬剤師のコミュニティサイト ヤクメド• 🐜 migration ブランチを⽤意して開発と並⾏して進める• 特定保健指導の効率化⽀援サービス Tonoel• 💪 気合で⼀気に進める• 医療機関起点の薬局予約サービス やくばと
Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.ご清聴ありがとうございましたhttps://medpeer.co.jp/recruit/https://tech.medpeer.co.jp/採⽤情報メドピア開発者ブログ