Jqueryが動かない時はパスを確認しよう

2019年10月10日

悩まし気な女性

先日アップしたJqueryに関する二つの記事

「Jqueryとは | 使い方について」
「Jqueryのおすすめの機能について」

こちらの記事の中では、代表的なJqueryについての説明等を行いましたが今回はそんなJqueryを導入する際に初心者の方が陥ってしまいがちな失敗や、手本通りに設定を行った筈なのに何故かJqueryが動かない…という場合に見直すべきポイント等について説明していきたいと思います。

「Jquery」が動かない時のチェック項目

パスについての基礎知識

膝の上にパソコンをのせている人

Jqueryが上手く動かない時に最初にチェックするべき事が「パス」の確認です。

パスとはWEB上における住所の様なもので所謂「URL」等と呼ばれるものです。

例として、本の記事のパス(URL)は「https://iroiroaruaru.com/2019/10/15/20191010/」になります。

パスの指定が正しく行われていた場合は、リンクや表示が正しく行われるのでクリックで任意のリンク先へ飛ばしたり画像を表示させる事が出来ます。

これがWebサイトを作る時の基本となるのですが、初心者の方であればこちらの設定方法が今一つ理解できていないという方も多いです。


私も最初はそうでした(´・ω・`)
因みに「パス」には「相対パス」と「絶対パス」という二種類の設定方法があるのですが、それはまた別の機会に説明を致します。

パスを指定する為に、まずはWebサイト内部の階層構造を理解する必要があります。

現在記述を行っているファイル(htmlやphp、cssファイル等の事です)から見て、「目的となるファイルがどこに存在しているのか」という事を相対的に把握し、目的となるファイルへのルートを記述します。

現在のファイルがある場所を表すのが「./」(ドットスラッシュ)
一つ上の階層にあるフォルダを表すのが「../」(ドットドットスラッシュ)

サイトマップの解説画像

階層構造をより良く理解していただく為にサンプル画像を用意いたしました。
こちらの画像を元にして、例えば「profile.html」から「pages」へアクセスをする場合のパスは、「./commons/img/pages」となります。

逆に「pages」から「profile.html」へアクセスをする場合のパスは「../../profile.html」となります。

因みに、下の階層から上の階層へ戻る場合は「../」で表す事が必須となりますが、上の階層から下の階層へ向かう場合は「./」を省略する事が出来ます。

先ほどの例えを引用すると、「profile.html」から「pages」へアクセスをするパスは、「commons/img/pages」と省略して記述する事が出来るのです。

「Jquery」ファイルへのパスの確認

3つのモニター

これまでの説明はあくまでもパスに関する基礎的な知識であり、「Jquery」が動かない時の確認方法ここからです。

パスに関する知識的な説明は理解しました。

ではどの様にしてサイト内でパスの成否を確認すればいいの?という方には、私が普段行っている簡単なパスの確認方法をお教えいたします(グーグルクロームを使用した場合)


まず、Windowsの場合は「Ctrl(コントロール)」+「U」を押してください。
Macの場合は「command」+「U」になります。

そうすると、現在開いているページの「ソースコード」が表示されます。
ソースコードとは、簡単に言えばページを構成しているプログラムの文字列の事で下記の様な画像が表示されます。

ホームページのソースコード

次にこのソースコードが表示されている画面でWindowsの場合は「Ctrl(コントロール)」+「F」を押してください。
Macの場合は「command」+「F」になります。

すると画面の右上辺りに検索窓が表示されますので、その中に任意のjsファイルの名前を入力し検索をします。
例として、ここでは「slick.js」と入力して検索を行いました。

サイトの情報

検索で見つかったファイルをクリックしパスが正しく繋がっているかを確認してください。

クリックして出てきた画面が下の画像の様なソースコードであれば、正しくパスが指定されているという事になります。

もしも「お探しのページが見つかりません。」等の様な表示になった場合は、パスが正しく設定されていないという事になるので、もう一度記述内容を見直して正しく設定をしてあげる必要があります。

「slick.js」の説明画像 普通のhtmlファイルで組まれたサイトであれば、ヘッダーからフッターまでを全て一つのファイル内に記述しているので(include fileを使用する場合を除き)パスの指定が正しく行われているのかが分かりやすいですが、ワードプレスやECキューブの様にヘッダーやフッターを別ファイルとして用意し呼び出す形式の組み方の場合は、パスの階層が若干分かりづらくなるので記述をする際には注意が必要です。

まあ慣れてしまえば全く問題は無くなるのですが、特に仕事などで他の人が設計して組まれたサイトを触る際などは、構造を理解し慣れるまでに若干の時間が必要となる場合もありますね(´・ω・`)

「Jqueryが動かない時はパスを確認しよう」の総評

スマホを操作する手

今回は「Jquery」が動かない時の対処法のチェック項目の一つであるパスについての基礎知識と、その確認方法の一つについてご説明を致しました。

パスについては「相対パス」と「絶対パス」という二つの設定の方法やその違いなどについても後々説明を致したいと思っておりますが今回はあくまでもJqueryを主題とした記事になりますので説明は省いております。

そちらについても後々の記事内で何れ解説をしていきたいと考えております。

次回以降の記事でも残りのチェック項目についての解説を行いますので、是非また見に来てください!
それではまた次回をお楽しみに(´・ω・`)ノ

関連記事

ソースコード

Jqueryとは | 使い方について

資料を眺めている男性

ブログの文字数とseoの関係について | 文字数カウントは必須

大阪市の美術館

美術館でバイトをやってみた

カップヌードル カニCREAM BIGのパッケージ

カップヌードル カニクリーム | カップヌードル 濃厚カニクリーム味 ビッグ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA