Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue 2 の EOL まで 2 ヶ月ですが進捗どうですか?
Search
Kobayashi Kazuhiro
October 28, 2023
Programming
1
10k
Vue 2 の EOL まで 2 ヶ月ですが進捗どうですか?
Vue Fes Japan 2023
Special Lunch Session
Kobayashi Kazuhiro
October 28, 2023
Tweet
Share
More Decks by Kobayashi Kazuhiro
See All by Kobayashi Kazuhiro
OpenAPI と型 | Mita.ts #1
kzhrk
0
70
メドピアのサービスにおけるテスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜
kzhrk
0
27
Other Decks in Programming
See All in Programming
Uncharted packages (Laravel Live Denmark)
freekmurze
0
140
Swiftコードバトル必勝法
toshi0383
0
140
労務ドメインを快適に開発する方法 / How to Comfortably Develop in the Labor Domain
yuki21
1
240
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.5k
最高の構文木の設計 2024年版
yui_knk
7
2.4k
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
240
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
200
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
nrslib
7
5k
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
120
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
2
220
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
560
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Six Lessons from altMBA
skipperchong
26
3.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Speed Design
sergeychernyshev
18
400
Being A Developer After 40
akosma
82
580k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
47k
A Tale of Four Properties
chriscoyier
155
22k
Side Projects
sachag
451
42k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
18k
Code Review Best Practice
trishagee
62
16k
Transcript
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.
⾃⼰紹介 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.
Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
開発を⽀援する取り組み 輪読会 Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc. •
Vue 3 migration 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 Japan 2 023 ゴールドスポンサー •
Vue Fes Japan 2 022 プラチナスポンサー • Vue Fes Japan 2 019 プラチナスポンサー Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
詳細を知りたい⽅は、カジュアル⾯談へ 会社紹介はここまで Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
Vue 2 の EOL まで 2 ヶ⽉ですが、進捗どうですか? Copyright(C) 2023
ALL RIGHTS RESERVED, MedPeer, Inc.
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.
Vue 2 を使い続けてもいいの? Stay on Vue 2 • 最新版の Vue
2 . 7 系であれば技術的には(ある程度)問題ない • script setup • Composition API • セキュリティパッチ更新がない • 社会的な規制、会社のポリシーに抵触するかも Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
Vue 3 へアップデートしましょう メドピアのほとんどのサービスが Vue Copyright(C) 2023 ALL RIGHTS RESERVED,
MedPeer, Inc.
Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
医師専⽤コミュニティサイト 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.
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.
eslint の Vue 3 エラーを解消 医師専⽤コミュニティサイト MedPeer Copyright(C) 2023 ALL
RIGHTS RESERVED, MedPeer, Inc.
eslint のカスタムルールで Vue 2 記述を排除 医師専⽤コミュニティサイト MedPeer Copyright(C) 2023 ALL
RIGHTS RESERVED, MedPeer, Inc.
Vue 3 の createApp の Wrapper を作成 医師専⽤コミュニティサイト MedPeer Copyright(C)
2023 ALL RIGHTS RESERVED, MedPeer, Inc.
Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
薬剤師のコミュニティサイト ヤクメド 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 現在)
Vue 2 と Vue 3 を共存させて徐々に migration 薬剤師のコミュニティサイト ヤクメド Copyright(C)
2023 ALL RIGHTS RESERVED, MedPeer, Inc. • package.json のエイリアスで Vue 3 を個別にインストール • Rails View に紐づくエントリーポイント毎に Vue 3 対応を進める • Vue 3 のテストはモノレポ環境に vitest を導⼊
エントリーポイント単位で Vue 3 対応 薬剤師のコミュニティサイト ヤクメド Copyright(C) 2023 ALL RIGHTS
RESERVED, MedPeer, Inc.
Vue 3 のテストはモノレポで vitest 環境を構築 薬剤師のコミュニティサイト ヤクメド Copyright(C) 2023 ALL
RIGHTS RESERVED, MedPeer, Inc.
Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
特定保健指導の効率化⽀援サービス 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 現在)
Vuex 3 を Pinia 化 特定保健指導の効率化⽀援サービス Tonoel Copyright(C) 2023 ALL
RIGHTS RESERVED, MedPeer, Inc. • Nuxt 2 系の状態管理ライブラリは Vuex 3 • Vuex 3 は Vue 3 に⾮対応 🤔 • 状態管理ライブラリを Pinia🍍に置き換え
Nuxt 3 の migration ブランチ 特定保健指導の効率化⽀援サービス Tonoel Copyright(C) 2023 ALL
RIGHTS RESERVED, MedPeer, Inc. • Nuxt 3 ⽤の migration ブランチを作成 • Nuxt 3 の migration ガイドに沿って破壊的変更に対応 • https://nuxt.com/docs/migration/overview • テストケースで⾒つかった細かい考慮漏れを対応
Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
医療機関起点の薬局予約サービス やくばと 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 済
とりあえず 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 • ユニットテストがコケるのも気にしない
壊れているところを⼿分けして直す 医療機関起点の薬局予約サービス やくばと Copyright(C) 2023 ALL RIGHTS RESERVED, MedPeer, Inc.
• 開発環境で発⽣している warning log、error log 対応 • テストをパスするようにする • Storybook を Vue 3 対応する(ついでに vite 化) • eslint ルールを改修 • モノレポの他の Nuxt にも同じ対応を適応
まとめ Vue 2 / Nuxt 2 → Vue 3 /
Nuxt 3 Copyright(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/ 採⽤情報 メドピア開発者ブログ