🦒 動かなかったとき、コードをどう見直すか(タイプミス発見の道)
作成日: 2021/12/21
1

教材を見ながら書き写していてうまく動かなかったとき

タイプミスとか、かっこの閉じ範囲が違うとか、書く場所を間違えるとか。。。
間違えるパターンをなんとなくリストして、自分のコードのどのあたりをどう疑って見直すかを整理する。

追加する行の場所を間違える:

draggableがdraggableできず、ソースを見直しているつもりだったが、すぐ気づけなかった。
scriptのcomponentsに追加しないといけないのに、見間違って、computedに追加していた。
実装の意味をわかっていればすぐわかりそうなものを(泣)でも、あるあるです。

タイプミスその3:

CodePenで、マスタッシュ構文の行が表示されない。。。

たぶん、devTools見れば気づけたんだけど
scriptの中でなんと data が dat'e' に・・・。
ちなみに逆もよくやる。

タイプミスその2:

co'n'puted (ただしくはcomputed)

そのとき、chrome dev toolsでも、ちゃんとエラーが出ていた

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "classList" is not defined on the instance but referenced during render.

これがヒントになって気づけた😢😂😊

タイプミスその1:

タイプミスでアロー関数内の変数名がco'o'untになっており、未定義だったと思うのだが
エラーメッセージが

Failed to compile with 1 error

しかも場所を教えてくれない( @ ./src/main.js 7:0-28 11:9-14 としか)
ショック


コーダーです。Vue.jsの学習のために、このアプリを使い始めました。ウェブページのコーディング、CSS設計、リッチなUIの実装(jQuery,Vue.js)も勉強しなければ。