vue.jsのmixinは厄介 ライブラリのデバッグ方法
ちょっと調べてわからんときは、すかさずプログラムの全文検索。
熟知しているプログラムだと結構上記を先に実施して確認するんですが、はじめたばかりのフレームワークとかだと、なにか自分の設定とか使い方が間違ってるんだろーなと思いこんで、googleを巡回すること小一時間。
vue.jsでvuedraggableというドラッグアンドドロップするための結構標準的なモジュールをインストールして使っていたのですが、なぜかconsoleのワーニングが発生。
[Vue warn]: Method "move" has already been defined as a prop.
しかも、ドラッグすると真っ白な画面に遷移してしまう。modal上で実施しているからその兼ね合いなのか？？
ひとまずwarningを解消しないと行けないようなと、wanring内容をググってもまったくヒットしない。
moveなんて設定していないし。。。
ぼーーっとウェブ巡回していると
別のプロティだよなーーと思いつつ流し読みしている。。。mixin!!??
まさか、、、自分もとようやくソースの全文検索をしたところ、、、バッチリ同じ状況でした。
かなり最初に共通メソッド実装したの完全に忘れていましたね。。
ちなみにmixinはモジュールとかに共通のメソッドとかプロパティを設定する仕組みですが全モジュールで共通なので完全にノーマークでした。そのmixinで設定した自作共通関数にmoveがあって、それが競合していたって本当に単純な落ちでした。。
と言う訳で、、、一応ライブラリ内部で出たエラー等のデバッグ方法をまとめると。
- エラー文言でググる！（行数とか共通でない内容は省いて1行くらいを抜粋して）
- 数分で該当ページみつからなければ、一旦自分が書いたソース部分で全文検索！
- ここで解決しないときは覚悟を決めて、シンプルな機能のみにしてどれが悪さしているか原因追求！
- APIとうで適合バージョンが確認
- ここでわからなければ、、、お手上げ。。。ではなくて、ライブラリ内でデバッグ！！ただ、ここまで行くんだったら別ライブラリもしくは自分で実装した方がよさげ。
なんか書いていると、いきなりググるとか全文検索とかってプログラマー的にどうなんだろう。。。と思ったりもするんですが、、まあ最短で解決する方法ですね。
勉強という意味ならやっぱり3番目を先に悪影響する部分を突き止めるのが先だとは思うんですがね。
Google様様ですね。
