jQueryは順番が大事ということを学んだ話。

はじめに

昨日完成出来なかったミニアプリ、出来なかったのは自分だけなのでめちゃくちゃ悔しい！

せめてお手本の通りにでも完成させたい！

当初の予定通りform_withとhamlを使って書くぞい！

で、詰まったところと解決方法を書きたいと思います。

MaterializeCSSのFormが動かない

実装したかった機能　

MaterializeCSSのFormに入力した際にlabelが上にスライドする。

発表会で他の方が実装してるの見て、オシャレじゃん？真似したろ！と思ったけど実装してみると

レイアウトが崩れて上にスライドしてくれない問題が発生

jQueryがどうやら働いてないっぽい。

でもなんで？ってtwitterで呟いてたらEXPERT卒業生のしょうみゆさんからこんなアドバイスを頂きました。

そういう時はうまく読み込まれてないことが多そうですね🤔
デベロッパーツールでエラーになってませんか？？

— しょうみゆ@Webデザイナー＆フロントエンド (@MykiiTech) 2019年3月30日

 なるほど！！！！！

デベロッパーツールで確認すると

Uncaught ReferenceError: $ is not defined　at materialize.min.js:6というエラーを吐いて たことを確認。

エラー文をググると、jQueryの要素を使うjsファイルが先に来てしまっているのでエラーを吐いている　従って、jQueryを最初に読ませるように、つまり一番上にjqueryを読むよう書けばOK

参考サイト http://siganaitohoho.hatenablog.jp/entry/2014/07/02/000330

とのことなのでjQueryのCDNを一番上に持ってくると・・・

動いた！

カリキュラムの流れ的にMaterializeのCDNをコピペした次にjQueryのCDNをコピペするから、なんも考えないとjQueryの記述が後になっちゃったんですね。

明日書く予定のもう一つの詰まりポイントもそうなんですけど、デベロッパーツールを確認することは本当に大事なんだなぁ、と実感しました。

しょうみゆさん、本当にありがとうございました。