【JavaScript】【jQuery】これってエラー？コードが動かない時にまず確認すべきこと3つ【随時更新】

あれ？jsファイルが全然反映されない。
参考書の見本通りに書いてるつもりなんだけど……
なんで？

プログラミングを勉強していると、こんなことありますよね？
私もちょうど昨日、問題にハマってしまい、解決するのに4時間かかりました。(-_-;)

でも、こうした経験のおかげで、コードが思うように動かない時に注目すべき視点をやしなっていくことができました。

今回は、JavaScript（特に、jQuery使用時）で問題にハマった時に、まず最初に確認すべき点3つを順に紹介していきます。

まだまだ勉強中の私なので、もちろんこれが全てではありませんが、
これから話す順番で一つ一つ確認していけば、エラー解決の糸口をつかめるかもしれません。

ぜひご参考下さい！

【結論】この順番で確認しよう

コードが動かない時にまず確認すること

まずは以上3つを、1から順番に確認していきましょう。必ず順番にですよ！

一生懸命あれこれとコードを変更したのに、結局「問題の原因はタイプミスでした～」ってなったら、時間と労力の無駄ですからね。（泣）

「widthが足りないのかな？」
「ここのdivは不要だったかな？」
「関数に問題があるのかな？」

こんなふうに試行錯誤する前に、まずは基本的なところで間違えていないかチェックしていきましょう。
下手にコードをいじくり回すと、余計に問題が複雑化してしまいます！

プログラミングの時に編集するファイルって、同じような名前を付けますよね。
“index”とか“script”とか。

一度に複数のファイルを開いている時なんかは、間違えて別プロジェクトの同名ファイルを見ていたということも十分ありえます。

「どんだけおっちょこちょいなんだよ！」
「そんなミスするわけないじゃん！」

こんなふうに思う方もいるかもしれませんが、一度自分を疑って、まずはファイルパスを確認することから始めましょう。

【スペルミス】たとえば…

【つけ忘れミス】たとえば…

【その他】たとえば…

※【例】は、あくまで例です！必ず自分のフォルダ階層やファイル拡張子を確認して対応してください。

正しくタイプしていたつもりでも、うっかりタイプミスをしていることがあります。
自動変換で違うクラスやid名を書いていたということもありえますよね。

一度書いたコードを見直すのは面倒な作業ですが、このようなミスをしていないか、落ち着いて確認してみましょう。

ファイルパスとタイプミスを確認してきましたが、これで解決しない場合は検証ツールを確認しましょう。

この時点で、「検証ツール」って何？と思う方がいるかもしれませんので、まずは検証ツールの開き方からお話していきます。

検証ツールが分かるという方は読み飛ばしてくださいね。

①　検証したいファイル(htmlがおすすめ)をブラウザで開く。
②　サイト画面上適当なところで【右クリック】+【検証】をクリック。（【F12】キーを押すだけでも表示できます）
③サイト右側に、コードが沢山書かれた枠が現れる。
　⇒この枠（↓画像赤枠）が【検証ツール】です！

「.jsファイル（今回は“script.js”）でjQuery関数を実行したいけれど、jQueryを参照できないよ！」という場合に現れるエラーです。

もっと分かりやすく言うと、
jQueryを読み込む前に、jQuery関数を呼んでいる時、このエラーメッセージが現れます。

だから、このエラーが出た時には、以下2点を確認しましょう。

jQueryを正しく読み込めているか？：パスは間違っていないか？、スペルミスは無いか？、拡張子まで入力しているか？
別のjsファイルよりも、jQueryが先に読み込まれているか？：コードは上の行から順に実行されていきます。だから、ライブラリを先に書かないと、別ファイルがライブラリを参照できず、関数が動きません。

①については分かると思いますが、②については具体的に想像しにくいかもしれませんので、以下、画像も交えて説明しますね。