ここでは、jQueryの説明の前提が分からなくてお困りの方に向けて、基本の中の基本のお話をしたいと思います。ただし、ここではスタイルシートを例にjQueryを説明している部分が多々あるので、スタイルシートについてある程度、理解されている方が対象になります。

jQueryとは

jQueryというのは、JavaScriptのライブラリのひとつです。使われているプログラムはJavaScriptです。JavaScriptよりも短いコードで簡単に使えるでjQueryは人気があります。

jQueryを使いたいときは、ライブラリが読み込まれていないといけません。例えば、JQueryのCDNのようなCDNの読み込みがないとjQueryは動きません。

jQueryのCDN

バージョン３

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

バージョン２

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

バージョン１

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jQueryには、バージョンは３つありますが、基本的にはバージョン３を使えば良いと思います。読み込む場所は</body>の直前がページの表示速度的にはベターですが、head要素内でも動かないわけではありません。もちろん、上記のライブラリはスタイルシートと同じように自分のサーバーにアップロードして読み込ませることも可能です。

jQueryの書き方

jQueryを記入する場所

先ほど、jQueryを使うにはライブラリを読み込む必要があるというお話をしましたが、jQueryを書き込む場所もHTMLファイル上でライブラリが読み込まれた後に記入する必要があります。ライブラリが読み込まれる前にjQueryを書いても動きませんので気をつけましょう。

jQueryライブラリを読み込ませる
↓
jQueryを書く

jQueryのお決まり｜即時関数$(function(){});

$(function(){
  //処理する内容
});

上記は、jQueryの処理を書くときのお決まりの書き方です。この書き方は「即時関数」と言われるものです。$(function(){...});でくくることで、「HTMLを読み終ってから『処理する内容』を実行してください」という意味になります。jQueryを使いたいときは何も考えず、まずは$(function(){});を書いてからカッコ{}の中に処理を書きます。

ちなみに、jQueryは先ほどもお話しましたが、JavaScriptのライブラリになりますので、HTMLファイルにjQueryを記入するときは、<script>～</script>内に記入します。

<script>
  $(function(){
    //処理する内容
  });
</script>

「$」は「jQuery」の省略形という意味

$(function()の最初の「$」は、「jQuery」という意味です。「$」は「jQuery」と置き換えることもできます。

jQuery(function(){
  //処理する内容
});

ちなみに、WordPressでjQueryを使う場合は、この方法でないと動いてくれませんのでご注意を。

{…}はブロック

{…}というカッコはブロックと呼ばれています。複数の処理をまとめてグループ化したいときに{}の中に入れます。

セミコロン「;」は句点「。」のようなもの

jQueryでは、ひとつの命令単位が終わったらセミコロン「;」を入れます。スタイルシートでもtext-asign: center;という形で各プロパティの最後に「;」を入れますよね。これと同じです。

var 変数 = 値;

var 変数 = 値;みたいな記述をよく見かけることがあると思いますが、これは変数を宣言して値を代入しているところです。変数というのは、その時その時でいろんな値が代入できる「箱」のようなものです。

例えば、

var speed = 500;

はspeedを変数として宣言し、値として500を代入しているところです。この宣言の後で、speedという変数を呼び出すと、「500」という値が返ってきます。

$(セレクタ).メソッド(メソッドの処理);

$(セレクタ).メソッド(メソッドの処理);

上記のような表現も頻繁に出てきます。スタイルシートを勉強していたころを思い出していただきたいのですが、あるときからスタイルシートというのは、「プロパティ」と「値」の組み合わせをどれだけ覚えるかで決まると気がついたタイミングがあると思います。

まさにそれがjQueryでいうところの$(セレクタ).メソッド(メソッドの処理);なのです。

セレクタ

jQueryのセレクタはスタイルシートのセレクタとほぼ同じような意味です。中にはこれからメソッドを適用させる要素などが入ります。

メソッド

メソッドというのは、「操作」という意味です。セレクタで指定した要素を操作します。メソッドはスタイルシートでいうところのプロパティと同じでいろんな種類があります。

メソッドの処理

メソッドの処理の部分は、スタイルシートのプロパティに対する「値」と同じような関係にあります。メソッドの種類によってどんな処理を指定するかは変わります。

メソッドの処理の中に即時関数$(function(){...});が入ることもあります。

$(セレクタ).メソッド(
  $(function(){
    処理内容
  });
)

こんな感じになると少しややこしさが出てきますが、普段からjQueryに触れるようにすれば少しずつ馴れていきます。

$(this)はイベントが発生した要素

$(this)も結構よく出てくるんですよね。これがどこを指しているのか最初は良く分からないと思いますが、こういう事です。

$(function(){
  $(要素１).メソッド１(function(){
    $(this).メソッド２(引数);
  });
});

こんな感じのコードがあったとしたら、$(this)の部分は、カッコ{}のひとつ外側にいる$(要素１)です。

$(this) = $(要素１)

$(this)は、「メソッド１」というイベント処理の中で登場してくるので、そのイベントが発生している要素が$(this)になるということです。

とりあえず、以上でjQueryの基本の中の基本のお話は以上にします。また、追加でここ大事だなと思ったときはできるだけ噛み砕いた説明をここに加えて行こうと思います。