なるべくやさしくJavaScript -2.動かない＋エラーが出ないときの解決策まとめ

はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。

JavaScriptがうまく動かない上にエラーも出ていないという事態は、誰もが一度は通る道ではないでしょうか。

エラーが出ていればそこから原因の解決を図ることができますが、そうでない場合にお手上げとなってしまわないように参考にしていただけたらと思います。

今回はそんなときに役立つ解決策をなるべくわかりやすく、なるべく丁寧に解説していきます。

（この記事はすでにHTML・CSSの知識があって、そこにJavaScriptを加えたいなという方向けのものです。）

なにが起こっているか

そもそもJavaScriptを読み込んでいるか？

一番に確認するべきは自分が記述したJavaScriptが読み込まれているかどうかです。パスの指定が間違っていないか、また、ファイル名や記述の中にタイプミス・スペルミスがないかよく確認してみましょう。

ここが確認できたら、次はJavaScriptをどこで読み込んでいるかを確認してみましょう。JavaScriptそのものを読み込むタイミングと、JavaScript内で使用している要素を読み込むタイミングと、JavaScriptを使ってアクションを起こすタイミングの順番を整理してみましょう。

実は動いてはいるのかも？

JavaScriptの読み込みが無事にできているらしいということが確認できたら、【console.log();】や【alert();】を使って、どこまでは思うように動いているのかを確認してみましょう。個人的にはコンソールパネルでエラーも一緒に確認できるので【console.log();】がおすすめです。

JavaScriptが思うように動かない！というときには何が起こっているのかを把握することが何よりも大事です。困ったときにはひとまず【console.log(“check!”);】を自分のコードのいたるところに入れてみましょう。

また、変数の中身が自分の意図したものになっているかを確認することもできます。変数の中身を確認することで、どういった動きが発生しているのかを知ることもできます。

関数を呼び出しているか？発火のタイミングは？

自分が意図したアクションを起こすには関数の呼び出しが必須です。

関数の宣言だけして呼び出しを行っていないということはありませんか？また、その呼び出しのタイミングをもう一度確認してみましょう。JavaScript内で使いたいHTML要素の読み込みよりも前に発火してしまっていませんか？

もちろんタイプミス・スペルミスも厳密にチェックしましょう。

関数を呼び出す際に引数が必要な場合もあります。その関数の扱い方を再度確認してみましょう。さらに、その引数に設定している変数が自分の意図するものであるかも見てみましょう。

おわりに

JavaScriptが思うように動かない、発火しないときには以上のようなことを確認してみましょう。エラー・トラブルの原因は意外とシンプルなミスだったということが多々あります。このようなエラーに慣れるということも自分のスキルアップにはとても大切なことです。

繰り返しになりますが、困ったときにはまず「console.log」や「alert」を使って中でなにが起こっているかを書き出してみましょう。どれだけ経験を積んでも、これだけで解決できるエラーに出会うことは山ほどあると思います。

勉強中の方、JavaScript駆け出しの方の参考にしていただけたら幸いです。