[Draft] Feat/vue3+webpack5

[mcdmaster]

👏 解決する issue / Resolved Issues

• close Vue@3.0.0 対応 #5463

📝 関連する issue / Related Issues

#6048

⛏ 変更内容 / Details of Changes

• Vue@3.x に対応した、アプリの修正
• Webpack@5 に対応した、アプリの修正

📸 スクリーンショット / Screenshots

(Now printing...)

上記に関する他のケースとしては、下記のあたりをご参考にすると良いでしょう。
https://techblog.zozo.com/entry/vue-options-api-to-composition-api

このページにも書いてある、Vue@3+Webpack@5 移行を阻むショーストッパーとして最も大きなものは、Vuetify が未だ Vue@3 非対応という点に尽きます。
私は、よほど Vuetify に PR を出してやろうかとさえ考えています。
特に、Vuetify コンポーネントの中でもけっこう使用頻度の高い <v-icon></v-icon> がらみのところが対象に含まれるため、影響範囲は大きいです。

そうした想定アプローチも含め、こんごは拙速にならないよう進めて参ります

[mcdmaster]

いまだにドラフトです。下手に触ると、本当に火傷しますよ！(笑)

この PR は、今後その役目を終えるであろう webpack@4 + vue@2 から同 5 and 3 にアップグレードする際の、以下の活動を支えるのが目的です、と、勝手に定めました。
別ブランチを切った方が良いという際は、アドバイスをお願いいたします。

• アップグレードにありがちな各種制約事項、あるいはリスクの見極め
• 必要な追加モジュール、あるいは逆に不必要となるモジュールの特定
• 上述の活動からの初版プロトタイプ作成、およびテスト（ユニットレベル）
• テスト中に実施される関連モジュール（Vue-i18n, Vuetify, Nuxt etc. ）のアップグレードやバグ対応のフォローアップ（デプロイ込み）
• 上述関連モジュールのコミュニティへの参加を通じた情報収集と反映
• レビュー履歴管理
• その他、全体を通じた雑用（焼きそばパンの購入、勝馬投票券の購入など）

現在は、上記一覧の真ん中あたりといったところでしょうか。
特に Vuetify は、今のままではまるで動きません。悲しいくらいに動きません。
いちおう Vuetify 3 - Titan というプロジェクトが走っているようなのですけど、どこから素材を取ってくればいいのかさえよくわかりません。
さらに、vue-router なども思いっきり制約を受けてしまっています。

じゃあ、私のところではどうやって動かしているか？
理屈は簡単ですけど、オレオレ版レトロフィットバージョンを作って動かしています。
その実、たいへんな作業です…。

ですので、主に Vue3 アップグレードを想定した場合に、この手順は Vue2/3 を問わずシステムの可用性や維持管理のスムース化に役立ちそうだな、と思ったものは、この活動からの「気づき」として小ぶりな PR を随時上げていこうと考えています。
じっさいに、この PR の成果として既に申請され受理、マージされた PR もあります。
そうこうしているうちに、あら不思議！あとは Vue だけ乗せ換えればアップグレード完了じゃん！というところまで持っていくのを目標としたいですね

[kaizumaki]

Lock file maintenance #6284 でwebpack@5が入ったみたいなんですけど、どうなんでしょうね...？CIは問題なく通ってますし。
https://github.com/tokyo-metropolitan-gov/covid19/pull/6284/files#diff-51e4f558fae534656963876761c95b83b6ef5da5103c4adef6768219ed76c2deR12007-R12035

[mcdmaster]

おお！そうだったんですね。

じゃあ、Chart.js@3 や Nuxt.js@3 が入るといいなあと…。
ちょっと、再始動してみましょう

[kaizumaki]

@mcdmaster いつもありがとうございます！本日をもって対策サイトを閉鎖し、このリポジトリはアーカイブすることとなりました。それに伴って、こちらのPRをクローズとさせてください 🙇
vue3の移行は私たちの力及ばずでした... 😅
ともあれ、フォローいただき感謝です！