jQueryが動かない原因を調べる
調べないことは自分を無知にする大罪である
jQueryのプラグインは配布元の公式サイトを見れば、組み込み方法やオプションの説明、デモページなどが載っていることがほとんどです。
GitHubなどクラウドで開発プログラムごと管理・配布されているものもあり、英語で書かれたものも多いのですが、単語が分からなければ翻訳サイトでササッと調べればおおまかな意味はつかめます。
私はいつも、Google検索をします。
検索欄に「翻訳」と入れて検索すると翻訳サイトがたくさん出てきますので、そこから翻訳サイトに移動して、分からない単語をコピー&ペーストして例文などを少し読んで、だいたいの意味を把握して元のサイトに戻ります。
分からないことが出てくるのは当たり前のことなので、
「分からない」「知らないから」という理由を盾に
自分で調べるということをしないのはいけませんね。
調べ方がわからないという方もおられますが、調べ方を身に付けるには、いろんな検索ワードで検索をしなければなりません。
そうすれば、
「プラグイン名」
で検索するよりも、より具体的に何をどうしたいかを含めて
で検索したほうが、よりピンポイントなページがヒットするということを自らの経験から発想できるようになります。
jQueryのプラグインが動かないとき
もし自分のサイトに組み込んで動かなかった場合、
「公式サイトの通りにやったのにどうして?」
と思うのではないでしょうか?
そして、公式サイトの通りにやったのに動かないのだから、自分のサイトはサーバー環境とか互換性の問題で使えないのだろう。と、自分が納得できる理由をつけて諦めてしまうと、「問題を解決する力」は伸びません。
プログラミングに限らず、行き詰ったときに原因を自分で調べる力が足りていないと、いつまでたってもスキルは頭打ちになってしまいます。自分に必要な情報がそれ以上入ってこないからです。当たり前のことですよね。
原理原則に基いた問題解決の考え方
まず、大原則から。
jQueryが動かない原因はブラウザが知っています。
なぜなら、jQueryはブラウザの中で動くからです。
jQueryのプラグインはjQueryというスクリプト言語で書かれたプログラムファイルで出来ており、jQueryを設置したウェブページをブラウザで開いたときに、ウェブサーバーからブラウザに向かってページを構成する全てのファイルがダウンロードされ、そこにjQueryのプログラムファイルも含まれてきます。
そして、ダウンロードし終わってからパソコンやスマホ上でブラウザによって起動されるのがjQueryのプラグイン本体です。
従って、jQueryのプラグインが動くか動かないかは、プラグインの設置コードがブラウザに正しく伝わるようにルールを守って書いてあるかどうかで決まります。多くの場合、サーバー環境(PHPのバージョンなど)には関係ありません。
さて、多くのjQueryプラグインは、ウェブページに何らかの動きや見た目の変化を与えます。
言い換えると、ブラウザに読み込まれたウェブページのHTMLやCSSを、jQueryのプログラムによって変更しているということです。HTMLやCSSはブラウザが読み込んだ上で表示されていますので、HTMLやCSSに変化が生じるのであれば、ブラウザはその変化を認識しているということになります。
そこで、ブラウザがHTMLやCSSをどのように認識したかをダイレクトに覗き見できるツールが各ブラウザには付いています。ウェブページを作る人の利便性を向上させるために付いている、非常にありがたいツールです。
Google Chromeの場合なら「ディベロッパーツール」です。
ウェブページの任意の箇所をマウスで右クリックしてコンテキストメニューを表示させて「要素を検査」を選ぶと出てきます。他のブラウザでもメニューこそ違えども、同様のツールが標準で付いています。
昔は標準では付いていなかったので、別途インストールする必要がありました。
もしjQueryを設置した箇所に文法ミスがあったなら、ブラウザは該当箇所を正しく認識できませんので、ディベロッパーツール上で見たHTMLやCSSの該当箇所は全く変化しないはずですよね?
その場合、ディベロッパーツールのタブメニューを切り替えてConsole(コンソール)を見ると、プラグインが要求しているjQuery本体のバージョンが違っているために認識されていない関数があったり、複数のjQueryが競合を起こしているといった様子が分かります。
逆に、ディベロッパーツールを見てHTMLやCSSの該当箇所が変化していることが分かると、プラグインはブラウザに認識されているという証拠ですから、想定通りの動きをしないのは設置方法に問題があるということになりますね。
完全マンツーマンのオンラインレッスンのご案内
リクルート社が運営するスキルアップサイト「教える学べる」3つ星講師です。
≫ ページ内の「先生に聞いてみる」ボタンでお気軽にご相談ください
※平日の夜は予約が埋まりやすいのでお早めにご相談ください。
※Facebookでもプログラミング&コーディングの本質を投稿しています。
Facebook(友達限定のプライベート投稿で本質的な情報発信中)