DAY 18 js & jQuery

DAY 18 JavaScript & jQuery 二周目 【ウェブカツ 】

本日のプログラミング学習

JavaScript & jQuery / 2hour

Aug / 29.5hour

Total / 54.5hour

 

通勤で読んでいる書籍 30minitues

 

JavaScriptとjQueryのエラーとの格闘記録

JavaScriptとjQueryの復習で、自分が記述したコードがどうしてもうまくいかない。

そんな時の対処方法。主にChormeの開発者ツールを使ってます。

問題点

名前を入力するバリデーションチェックで、20文字以上の場合は「20文字以内です」というエラーメッセージを表示させたい。

でも、名前の欄に20文字以上入力してもメッセージが出ず、と言う状態。↓

(他の欄はOK)

バリデーションチェックエラー

 

 

その1  TypeErrorくん

比較的わかりやすいエラー。開発者ツールの「Console」画面を見ると誤っている箇所も指摘してくれる。

js&jQuery_error_1

 

訳:13行目のコードで「addfClass」って関数呼び出してるけど、そんな関数ないで。

 

js&jQuery_error_2

 

これが見つかった時は、

「よっしゃ、これでタイプミス無くしたからきちんと動作するやろ!」と思い、再度20文字以上入力したが・・・メッセージ出ず。

 

その2 thisくん

うーん・・・ここで非常に困ったのは「Console」を開いても一切エラーが検出出来なかったこと。

手がかりもなく、またエラーを特定する方法も検討がつかなかったため思案すること5分。

「名前の部分はバリデーションチェックが機能していないけど、メールの方は機能してるから、両者の挙動を観察すれば解決策が見えてくるのでは?」との仮説の基、検証開始。

 

まず、メールでのバリデーションチェックの挙動はこちら。

 

emailのバリデーションチェックは、「emailの形式ではない時」or「空欄の時」に上記のような「has-error」のクラスがjQueryによって「form-group」と言う親のクラスに挿入される。それと同時にfindメソッドを用いて「.help-block」の要素を取得してtextメソッドでエラーメッセージを表示する、と言う一連の流れになっている。

 

でも名前の入力フォームでは、この一連の流れが確立されていない。

と言うことは、そもそも親要素である「form-group」のDOMを取得できていないのではないか?

と推測。そのため、名前の入力フォームのコードをもう一度つぶさに見てみると・・・

 

this_error1

 

うーん・・・・・どこにも記述ミスは無いような・・・・ん!!?

 

this_error2

 

$(‘this’)だけはやったらあかんて、教わったなあ!?

 

ということで、thisについている「”」この子達をとりました。

結果・・・・

 

無事にできました!!

 

今回のエラーで学んだことは、エラー原因がコンソールやログでわかるのは話しが早い。

一番問題なのはエラーの原因が不明なのに、エラーになること。

そして大事なのは、仮説を持って検証すること。

 

これは今後コードが複雑になればなるほど重要なことだと感じました。

これからもエラーと戦っていくだろうけど、今日の学びを忘れずに行こうとおもいます。

 

 

学習は全てウェブカツ!!というプログラミングスクールで学んでいます。

プログラミングスクール「ウェブカツ!!」

大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール[…]

DAY 18 js & jQuery
最新情報をチェックしよう!

Java Scriptの最新記事8件