特集・記事リスト 記事・特集リスト
資料ダウンロード 無料お役立ち資料
本サイトについて 本サイトについて
お問い合わせ お問い合わせ
閉じる

【jQuery,JavaScript】jQueryのプログラムが動かない時の対処法、仕組み

JavaScriptを簡易化したプログラムjQuery。jQueryは簡単な記述で目に見えるサイト上での動きをつけることができる言語なのでプログラミング初心者でも扱いやすい言語です。本記事では大変便利なjQueryについて解説します。

カテゴリ: JS/jQuery

jQueryとは

jQueryはJavaScriptというプログラミング言語のライブラリです。つまり、JavaScriptを簡易化したプログラムです。

JavaScriptは難易度が比較的高い言語なので、何か機能を実装しようと思えばプログラミング初心者の方はかなり時間を要することになり、また、コードの量も何行も書かなければいけなくなるためフロントエンドエンジニアであっても大変な労力を要してしまいます。そんな難易度の高いJavaScriptの簡易化を実現したのがjQueryです。

jQueryは簡単な記述で目に見えるサイト上での動きをつけることができます。例えば画像を横にスライドさせたり、ふわっと要素を表示させたりと高度な動きを実現できます。

今回は大変便利なjQueryについて説明したいと思います。

jQuery本体の読み込みコードの位置

本体読み込みコードの位置によってjQueryが読み込まれないというのは多々あります。例えば、本体読み込みのコードを、機能を呼びだすjQueryの記述より下に配置していると読み込まれません。

理由は、jQueryは先に本体のプログラムを読み込まなければ動かないからです。また、プログラムは上から読み込まれるという決まりがあります。なので、先に読み込ませるために機能を呼びだすjQueryの記述より上に本体読み込みのコードを配置しなければならないのです。

本体読み込みのコード・・・jQueryは前提として簡易な記述で機能を実現するための環境づくりとして、膨大なプログラムが書かれた元データの読み込みが必要になります。その元データの読み込み手段が下記の2パターンです。

・CDNで読み込む

・ファイルをダウンロードして読み込む

今回は何かとメリットがあるCDNを例にしてご説明したいと思います。

まずは悪い例です。

上記の悪い部分はCDNの位置がjQueryの記述より下に配置されています。プログラムは上から読み込まれるのでjQueryは当然動きません。

次に良い例です。

上記の記述であればjQueryは動きます。

jQuery本体の読み込みコードの重複

jQueryの本体読み込みコードが2つ3つある場合、処理の競合が起きてしまい結果的に動かなくなる場合があります。筆者もjQueryを触り始めたばかりの頃はよくこれでつまずいておりました。本体読み込みは1つで十分です。CDNを利用するならば1つのスニペットを貼り付けるだけで基本的にjQueryは動きます。

jQuery本体の読み込みコードのバージョンが合っていない

稀にjQueryのバージョンが合わずプログラムが動かないという事態が起こります。もし、正しい方法で読み込んでいてもプログラムが動かなければ、元データのバージョンを変えてみるのをおすすめします。

インターネットの接続がない

インターネットの接続によって動かない場合として考えられるのはCDNのコードで元データを読み込んでいる場合です。CDNはインターネットを経てサーバーからデータを引っ張ってくるからです。
2つの方法のうちのひとつの「ファイルをダウンロードして読み込む」場合は、インターネット接続関係なくファイルを読み込むのでローカル環境でもjQueryは動きます。

まとめ

jQueryはとても便利なJavaScriptを簡易化したとても便利なライブラリでありメリットは沢山ありますが、その反面デメリットもあります。メリットとデメリットを踏まえてjQueryをうまく使いサイトに動きをつけていきましょう!

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

高沢 翔汰

フロントエンドエンジニアの高澤です。得意領域はWordPressやその他CMSを利用した開発。日々業務をこなす中でつちかったプログラミングやデザインの技術・知識や、自ら学習したことをまとめて皆様に発信してまいります。趣味は技術書を読むこと。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。

そのままの計画で、目標達成できますか?

Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。
考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。

サイト内でユーザーがどのような行動をとっているかを解析

自社と競合を比較し、どこが勝っていてどこが弱みなのかを浮き彫りに

ユーザーのニーズや業界動向等を調査し、状況にあった施策を提案

課題解決のポイント、目標達成のプロセスなど
Webサイトの成長につながる具体的な手段をご提示いたします

運営会社

Web制作・広告・コンサルティングのセルリア

サービス一覧
会社概要