jQueryの基本的な使い方

JavaScriptをより便利に使うために、頻出するコードやあると便利なコードなどをまとめたプログラムの集まりのひとつがjQueryです。

jQueryは古いと言われることもありますが、現在かなり広まっており使用する機会もあるかと思います。

今回はjQueryの本当に基礎的な部分だけをご紹介します。

jQueryを使うために

jQueryを使うためには、HTMLファイル内にscriptタグを記述して読み込まなければなりません。

具体的には、以下の２通りの方法があります。

１．jQueryが公開されてあるURLを指定
２．jQueryをダウンロードしてパスを指定

１．jQueryが公開されてあるURLを指定

URLを指定する方法では、jQueryを配信しているサーバーのURLを指定することで、こちらのサーバー内もしくはローカル環境にjQueryを配置せずとも使用することができます。

この仕組みのことをCDN(Content Delivery Network)と呼びます。

有名なjQueryを配信しているサーバーは、jQueryの公式とGoogleのどちらかがあります。

GoogleのCDNを利用したほうが速度的には早いので、今回はこちらを使って説明したいと思います。

まずHTMLファイルを用意したら、下記のサイトにアクセスします。

Google Hosted Libraries

jQueryの3.x snippetと書かれている文字の下の行にある、scriptタグをコピーしてHTMLファイル内に張り付けます。

あとは、自分がコードを書くファイルを用意して、それに対してのscriptタグを書けば準備が整います。

２．jQueryをダウンロードしてパスを指定

こちらの方法ではjQueryの公式サイトからJavaScriptファイルをダウンロードしてscriptタグで指定します。まず以下のページにアクセスしてください。

Download jQuery

アクセスしたら下記のどちらかをダウンロードします。上側のcompressedと書いてあるほうが、ファイルサイズを圧縮したもので、下側のuncompressedと書いてあるほうが、コードが読みやすいほうです。

Download the compressed, production jQuery 3.5.1　(圧縮版)
Download the uncompressed, development jQuery 3.5.1　(圧縮無し版)

開発中はuncompressedを使って、本番環境でcompressedを使うといいかもしれません。

ダウンロード出来たらHTMLファイルにjQueryと自分で書くファイルへのscriptタグを書けば完了です。

基本となる書き方

jQueryを使用するうえで基本となるコードを以下に示します。

$(selector).action();

$というのはjQueryに定義されたオブジェクトで、関数のように使います。引数として文字列で要素を指定し、その要素に対して何かしらのactionを実行するという書き方が基本です。

selectorに入る文字列は、cssで要素を指定するためのものとほぼ同じです。ちなみに、要素を指定する文字列のことをセレクタと呼びます。

実際に実行できるような例を以下に示します。

// pタグをすべて非表示にする
$("p").hide();

// bobというclassが指定された要素すべてを表示する
$(".bob").show();

// subというidが指定された要素を非表示にする
$("#sub").hide();

$(selector)の部分が実行されることで戻り値として、要素を操作しやすくしたオブジェクトが返され、そのオブジェクトが持つ関数を実行しているということになります。

また、jQueryにはHTMLの読み込みが完了した後に、コードを実行するための関数が用意されています。

$(document).ready(function() {
    // HTML読み込み後に実行するコード
})

$の引数にdocumentを渡すことで関数が実行された結果として、documentを使いやすくしたオブジェクトが返されます。そのオブジェクトのready関数の引数として、無名の関数を渡しました。

こうすることで、関数が登録され、HTMLの読み込みが終わった後に一度、引数で渡した関数が実行されます。

このコードは使う機会が多いので、省略した書き方も用意されています。

$(function() {
    // HTML読み込み後に実行するコード
});

$関数にセレクタではなく関数を渡すことで、先ほどと同じくHTML読み込み後に実行されます。

イベントの登録

要素をクリックしたとき、要素にマウスが重なった時などのタイミングで関数を実行したいケースがあります。

このタイミングや、それを管理する仕組みのことをイベントと言い、JavaScriptでは多くのイベントが存在します。

実際にそのタイミングになることを、イベントが発火するなどという表現を使うこともあります。

イベントに関数を前もって登録しておくと、イベントが発火した瞬間に登録されている関数が実行されます。

このようなイベントの仕組みもjQueryでは簡単に書けます。

$("p").click(function() {
    $(this).hide();
});

thisにはクリックされた要素が入っています。それをjQueryによって操作しやすいオブジェクトに変換しているのが$(this)です。この書き方はイベントの登録時などよく使うので確認しておくといいと思います。

上記のコードで、ページ内に存在するすべてのpタグのクリック時イベントにそれぞれ指定した関数が登録されます。

ただイベントは要素ごとに独立しています。ページ内にpタグが３つ存在する場合、そのうちが１つがクリックされたとしても実行される回数は1回のみです。

主要なイベントは以下の通りです。

・マウス：　click、dblclick、mouseenter、mouseleave
・キーボード：　keypress、keydown、keyup
・フォーム：　submit、change、focus、blur
・documentまたはwindow：　load、resize、scroll、unload

またonという関数を使うと以下のような書き方もできます。

$("p").on("dblclick", function() {
    $(this).hide(); // ダブルクリックされたpを非表示にする
});

$("p").on({
    click: function() {
        $(this).show();
    },
    mouseleave: function() { // マウスが要素内から要素外に出たときに一度実行される
        $(this).hide();
    }
});

on関数の引数としてオブジェクトを渡すと、複数のイベントが一度に登録できます。

まとめ

今回はjQueryを簡単に紹介してみました。jQueryを使うと少ないコードでたくさんのことができますね。

・jQueryを使うと要素の操作が簡単
・$を使うと、要素の操作に便利なオブジェクトがもらえる
・$に関数を渡すと読み込み終了時に実行する
・イベントの登録も関数を渡すだけ
・on関数を使うと複数を一度に登録できる