Jqueryが動かない時は記述場所を確認しよう

2019年10月28日

観葉植物とノートパソコン

本記事は同テーマで投稿をした下記記事の続きとして、Jqueryを記述する際に起こりがちな動作不良に対しての確認事項について簡単に解説をしていきたいと思います。
まだご覧になられていないという方は先に下のURLの記事の方から見ていただいた方が、より一層全体の内容も理解しやすくなると思います。

・「Jqueryが上手く作動しない時はファイルへのパスを確認しよう」
・「Jqueryが動かない時は本体についての記述を確認しよう」

「Jquery」が上手く作動しない時のチェック項目

記述場所がヘッダーかフッターか

白いノートパソコン

副題にもありますが、Jqueryは記述箇所が原因で動作不良を起こす事が多々あります。
そういった時には記述を行っている箇所を変更してあげる事でちゃんと狙った通りの動きをしてくれる様になる事があります。

例としては、とあるJqueryに関する記述をヘッダー部分にしていたが作動をしない場合に、同じ内容の記述をフッター部分に移してしてみると動くようになるという事があります。
逆にフッター部への記述では動かなかったが、同じ内容の記述をヘッダーに移すと動いた、という様な事も起こります。

記述箇所を入れ替えるという非常に簡単な解決方法ではありますが、Jqueryを扱う際には割と頻繁にあるトラブルなので知っておくと便利な対処法になります。
Jqueryが動かない時の原因には本当に色々な理由が考えられますので、一度動かなかったからという理由で直ぐに諦めたりせず簡単な事からで構わないので粘り強く対応をする事が大切です。

先程は「ヘッダーからフッターへ」、「フッターからヘッダーからへ」という記述するタグの位置を変えてしまうという対処法をご紹介いたしましたがそれ以外にも、

・ヘッダー内の下部から同じヘッダー内の上部へ
・フッター内の上部から同じフッター内の下部へ

といった風に同じ「タグ」内で記述する場所を変更してやる事で動きを正す事が出来る場合もあります。

サンプル画像①

HTMLが写っている画像

文字での説明だけでは今一つ状況が理解しにくいと思いますので簡単にではありますが、サンプルとなる画像を用意いたしました。
こちらは本ページのフッター部分のソースコードで、複数のjsファイルが並んで記述されています。
もしも仮に、画像赤枠内にあるファイル「~~ 省略 ~~/js/slick/slick.js」へのパスの設置や記述自体には問題や誤りが見当たらないのに正しく作動しないという場合は、図の様に記述順を変更する事でJqueryプラグインの動作が正常化される場合があります。
まあ記述順が原因で動作不良を起こすという事は割とレアなケースではありますが時々見つかる症状ではありますので、何を試しても駄目だったという方であればこちらの方法を試してみてはいかがでしょうか。

「タグ」内での記述場所の移動についてはJquery関係以外にも時々発生するトラブル(参考サイト通りに記述を行っている筈なのに、自分のサイトでは正しく設定されない系のトラブル)の解決方法の一つとなりますので知っておいて損は無い知識だと思います。

ノートパソコン

Jqueryとは直接関係ありませんが、私は先日上記の方法を用いてサブディレクトリページ内でのファビコンの表示の修正を行いました。

具体的にはサブディレクトリとなるページに於いて、記述やパスには問題が無いにも関わらず何故かファビコンが一向に表示されないという事態に陥りました。
様々なサイトを確認し何度も確認を致しましたが全く問題が見つからず嘆いていたところ、ふと上記の方法を思い出し最後の賭けだという気持ちで祈る思いで試してみたところ見事表示に成功しました。

上述の知識を有していたからこそ解決をする事が出来たトラブルです。
灯台下暗し的な感じで何時間調べても分からなかった問題が、視点を変えた簡単な修正を加える事で一瞬で解決してしまうという事はwebの現場ではよく起こりますので注意が必要です。(´・ω・`;オマエガイウナ

また仮に参考サイトと同じ記述を行っていたとしても、自身の使用しているサイトとの記述の差異で同じように動かない時も多々ありますので注意が必要です。
ワードプレスにおいては特に(テーマやプラグインの関係で)そういった事態が顕著に起こります。
上記の問題が発生したサイトもワードプレスで構築されていました。
勿論参考サイト自体が記述が古い場合や間違った情報を流している場合も結構ありますので注意は必要ですが、疑うべきは先ずは己からという事を念頭に置いて対応をしましょう。

サンプル画像②

ファビコンのサンプル ※ファビコン…ページのタブに表示されるアイコン(サンプル画像2の赤枠内参照。サンプルは大手通販会社「Amazon」のファビコン)の事でサイトの顔の一つになります。
こちらを設定を行う事で任意の画像を自由に表示させることが出来る様になります。
因みに本サイトではまだ未設定です(´・ω・`;
ファビコンの設定方法については後日説明を致します。

「Jqueryが動かない時は記述場所を確認しよう」のまとめ

雑貨とキーボード

本日はJqueryの動作不良の際に原因の一つとなる記述順についての大切さや対処法についての解説を行いました。
本記事で紹介を行った対処法については書籍やweb上でもあまり取り扱われていないと思いますので、ある程度ホームページの作成経験があるという方であっても意外と知らなかったという方も多かったのではないでしょうか?
web制作の現場ならではの知識ですね。

次回の記事ではこれまでの解説から一歩踏み込んだ内容として、「ワードプレス」でJqueryを使用する際に必要となる少し特殊な記述方法についても解説をしたいと思います。
今現在ワードプレスを使用してJqueryを使用中であるという方やこれからチャレンジしてみようと考えている方には特に見て欲しい内容となっております。

ワードプレスについての簡単な説明はコチラからご覧ください。
ではまた(´・ω・`)ノ

関連記事

もちっと食感の汁なし担々麺のパッケージ

お母さん食堂 もちっと食感の汁なし担々麺 を食べてみた

デジタルなイメージと地球の絵

web業界で働いてみて良かった点・悪い点

空に掲げられた拳

ブログの記事数が60記事を越えました

髪を触る女性

自宅で縮毛強制をするメリットについて

「ヤムヤム トムヤムシュリンプクリームヌードル」の外袋

「ヤムヤム トムヤムシュリンプクリームヌードル」を食べてみた

フローズンスイーツ スイートポテトのパッケージ

「赤城 フローズンスイーツ スイートポテト」を食べてみた

喫煙コーナーの警備員

警備員のバイトをやってみた感想

プログラミング

便利なJqueryを厳選してご紹介!

コメントを残す

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