jQueryを勉強したての頃、よくjQueryのエラーに苦しめられました。読み込まれているかどうかって不安ですよね。自分が昔そうだったので、困ってる人いるんじゃないかと思って書きます。自分がJSのプログラムを導入するにあたってやっている事を書いてみようかなと思います。 意識する点は、読み込みの順番と、ファイルの確認です。

jQueryが読み込まれない問題で良くあるケース

私が一番良く見かけるものは、jQueryが読み込まれる前にjQuery関連の機能を利用しようとするケースをよく見かけます。jQueryが読み込まれた後でないと、jQueryを利用することができません。 このケースでは、下記のようなエラーがでます。

Uncaught ReferenceError: jQuery is not defined

jQueryで未定義の関数を利用しようとしたというエラー

これはjQueryに限らず、関数の未定義で発生するエラーになります。どんなエラーメッセージかというと、下記のようなエラーになります。

Uncaught ReferenceError: hoge is not defined at :1:1

これにはいくつかの原因があるので、その原因を下記に示したいと思います。

jQueryで気を付けるということというか、プログラミングする際に気を付けることがが上記3項目になります。

jQueryの関数名を間違える可能性

自分が初学者の時は「俺は絶対に間違えないぜ。」と思っていましたが、今では何かエラーがあると真っ先に記述間違いを疑います。そのくらい打ち間違いは頻度の高いので、トラブルシュートの中で優秀な部類に入ると思います。これを「typo（タイポ）」と言い、未然に防ぐためには、しっかり確認するか、IDE（統合開発環境）を利用するという手が考えられます。統合開発環境とは、これ一本でプロジェクトができるといったツールになります。例えば、コーディング、ファイル転送、DB操作、テストの作業に対して、バラバラのツールを利用している人もいると思いますが、これらを1個のツールで全てできるようにするのが統合開発環境です。

必要なファイルが読み込まれていない

test.jsとtest1.jsという2種類のファイルがあるとします。test.jsからtest1.jsの関数を利用する場合、jQueryの読み込みエラーでも記述しましたが、test1.jsから読み込む必要があります。なぜなら、test1.jsの関数をtest.jsから利用する際に、参照する関数が無いからです。

バージョンが違うプログラムが読み込まれている可能性

これは本人が意図しない場合が往々にあります。例えば、自作していないテンプレートやWordPressで言えばテーマを利用してWebサイトを作成した際に起こりがちなのですが、テンプレートなり、テーマなりで予めjQueryが読み込まれているのに気が付かずに、自分のjQueryを読み込んでしまう場合です。これが発生すると、jQueryを2つ読み込むことになります。処理速度的にもよくないですし、定義されていない関数を利用してしまう可能性が上がるので、これも確認した方が良い項目になります。

[getpost id=”2318″]

余談になりますが、これが発生する原因として、javascriptを、Webサイトの末尾で読み込む派と先頭で読み込む派が居ます。これについて、お互いのメリットを挙げていきます。

作業者の趣向性を理解すれば、自分がテンプレート、テーマを利用している際に、jQueryが動かない際に、何処をどんな意図でチェックすれば良いかが分かります。

とはいえ、作業者の趣向性を想定するには、慣れが必要だったりするので、書籍等で勉強してみてはいかがでしょうか。jQueryであれば、MDN社の出している本が、図がいっぱい載ってて分かりやすいです。

>> jQueryデザインブック　仕事で絶対に使うプロのテクニック

読んでる記事が古い

jQueryやライブラリなどは、記事が古いと古いバージョンで有効だった関数を利用している場合があります。公開されているプログラムはセキュリティ保護の為、後方互換を考えられずやむなく機能の改修を行ったりすることが、割と普通にあります。なので、無償のプログラムをプロジェクトに利用していて、インターネットの記事を参考に実装を行う場合、その記事がいつ書かれた物なのかにも注力するのが良いと思われます。

一般的かは分かりませんが、choromeデベロッパツールのコンソールを利用して、jQuery呼び出してみるテストをしてます。画像の様にアラートが表示されたらOKなのではないでしょうか。