Jqueryが動かない時は本体の記述を確認しよう

2019年10月22日

植物とノートパソコン

今日は先日アップした「Jqueryが動かない時はパスを確認しよう」の続きとなる内容でお送りいたします。

前回の記事の内容としては主に「Jqueryファイルへのパスの確認」という事を副題として、パスに関する基本的な知識についてのご説明や、パスが正しく繋がれているかを確認する簡単な方法についてもご説明させていただきました。

要はJqueryというweb構築初心者の方にとっては少し複雑でややこしいファイルを扱うに際して、必要となるhtmlの基礎知識についても改めてご説明させていただいたという事ですね(´・ω・`)

Jqueryの扱いにまだ自信が持てないという方で前回の記事をまだ読まれていないという方は、そちらの記事から是非お読みください。

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

本体の記述に重複が無いかを確認

スマホを確認する女性

Jqueryが動かない時の原因としては本体を重複して記述してしまっている場合があります。

本体とは前回までの記事で紹介したプラグインファイルの事では無く、Jqueryの核となるライブラリの事です。

本体を読み込むには二通りの方法があり、公式サイトからファイルをダウンロードするか、CDN(Contents Delivery Network)から読み込ませるかを選択する事が出来ます。

ダウンロードして読み込ませる場合の利点はネットワーク環境にサイトが繋がっていなくても使用する事ができる点です。

対してCDNから読み込む場合はパスを一部変えるだけで読み込む本体の種類を変える事が可能となるフットワークの軽さの部分でしょうか。


因みに当サイトはCDNから読み込む方法を採用しております。
ファイルをダウンロードするやり方が面倒なので(´・ω・`)

ここまではJquery本体についての簡単な説明でありここからが本題です。

Jqueryの本体は同じサイト内に複数の読み込みを行うと動作不良をお起こしJqueryのプラグインが上手く動作しないという事態が起こります。

(前回の記事で書いた確認方法では)Jqueryのパスは繋がっていて問題が無い筈なのに何故か動かない…という場合には本体の記述に重複が無いかを確かめてみる事をオススメします。

本体をダウンロードして読み込んで、更にCDNからも読み込んで…みたいなカオスな状態になっているとJqueryは動かない場合がありますので要注意です!

CDNから読み込む場合のJquery本体の呼び出し方

眼鏡とタブレット

CDNから本体を読み込む方法でJqueryが上手く動かない場合の原因の一つとしてパスの記述方法に問題がある可能性が考えられます。

具体的には対象となるサイトのURLの冒頭部分が「http」になっているのか、それとも「https」であるかによって、呼び出す本体のURLにも「http」と「https」のどちらを使用しなければならないかが変わってくるからです。

要はサイトのURL冒頭部分と本体のURLの冒頭部分が違っていると上手く動かない事があるという事ですね(´・ω・`)


余談ですがこの「https」に付いている「s」という文字は「ssl(Secure Sockets Layerの略)」と呼ばれる暗号通信を利用した安全なサイトである事の証明の一つになります。

サイトをssl化する事で外部への情報の漏洩や改ざんに対するセキュリティを強化する事が可能となり、ユーザーにとっても安心してサイトへ訪問しコンテンツを楽しんでもらう事が可能となります(初期状態では大抵のサイトはssl化をしていません)。

EC(商品販売系)サイトの場合には特に、ユーザーの個人情報やクレジットカードの番号などを悪用されないためにもssl化は必須中の必須事項になります。

SSLと書かれた木材

今どき通販サイトを運営していてssl化に未対応という会社は稀だとは思いますが、もしそういったサイトを見つけた場合は利用する事は控えた方が無難です。

少なくともお客様の事を第一に考えたサイトの作りではありません。

非常に無責任なサイトであると断言する事ができます(`・ω・´)ダメ!ゼッタイ!

sslについては設定方法について等の部分も含め、また別の機会にご説明を致します。

因みに、本サイトはssl化が完了しております(´・ω・`)

私のサイトにはフォームやクレジットカード情報などを入力するようなコンテンツは一切無いので無関係です(`・ω・´)!なんて思っている方にとってもこれは大きな問題なんです。

Googleの指針として今後はssl化を行っているサイトにはSEO的を優遇するというアナウンスを行っております。
なので、ssl未対応というだけでサイトの表示順位に大きなペナルティを受ける可能性がありますのでご注意ください!

笑顔の女性

話が大分反れましたので戻します。

上記でssl化は今後のサイト運営においては必須と申しましたが、逆にssl化をした事により一時的にサイト内に設置していたJqueryのプラグインが機能を停止してしまうという場合もあります。

要は元々読み込んでいたCDNの記述部分「http」に「s」が足りないのでssl化後に読み込みが上手くいかなくなるという場合ですね。

些細な事ではありますが注意をしましょう。

「Jqueryが動かない時は本体についての記述を確認しよう」のまとめ

スマホをチェックする女性

今回は主にJqueryを利用する際にトラブルの原因となりがちな本体についてや記述方法、ssl等についての解説を行いました。

慣れない間はJqueryで動かない際の原因や対処法などについて色々と悩まされる事もあるとは思いますが、原因を一つ一つ虱潰しに確認する事が結局は解決までの一番の近道になります。

本ブログではそういった原因毎の対応方法について解説を行っていきますので、気になる方は次回以降の記事も引き続き、是非ご覧になってください。
ではまた(´・ω・`)ノ

関連記事

BLOG

ブログ運営に向いている人・始めるべき人の特徴について

「ピノ 焦がしみたらしキャラメル」のパッケージ

「ピノ 焦がしみたらしキャラメル」を食べてみた

資料を眺めている男性

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

ノートパソコンとスマホと電卓

オフィスワークのメリット・デメリットについて

コメントを残す

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

CAPTCHA