Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

jQueryが動かない原因を調べる

f:id:wp-lesson:20160102124712j:plain

調べないことは自分を無知にする大罪である

jQueryプラグインは配布元の公式サイトを見れば、組み込み方法やオプションの説明、デモページなどが載っていることがほとんどです。

GitHubなどクラウドで開発プログラムごと管理・配布されているものもあり、英語で書かれたものも多いのですが、単語が分からなければ翻訳サイトでササッと調べればおおまかな意味はつかめます。

私はいつも、Google検索をします。

検索欄に「翻訳」と入れて検索すると翻訳サイトがたくさん出てきますので、そこから翻訳サイトに移動して、分からない単語をコピー&ペーストして例文などを少し読んで、だいたいの意味を把握して元のサイトに戻ります。

分からないことが出てくるのは当たり前のことなので、

「分からない」「知らないから」という理由を盾に

自分で調べるということをしないのはいけませんね。

調べ方がわからないという方もおられますが、調べ方を身に付けるには、いろんな検索ワードで検索をしなければなりません。

そうすれば、

プラグイン名」

で検索するよりも、より具体的に何をどうしたいかを含めて

プラグイン名 WordPress 設置方法」

で検索したほうが、よりピンポイントなページがヒットするということを自らの経験から発想できるようになります。

jQueryプラグインが動かないとき

もし自分のサイトに組み込んで動かなかった場合、

「公式サイトの通りにやったのにどうして?」

と思うのではないでしょうか?

そして、公式サイトの通りにやったのに動かないのだから、自分のサイトはサーバー環境とか互換性の問題で使えないのだろう。と、自分が納得できる理由をつけて諦めてしまうと、「問題を解決する力」は伸びません。

プログラミングに限らず、行き詰ったときに原因を自分で調べる力が足りていないと、いつまでたってもスキルは頭打ちになってしまいます。自分に必要な情報がそれ以上入ってこないからです。当たり前のことですよね。

原理原則に基いた問題解決の考え方

さて、jQueryプラグインの話に戻りましょう。

まず、大原則から。

jQueryが動かない原因はブラウザが知っています。
なぜなら、jQueryはブラウザの中で動くからです。

jQueryプラグインjQueryというスクリプト言語で書かれたプログラムファイルで出来ており、jQueryを設置したウェブページをブラウザで開いたときに、ウェブサーバーからブラウザに向かってページを構成する全てのファイルがダウンロードされ、そこにjQueryのプログラムファイルも含まれてきます。

そして、ダウンロードし終わってからパソコンやスマホ上でブラウザによって起動されるのがjQueryプラグイン本体です。

従って、jQueryプラグインが動くか動かないかは、プラグインの設置コードがブラウザに正しく伝わるようにルールを守って書いてあるかどうかで決まります。多くの場合、サーバー環境(PHPのバージョンなど)には関係ありません。

さて、多くのjQueryプラグインは、ウェブページに何らかの動きや見た目の変化を与えます。

言い換えると、ブラウザに読み込まれたウェブページのHTMLやCSSを、jQueryのプログラムによって変更しているということです。HTMLやCSSはブラウザが読み込んだ上で表示されていますので、HTMLやCSSに変化が生じるのであれば、ブラウザはその変化を認識しているということになります。

そこで、ブラウザがHTMLやCSSをどのように認識したかをダイレクトに覗き見できるツールが各ブラウザには付いています。ウェブページを作る人の利便性を向上させるために付いている、非常にありがたいツールです。

Google Chromeの場合なら「ディベロッパツール」です。

ウェブページの任意の箇所をマウスで右クリックしてコンテキストメニューを表示させて「要素を検査」を選ぶと出てきます。他のブラウザでもメニューこそ違えども、同様のツールが標準で付いています。

昔は標準では付いていなかったので、別途インストールする必要がありました。

f:id:wp-lesson:20160102130512j:plain

もしjQueryを設置した箇所に文法ミスがあったなら、ブラウザは該当箇所を正しく認識できませんので、ディベロッパツール上で見たHTMLやCSSの該当箇所は全く変化しないはずですよね?

その場合、ディベロッパツールのタブメニューを切り替えてConsole(コンソール)を見ると、プラグインが要求しているjQuery本体のバージョンが違っているために認識されていない関数があったり、複数jQueryが競合を起こしているといった様子が分かります。

逆に、ディベロッパツールを見てHTMLやCSSの該当箇所が変化していることが分かると、プラグインはブラウザに認識されているという証拠ですから、想定通りの動きをしないのは設置方法に問題があるということになりますね。

つまり、ディベロッパツールを使うことによって、問題の切り分けができるということなんです。

完全マンツーマンのオンラインレッスンのご案内

リクルート社が運営するスキルアップサイト「教える学べる」3つ星講師です。

≫ 生徒さんの口コミレビューをご確認ください


f:id:wp-lesson:20151222150112j:plain

≫ ページ内の「先生に聞いてみる」ボタンでお気軽にご相談ください

f:id:wp-lesson:20151222145958j:plain

平日の夜は予約が埋まりやすいのでお早めにご相談ください。
Facebookでもプログラミング&コーディングの本質を投稿しています。
Facebook(友達限定のプライベート投稿で本質的な情報発信中)