初心者向け：jQueryの基本の書き方！

初心者向けに、jQueryの基本の書き方を記載していきます。

プログラミング初心者の方であれば、「基本的に、jQueryどこにコードを記述したらイイの？」や「CSSとちがって、HTMLに直接記述するの？」など、まだまだ分からない事だらけのことと思います。

jQueryといっても、基本的にJavaScriptですから、コードの記述場所もJavaScriptと変わりありません。そこでプログラミング初心者の方向けに、jQueryの基本の書き方をまとめてみたいと思います。

という事で、それでは今回はッ、

・初心者の方へjQueryの書き方、記述場所
・jQueryのコードの書き方
・jQuery準備出来たら実行－ready()

上記について記載していこうと思います…。

初心者の方へjQueryの書き方、記述場所

それでは、jqueryの記述場所をサンプルコードを記載してみます。なお、今回は一般的なWebサイトのhead内に記述する方法をサンプルとして記載してみます。

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>——–①
<script>
・・ここにjQueryのコードを記述・・—②
</script>
</head>
<body>
・・省略・・
</body>
</html>
①—— jQuery本体を読み込みます。
②—— jQuery本体を読み込んだ後に、<script>内に記述します。

また、JavaScriptの読み込みよりも、ページ全体の表示を優先するために、</body>タグの直前に記述する方法もよく使われます。

サンプルHTML2<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
</head>
<body>
・・省略・・
<script src=”js/jquery.js”></script>——–①
<script>
・・ここにjQueryのコードを記述・・—②
</script>
</body>
</html>

Web制作の現場では、<script>タグ内に直接記述せず、外部ファイル化して読み込む方法がよく使われます。ブラウザによっては、外部ファイルはキャッシュに保存するため、ページ全体の表示速度があがるのが理由になります。

サンプルHTML3<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>——–①
<script src=”js/sample.js”></script>——–②
</head>
<body>
・・省略・・
</body>
</html>
②—— 別ファイル「sample.js」に記述して、②で外部ファイルとして読み込みます。

jQueryのコードの書き方

それでは実際に、jQueryのコードを記載してみます。まずは、次のようなコードを実行してみたいと思います。<body>内には、3つのp要素があり、クラス属性が付いているものと、ついていないものがあるとします。

それに対して下のサンプル①のコードは、「”caution”というクラスが付いた要素のカラーを赤にする」という意味になります。コードの詳しい解説は後述しますが、まずは下記のサンプルHTML4を見てください。

サンプルHTML4<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(“.caution”).css(“color”,”red”);——–①
</script>
</head>
<body>
・・省略・・
<p class=”caution”>
ここは”caution”というクラスが付いた<p>要素です。
</p>
<p>
ここは何もクラスが付いていない<p>要素です。
</p>
<p class=”caution”>
ここも”caution”というクラスが付いた<p>要素です。
</p>
</body>
</html>

ここは”caution”というクラスが付いた<p>要素です。

ここは何もクラスが付いていない<p>要素です。

ここも”caution”というクラスが付いた<p>要素です。

上記の記載方法では、「”caution”というクラスが付いた要素のカラーを赤にする」が効いていないようです。
これは、コードそのものは間違えていませんが、実行のタイミングが間違えている記述方法になります。

jQuery準備出来たら実行－ready()

それでは、もう一度サンプルHTML4の<head>内の下記のjQueryのコードを見てみます。

サンプルHTML4・・省略・・
<script>
$(“.caution”).css(“color”,”red”);
</script>
・・省略・・

コード自体に間違えはありません。ではなぜクラス”caution”内の文字が赤くならないかを解説いたします。

上記のコードは<head>内に記述されています。そして、ブラウザは、HTMLファイルの1行目から読み込んでいきます。つまり<head>内に記述されたjQueryのコードがブラウザに読み込まれて実行するタイミングでは、まだ<body>内は読み込まれていません。

まだ読み込まれていないものに対して、いくらプログラムを実行しようとしても、できない事が理解いただけると思います。jQueryでは、下記のように記述することが約束事のようになっています。

サンプルHTML4・・省略・・
<script>
$(document).ready(function(){
$(“.caution”).css(“color”,”red”);
});
</script>
・・省略・・

先ほどのコードを$(document).ready(function(){・・・});というコードが囲んでいます。これは、「ドキュメント（ページ）が、jQueryが実行できる準備ができたら」という意味になります。このように記述しておけば、HTMLファイルが最後まで読み込まれてから実行してくれるようになります。
※ただし、画像の読み込み完了は待ちません！

先ほどのサンプルHTML4でいえば、HTMLファイルが読み込まれ、つまりbody要素やp要素が読み込まれて準備ができたから、コードを実行してくれるようになります。

初めのサンプルHTML4のコードを$(document).ready(function(){・・・});で囲むと下記のように、”caution”というクラスのp要素が、赤い文字で表示されるようになります。

ここは”caution”というクラスが付いた<p>要素です。

ここは何もクラスが付いていない<p>要素です。

ここも”caution”というクラスが付いた<p>要素です。

$(document).ready(function(){、これだと少し長いことと思います。実はこの記述は、下記のように省略して記述することも可能です。

document.ready省略・・省略・・
$(function(){
$(“.caution”).css(“color”,”red”);
});
・・省略・・

このように、「準備ができたら・・・」という記述は、jQueryの約束ごととして覚えておくことをオススメします。

画像の読み込みを待つための記述方法

$(document).ready(function(){・・・});という記述は、約束ごとだと記載いたしました。しかしながら、これはいつも必ず、という訳ではございません。なぜなら、ready()では画像の読み込み完了を待ちません。

しかし、画像そのものに対して、何らかの処理を加えるコードがあった場合は、画像が読み込まれてからjQueryのコードを実行しなくてはなりません。

その場合は、$(document).ready(function(){・・・});ではなく、$(window).on(“load”,function(){・・・});と記述します。この記述方法は、画像の読み込みが完了してから実行するようになります。

では、はじめから全部$(window).on(“load”,function(){・・・});と記述すればイイのでは？と思う人もいるかもしれません。しかし、画像の読み込みは一般的に時間がかかります。少しでもjQueryの実行のタイミングを早めるために、$(document).ready(function(){・・・});を使用するのが一般的な記述方法になります。

ほどんどのコードが画像そのものに処理を加えるようなものではありませんが、まれに「画像の読み込みが完了するまで待たなければならない」場合があり、その場合は、$(window).on(“load”,function(){・・・});を使うという事を覚えておくことをオススメします。

という事で今回は、jQueryの基本の書き方！をサンプルコードと共に記載してみました。

コードそのものの記載紹介ではなく、jQueryのコードの実行タイミングに関する記載方法ですが、実は結構重要で、特に最後に記載した$(window).on(“load”,function()、忘れやすいタイミングの記載方法ですが、ここ最近の画像を多用するWebサイトではjQueryをサイトに組み込む場合は、忘れないようにした方が良いことと思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。