jQueryを勉強したての頃、よくjQueryのエラーに苦しめられました。読み込まれているかどうかって不安ですよね。自分が昔そうだったので、困ってる人いるんじゃないかと思って書きます。自分がJSのプログラムを導入するにあたってやっている事を書いてみようかなと思います。 意識する点は、読み込みの順番と、ファイルの確認です。
- jQueryが動かない問題を解消できる可能性がある点
- jQueryが動かない問題の原因を追究する手段が分かる点
- jQueryが動作する仕組みが分かる点
INDEX
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個のツールで全てできるようにするのが統合開発環境です。
-
Point.1
打ち間違い（Typo）はよくある
真っ先に疑い、該当箇所を確認しよう。
-
Point.2
打ち間違いを防ぐにはIDEを利用しよう
打ち間違いを防ぐには、確認をしっかりする以外にツールで防ぐという手段もある
-
Point.3
IDEとはワンストップで開発できるツール
ツールをバラバラに利用する必要がなく、1個のツールで全てを利用できる。
必要なファイルが読み込まれていない
test.jsとtest1.jsという2種類のファイルがあるとします。test.jsからtest1.jsの関数を利用する場合、jQueryの読み込みエラーでも記述しましたが、test1.jsから読み込む必要があります。なぜなら、test1.jsの関数をtest.jsから利用する際に、参照する関数が無いからです。
バージョンが違うプログラムが読み込まれている可能性
これは本人が意図しない場合が往々にあります。例えば、自作していないテンプレートやWordPressで言えばテーマを利用してWebサイトを作成した際に起こりがちなのですが、テンプレートなり、テーマなりで予めjQueryが読み込まれているのに気が付かずに、自分のjQueryを読み込んでしまう場合です。これが発生すると、jQueryを2つ読み込むことになります。処理速度的にもよくないですし、定義されていない関数を利用してしまう可能性が上がるので、これも確認した方が良い項目になります。
余談になりますが、これが発生する原因として、javascriptを、Webサイトの末尾で読み込む派と先頭で読み込む派が居ます。これについて、お互いのメリットを挙げていきます。
先頭からJSを読む派
- JSの記述個所をheadにまとめたい場合に便利
- ロードイベントの定義が必要になる
末尾からJSを読む派
- JSの記述個所をCSSと同じに書くことができない
- ロードイベントの定義が不要
作業者の趣向性を理解すれば、自分がテンプレート、テーマを利用している際に、jQueryが動かない際に、何処をどんな意図でチェックすれば良いかが分かります。
とはいえ、作業者の趣向性を想定するには、慣れが必要だったりするので、書籍等で勉強してみてはいかがでしょうか。jQueryであれば、MDN社の出している本が、図がいっぱい載ってて分かりやすいです。
>> jQueryデザインブック 仕事で絶対に使うプロのテクニック
読んでる記事が古い
jQueryやライブラリなどは、記事が古いと古いバージョンで有効だった関数を利用している場合があります。公開されているプログラムはセキュリティ保護の為、後方互換を考えられずやむなく機能の改修を行ったりすることが、割と普通にあります。なので、無償のプログラムをプロジェクトに利用していて、インターネットの記事を参考に実装を行う場合、その記事がいつ書かれた物なのかにも注力するのが良いと思われます。
一般的かは分かりませんが、choromeデベロッパツールのコンソールを利用して、jQuery呼び出してみるテストをしてます。画像の様にアラートが表示されたらOKなのではないでしょうか。
ウェブ開発に困ったら山王ウェブ設計事務所にご相談ください！
筆者は2020年より独立して、山王ウェブ設計事務所という屋号で活動しております。愛知県名古屋市中川区山王付近で活動していますので、実装方法が分からない、作成したけど本当に大丈夫か不安、人手が足りない、等、何かお困りであれば、下記Webサイトのメールフォームからお気軽にお問合せ下さい！
山王ウェブ設計事務所ホームページ
