他人がお作りになられたVueプロジェクトを保守管理することになった話１

この記事について

知り合いのツテからとあるVueで作成されたアプリの保守管理をすることになりました。
最近ReactだったりNextだったりをずっと触っていたので、まぁなんとかなるかと思い引き受けます。

さっそく
npm install
npm run serve
を実行してみるとまぁエラーの数々

長い旅になりそうなので、ここに議事録代わりに書き残していきたいと思います。
解決できたこと、解決できていないこと諸々書いていきますので、もし解決方法をご存じの方がおられましたら、そっと誘導していただけるとありがたいです。

フレームワーク/構成

今回、Vueでモバイルアプリを作成されたとのことで、
Ionic/Vue/Capacitorを使用していることをお聞きしております。
Vue以外は初見だったのでいろいろ調べました。

Ionic

Ionic Framework はオープンソースの UI ツールキットで、HTML、CSS、JavaScript などのウェブ技術を使って、 Angular, React, and Vue といった人気フレームワークと併用することで高性能で高品質なモバイルアプリやデスクトップアプリを作ることができます。
Ionic は、ウェブ開発者がすべての主要アプリストアとモバイルウェブ用のアプリを単一のコードベースから構築できるすばらしいモバイルアプリスタックです。また、 Adaptive Styling によって、Ionic アプリはすべてのデバイス上で適切な外観と操作感を提供します。

Capacitor

Capacitorはどんなウェブアプリでもネイティブアプリにすることができるので iOS、Android、ウェブを横断して同じコードで一つのアプリを 走らせることができます。

IonicがUIツール、Capacitorがその作ったアプリをネイティブアプリに変換するツールという事ですかね。
ドキュメントを見るとどちらもCLIをインストールする必要がありそうなので、一先ずインストールしてみます。

インストールからが戦いの始まり

一先ず開発環境用で

npm install -D @ionic/cli

実行すると、すぐにめちゃめちゃWARNがワンワン出てきます。
警告を見てるとcache-loaderなるものがwebpack4を求めているが、現在webpack5が入っているから出る警告がいっぱいあるみたい
調べを進めると、webpack5は独自のオプションでキャッシュを管理して高速化できるようになったらしく、cache-loaderの開発は2019年で止まっています。
つまり保守管理的にもcache-loaderは削除してwebpack5の方を利用するようにしなければならないでしょう。

ただ、多いので少し後回しにして、他のワーンを見てみます

npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.

とあります。
Please useがあるので、ここは従っておきましょう

npm install -D @babel/plugin-transform-class-properties

これを実行したら、WARNが先ほどのcache-loaderだけになりました。
一度ローカルで走らせてみます

 error 

No ESLint configuration found in D:\code\work\project\src.

ERROR in No ESLint configuration found in D:\code\work\project\src.

webpack compiled with 1 error

ふーん
おもしれぇやつ

エラーを読むにはESLint configurationがsrcディレクトリにないよってことらしい。

ESLint

ESlint(読み方：「イーエスリント」)は、JavaScriptやTypeScriptなどの静的解析ツールである。ESlintを導入することで、単純な構文エラーやプロジェクト固有のコーディング規約を定義することができる。厳密なルールを定義することで、複数人で開発する場合でもシステム全体のコードの一貫性を維持することができる。

コーディングルールを守らせるためのツールらしい

これで、今やるべきことは
・cache-loaderの削除
・Eslint configurationを配置する
でいいのかな？

ここの対応は次にします。

ここで、先ほどインストールしたIonic CLIを思い出しました。
IonicCLIにもserveコマンドがあるようなので一度試しにこれを実行してみます

ionic serve

おや？

ブラウザが勝手に起動して、動作しましたよ？
と思ったのも束の間

Compiled with problems:
ERROR
No ESLint configuration found in D:\code\work\project\src.

が再発
これは避けては通れないみたいです。

次回、ESLintの対応をしてみます。

小まとめ

エラーや警告がたくさんでるのは開発してるとよくあることですが、他の人が開発したコードでこれがでるとマジで焦ります。
とくに使ったことないフレームワークが取り入れられてると、いつもnpm run serveだけで生きている私には、ionic serveなんてものがある事すら知りませんでした。
一つ一つ丁寧に対応していくと、新しい事に触れるいい機会になります。
ほんといい勉強になりますね。

それでは、今回はこのあたりで。

ここまで読んでいただいてありがとうございます。