jQuery

jQuery入門|説明の前提が分からない方へ

プログラム関係のサイトを見ていると、知識がないことをまるで世間知らずの「恥ずかしい」ことのように考える傾向があることに違和感を感じる今日このごろです。知らないことは、知ればいいだけなので「今さら聞けない」とか「恥ずかしい」とか、どうでもいいなと思います。

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

jQueryとは

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

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

jQueryのCDN

バージョン3

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

バージョン2

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

バージョン1

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

jQueryには、バージョンは3つありますが、基本的にはバージョン3を使えば良いと思います。読み込む場所は</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(){
  $(要素1).メソッド1(function(){
    $(this).メソッド2(引数);
  });
});

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

$(this) = $(要素1)

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

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

WordPressテーマ「MAG(TCD036)」

最近の記事

  1. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  2. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  5. CSS

    CSS|中央寄せが効かないときは・・・
PAGE TOP