本日のプログラミング学習
JavaScript & jQuery / 2hour
Aug / 29.5hour
Total / 54.5hour
通勤で読んでいる書籍 30minitues
JavaScriptとjQueryのエラーとの格闘記録
JavaScriptとjQueryの復習で、自分が記述したコードがどうしてもうまくいかない。
そんな時の対処方法。主にChormeの開発者ツールを使ってます。
問題点
名前を入力するバリデーションチェックで、20文字以上の場合は「20文字以内です」というエラーメッセージを表示させたい。
でも、名前の欄に20文字以上入力してもメッセージが出ず、と言う状態。↓
（他の欄はOK）
その1 TypeErrorくん
比較的わかりやすいエラー。開発者ツールの「Console」画面を見ると誤っている箇所も指摘してくれる。
訳：13行目のコードで「addfClass」って関数呼び出してるけど、そんな関数ないで。
これが見つかった時は、
「よっしゃ、これでタイプミス無くしたからきちんと動作するやろ！」と思い、再度20文字以上入力したが・・・メッセージ出ず。
その２ thisくん
うーん・・・ここで非常に困ったのは「Console」を開いても一切エラーが検出出来なかったこと。
手がかりもなく、またエラーを特定する方法も検討がつかなかったため思案すること5分。
「名前の部分はバリデーションチェックが機能していないけど、メールの方は機能してるから、両者の挙動を観察すれば解決策が見えてくるのでは？」との仮説の基、検証開始。
まず、メールでのバリデーションチェックの挙動はこちら。
emailのバリデーションチェックは、「emailの形式ではない時」or「空欄の時」に上記のような「has-error」のクラスがjQueryによって「form-group」と言う親のクラスに挿入される。それと同時にfindメソッドを用いて「.help-block」の要素を取得してtextメソッドでエラーメッセージを表示する、と言う一連の流れになっている。
でも名前の入力フォームでは、この一連の流れが確立されていない。
と言うことは、そもそも親要素である「form-group」のDOMを取得できていないのではないか？
と推測。そのため、名前の入力フォームのコードをもう一度つぶさに見てみると・・・
うーん・・・・・どこにも記述ミスは無いような・・・・ん！！？
$(‘this’)だけはやったらあかんて、教わったなあ！？
ということで、thisについている「”」この子達をとりました。
結果・・・・
無事にできました！！
今回のエラーで学んだことは、エラー原因がコンソールやログでわかるのは話しが早い。
一番問題なのはエラーの原因が不明なのに、エラーになること。
そして大事なのは、仮説を持って検証すること。
これは今後コードが複雑になればなるほど重要なことだと感じました。
これからもエラーと戦っていくだろうけど、今日の学びを忘れずに行こうとおもいます。
学習は全てウェブカツ！！というプログラミングスクールで学んでいます。
大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール[…]