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

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

更新： 2022/10/21

カテゴリ：

jQueryとは

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

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

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

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

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

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

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

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

・CDNで読み込む

<!-- js読み込み --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

1 2	<!-- js読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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

<!-- js読み込み --> 
<script src="js/jquery-3.1.0.min.js"></script>

1 2	<!-- js読み込み --> <script src="js/jquery-3.1.0.min.js"></script>

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

まずは悪い例です。

<!-- #button1 -->
<button id="button1">ボタン１</button>
 
<script>
$(function(){
    // 機能を呼び出す簡易な記述
    $('#button1').click(function(){
        alert('jQuery 1');
    });
});
</script>
<!-- js読み込み --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

$(function(){

// 機能を呼び出す簡易な記述

$('#button1').click(function(){

alert('jQuery 1');

});

</script>

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

次に良い例です。

<!-- #button1 -->
<button id="button1">ボタン１</button>
 
<!-- js読み込み --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
    // 機能を呼び出す簡易な記述
    $('#button1').click(function(){
        alert('jQuery 1');
    });
});
</script>

$(function(){

// 機能を呼び出す簡易な記述

$('#button1').click(function(){

alert('jQuery 1');

});

</script>

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

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

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

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

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

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

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