jQuery入門
jQueryとは
JQueryは、John Resig氏が2006年1月 に発表した、オープンソースのJavaScriptライブラリです。その後、最初の正式な安定版「jQuery1.0」が同年8月にリリースされ、依頼、着実にバージョンアップが行われてきました。MITライセンスは非常に制限の緩いBSDスタイルのライセンスで、利用・改変・再配布を自由に行えます。MITライセンスに従う限りは、jQueryを利用したアプリケーションに対してもソースコードの公開が義務付けられるといったことはありませんので、商用アプリケーションでも安心して組み込めるでしょう。jQueryの第一のテーマは「Write Less Do More」つまり、「書くコードは少なく、できることは多く」を目指しています。
jQueryとJavaScriptでは以下のコードくらい違います。
let foo = document.getElementById('foo');jQueryでは、次のように書きます
let foo = $('foo').get(0);アプリケーション開発者が記述するコード量が減れば、その分、バグが発生する可能性や、無駄な通信・無駄な処理を減らせ、結果的にアプリケーションの質の向上につながります。また、jQuery自体、構造がとてもシンプルで軽量に作られているので、導入の敷居が低いとう特徴もあります。開発者にとっては、習得が容易で拡張もしやすく、なかつそこそこ高速に動作する点がjQueryに人気を集める要因になりました。また、jQueryはAjaxアプリケーションを構築するために必要な機能を豊富に揃えており、整理された使いやすいAPIとして提供してくれます。
jQueryを使う理由
とはいえ、React.jsやVue.jsという新しい優れたフレームワークも登場しています。「jQueryの役目は終わった」という人もいます。React.jsやVue.jsは「仮想DOM」という仕組みを使って、従来のDOM操作よりも高速にページを描画できるように作られています。また、仮想DOM上のデータと実際の表示は常に繋がっているので、データを書き換えれば表示も瞬時に変更されます。つまり、こっらのフレームワークではWebブラウザの画面上への描画をフレームワーク任せにできるので、プログラムの保守性や可読性も向上できるメリットがあります。一方、jQueryのデメリットとしては、「簡単に書ける」という大きな特徴が裏目に出る可能性があるでしょう。プログラミングにそれほど精通していなくてもとりあえず動くものが作れるというのは大きな利点ですが、それを積み重ねていくと、いつの間にか誰にも読めない、直せないプログラムができあがってしまうかもしれません。jQueryを利用して書かれたアプリケーションも、長く使われていくうちに保守性が維持できないとう問題が顕在化してきたということです。さらに、各ブラウザもECMAScriptの標準に従ってスクリプトを解釈するようになってきたため、昔のようにブラウザごとに動きが異なるということも少なくなりました。jQueryが担ってきた「ブラウザごとの差異の吸収」という枠目は、かつてほど重大なものではなくなっています。しかし、jQueryを学習してきた開発者の数は、新しいフレームワークを習得した開発者よりも圧倒的に多いので、アプリケーション開発の現場において、開発者のアサインがしやすいというメリットはあります。
今後、新たにフルスクラッチで開発するアプリケーションや規模が大きなシステムでは、React.jsやVue.jsを採用するほうがよいでしょう。ただし、期間限定で掲載されるランディングページや、一般にペライチと呼ばれるようなシンプルで簡易なWebページ制作の場合は、誰でも扱えるjQueryを採用するがよいでしょう。
jQuery3について
jQuery3では、次の機能追加や整理、性能向上などの改善が行われました。
DeferredとPromises/A+標準
大きな変更として、Deferredモジュールが「Promises/A+」互換になりました。Deferredは、jQuery1.5で導入された非同期処理のための機能です。複数の処理を連続して非同期に実行する場合、それぞれの処理のコールバックが複雑に絡んでネストが深くなり、エラーハンドリングが難しくなったり、コードの可読性が著しく低下したりといった問題が起きやすくなります。jQueryのDeferredは、「処理Aが成功したら処理Bを執行する、失敗したら処理Cを実行する」といった制御を、わかりやすく、読みやすく記述できるようにしてくれます。また、Promises/A+はコミュニティによって定義された非同期、並列処理の標準仕様です。JQuery3では、DeferredがこのPromises/A+標準、およびPromises/A+に準拠したES2015のPromisesと互換性を持つように変更されています。
JQuery1/JQuery2からの移行
バージョン３以前のJQueryは、Internet Explorer8以前もサポートするバージョン1、InternetExplorer9以降に限定して高速化したJQuery2の２つのバージョンが並行して利用されている状況でした。JQuery3ではJQuery1とJQuery2が一本化されたので、JQueryを利用しているアプリケーションは、それがJQuery1、JQuery2いずれでもJQuery3へ移行が推奨されます。移行にあたっては「JQueryMigrate」と呼ばれる移行用のプラグインが利用できます。
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.1.0.js"></script>Webブラウザで根ページを開くと、WebブラウザコンソールにJQuery3での問題のあるコードについて警告されます。警告の内容を確認して、ひとつひとつ修正します。
スリムビルド
JQuery3では、利用目的に沿って軽量化された「スリムビルド」も利用可能になりました。スリムビルドはJQueryからAjaxやエフェクトの機能を取り除くことでJQuery本体を軽量化しています。Ajaxもエフェクトも使わないアプリケーションで、DOM操作のためだけにJQueryを使いたい場合などは、スリムビルドを利用することで多少高速することができます。
主要なブラウザの対応
デスクトップブラウザ
- Chrome
- Edge
- Safari
- Opera
- Firefox
モバイルブラウザ
- Android4.0以降
- Safari/iOSのバージョン7以上
JQueryのメソッド
JQueryで使用することができるセレクタやメソッドは、公式サイトのページで確認することができます。
JQueryの入手
公式サイト：https://jquery.com/
公式にサイトにアクセスし、トップページの赤枠のバナーをクリックします。
ダウンロードページが開きます
配布されているJQueryにはフルスペック版とスリムビルド版があります。
PRODUCTION（compressed）
本稼働に適した形式です。コードの空白や改行が除去されてサイズが小さくなっていますが、人間が読むのはかなり困難です。
DEVELOPMENT（uncompressed）
JQueryのコード自体を読みたい人や、ローカルPC上での開発向けの形態です。コードが整形され読みやすくなっています。
PRODUCTIONは80数キロバイト、DEVELOPMENTは280数キロバイトと、ファイルサイズが大幅に異なります。本番環境では軽量なPRODUCTIONを使用します。また、.map拡張子が付いたmapファイルというものもありますが、ソースマップと呼ばれるものでPRODUCTION版のJQueryのように小さくコンパイルされたファイルと元のソースファイルを紐づけておくものなので、特に必要ありません。
JQueryの導入
本体をダウンロードして設置する方法
ブラウザでは、基本的に上から下にかけてスクリプトを読み込んでいきます。したがって、jQueryの処理を実行するためには、先にjQuery本体が読み込むように上位に設置します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストページ</title>
<script src="js/jquery-3.7.1.min.js" ></script> //JQuery本体
</head>
<body>
<h1>jQuery</h1>
<button>jQuery</button>
</body>
</html>CDNを利用する方法
CDN（Contents Delivery Network）上で提供されるjQueryを利用すれば、自分のアプリケーション内にjQueryのファイルを配置する必要もありません。次のURLにアクセスします。
表示されるリンクの中から、jQuery3.x→minifiedをクリックします。「Code Integration」ダイアログボックスが表示されたら右側の青い「copy to clipboard!」ボタンをクリックします。jQuery本体を読み込むためのコードがコピーされるので、対象のHTMLファイルに設置します。
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>jQueryのスクリプトを実行してみる
ボタン名がボタン→Clickに変更されていれば成功です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストページ</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<script>
$(function(){
$("button").html("Click");
});
</script>
<h1>jQuery</h1>
<button>ボタン</button>
</body>
</html>jQueryオブジェクト
jQueryは、他のJavaScriptライブラリと比較しても、構造がシンプルなのが特徴です。jQueryのすべての機能は、１つのオブジェクト「jQuery」から派生する形で定義されています。HTMLのドキュメント構造であるDOM要素やCSSスタイルといったデータ（プロパティ）、及びそのデータに対してさまざま操作を行う処理手段（メソッド）が、すべてjQueryオブジェクトとしてひとまとめにされているということです。また、jQueryオブジェクトのほとんどのメソッドは、戻り値としてjQueryオブジェクトを返します。つまり、jQueryの世界では、あるメソッドを呼び出し、返される値からまた別のメソッドを呼び出すメソッドチェーンと呼ばれる手法で処理を連続的に記述できるわけです。
jQueryの別名「$」
文字列の先頭と末尾にある不要な空白を除去したい場合、jQueryではtrim()メソッドを使って、次のようにします。
var str =" 前後の空白 ";
str = jQuery.trim(str);jQueryオブジェクトの「trim」メソッドなので、JQuery.trimと書きますが、毎回JQuery.〇〇とするのは大変なので、$で置き換えることができます。
str = $.trim(str);JavaScriptの実行タイミングとJQueryのreadyメソッド
JQueryを含むJavaScriptのコードはScript要素の中に記述する必要がありますが、WebブラウザーはHTMLファイルをファイルの先頭から１行ずつ読み込んでおり、script要素が読み込まれた段階で、script要素内に記述された命令を実行します。head要素内のscript要素にbody要素内のHTMLを操作するための命令を書いても、ブラウザ－がまだscript要素までしか読み込んでいないため、要素を操作できません。そこで、スクリプトの実行タイミングを制御するのが、「ready」というJQueryメソッドです。
$(document).ready(function(){
ここにJQueryの処理を記述
});このとき、readyメソッドの内側に書かれている命令は、HTMLの読込が終わった後に実行されます。readyメソッドは、以下のように省略形でも使用できます。
$(function(){
ここにJQueryの処理を記述
});JQueryでスクリプトを書くときは、ほとんどの場合、まずreadyメソッドを記述し、その内側に実際の命令を記述していきます。
WordPressとJQuery
WordPressを使ったブラぐサイトなどでも、JQueryは良く利用されています。WordPressではデフォルトでJQueryが組み込まれているので、JQueryの機能を使えます。テーマ内でヘッダ部を担当する「header.php」でWordPressの「wp_head()」関数が呼び出され、そのタイミングでJQueryがロードされますので、それ以降の場所であればJQueryを使ったスクリプトを動かせます。しかし、WordPressのJQueryでは、そのままだと「JQuery」の代わりに「＄」を使うことが出来ません。これは、WordPressのJQueryでは他のJavaScriptライブラリと衝突しないように「JQuery.noConflict()」メソッドが実行されるようになっています。
そこで、WordPress環境下でJQueryコードを書く場合は、次のように「JQuery(function($)){~};」で囲みます。
jQuery(function ($) {
var str =' 前後の空白 ';
str = $.trim(str);
});別な書き方
jQuery(document).ready(function ($) {
var str =' 前後の空白 ';
str = $.trim(str);
});JQuery基本文法
JQueryの構文は、「セレクタ」と「メソッド」及びその「引数」で構成されています。
$(セレクタ).メソッド（引数）;例では、buttonがセレクタ、htmlがメソッド、Clickがその引数になります。
$("button").html("Click");行頭の$マークは、JQueryのコードであることを示す識別子です。
複数の引数を指定する
メソッドの中には、引数を一度に複数指定できるものがあります。複数指定する場合は、引数を半角カンマで区切ります。
$(セレクタ).メソッド(引数,引数・・・);$("button").css("background",##000033#);引数の用法によるメソッドの振る舞いの違い
引数の数や書式によって振る舞いが変わるメソッドがあります。
//引数あり：指定したセレクタの内容を変更
$(セレクタ).html(変更内容);
//引数なし：指定したセレクタの内容を取得
$(セレクタ).html();引数に関数を指定する
あるメソッドの処理中に、さらに別のメソッドの処理を行うときなどに、関数が引数として用いられます。
$(セレクタ).メソッド(関数);クリック時の処理を実行するclick()メソッドの引数として、関数「function(){}」を指定します。
$("button").click(function(){});thisを使った効率の良いJQueryの書き方
引数に関数を使ってスクリプトが入れ子構造になっている場合、セレクタを「this」に置き換えて、親のセレクタを参照することができます。
$(function(){
$("button").click(function(){
$("button").html("Click");
$("button").css("background","#000033");
});
});以下のように書き換えることができます。
$(function(){
$("button").click(function(){
$(this).html("Click");
$(this).css("background","#000033");
});
});メソッドチェーン
メソッドチェーンは１つのセレクタに対して複数のメソッドを連結する書式です。スクリプトが簡略化され、同時に処理も速くなります。
$(function(){
$("button").click(function(){
$(this).html("Click").css("background","#000033");
});
});jQueryのコア・オブジェクト
セレクタを用いてDOM要素の集合を取得する
書式
jQuery(' セレクタ ', ['検索対象'])
$(' セレクタ ', ['検索対象'])var elements = jQuery('#div1');
var elements = $('#div1');ドキュメントから検索条件にマッチする要素を取得して、JQueryオブジェクトとして返します。第1引数は、セレクタを含む文字列を使って検索式を指定します。第2引数には、DOM要素やjQueryオブジェクトを指定することで、検索する範囲を限定できます。第2引数を省略した場合、検索対象は現在のHTMLドキュメント全体になります。
HTML文字列からjQueryオブジェクトを生成する
jQuery(' HTML文字列 ',[' ドキュメント '])
$(' HTML文字列 ', ['ドキュメント'])var elements = jQuery('<span>this is a test.</span>');
var elements = $('<span>this is a test.</span>');HTML文字列から、即座にjQueryオブジェクトを生成します。第1引数は、HTML文字列を指定します。第1引数は、HTML文字列を指定します。「$()」に文字列が渡されたとき、jQueryはその文字列がHTMLで書かれている（つまりタグで始まっている）かどうかを検証し、HTMLだと判断したときはそのHTMLから「$.parseHTML()」メソッドを通してDOMツリーを生成し、jQueryオブジェクトとして返します。HTMLではないと判断したときは、「セレクタが渡された」と解釈します。
サンプル
１、現在のドキュメントに<div>要素を追加する。
$('<div>追加します</div>').appendTo('body');２、イメージのalt、src、classを指定して生成し、現在のドキュメントに追加する。第2引数には$.attr()メソッドで指定できるプロパティをまとめてオブジェクトとして渡せる
$('<img>',{
"alt":"cat",
"src":"sample.jpg",
"class":"photo"
}).appendTo('body');３、画像にマウスカーソルが重なったらアラートを表示するようイベントのコールバックを指定する。さらに、追加する要素に対するイベントとコールバックもオブジェクトとして指定できる。
$('<img>',{
"alt":"cat",
"src":"sample.jpg",
"class":"photo",
on: {
mouseenter: function(event){
alert("meow");
}
}
}).appendTo('body');
DOM要素からjQueryオブジェクトを生成する
jQuery( DOM要素 )
$( DOM要素 )var myBody = jQuery(document.body);
var myForm = $(document.forms[0].elements);DOM要素からJQueryオブジェクトを生成します。引数として渡すのは、単一の要素でも複数の要素でもかまいません。
サンプル
body要素をjQueryオブジェクトとして取得し、cssメソッドで背景色を変化させる。
$(document.body).css('backgroundColor','#dddddd');$(document).on(‘load’)と$(document).ready()
「ページがブラウザにロードされたら処理を実行する」という場合、$(document).ready()の他に「$(window).on(‘load’)」を利用することもあります。
$(window).on('load', function(){
ページがロードされたときに実行する処理
});どちらも同じように見えますが、実はそれぞれに実行のタイミングが異なります。「$(document).ready()」は、HTMLが読み込まれてDOMツリーの準備ができ次第実行されますが、「$(window).on(‘load’)」は画像などページ内の要素の読み込みが完了してから実行されます。
例えば、ページ内の画像の高さや幅を取得したい場合は、「$(document),ready()」では画像が読み込まれる前に処理がスタートしてしまい、正しい値が取得できない場合があります。
例：
<script>
$(window).on('load', function(){
var width = $("img").width();
console.log(width);
});
</script>なお、以前は同様の処理に「$(window).load()」が利用可能でしたが.load()はjQuery1.8で非推奨になり、3.0で廃止されています。「$(document).ready()」も、JQuery3.0で処理されるタイミングが変更されています。以前のバージョンのjQueryでは「$(document).ready()」の処理が追加される時点とページが読み込まれてDOMツリーの準備ができる時点の前後によって動作が一貫していませんでした。しかし、JQuery3.0でPromises/A+標準に従うように変更されたため、「$(document).ready()」も常に非同期的に呼びされるようになりました。
readyイベントの保留
「$(document).ready()」イベントを保留しておくこともできます。例えば、jQueryプラグインなど追加のスクリプトを読み込むまで.ready()の実行を待機させておきたければ、次のように.holdReady()メソッドを利用します。
$.holdReady(true);待機を解除したいタイミングで、次のように.holdReady()メソッドを呼び出します。
$.holdReady(false);このように.holdReadyメソッドの引数に「true」を渡せば待機、「false」を渡せば「待機解除」で.ready()が実行されます。
readyイベント時のエラー
jQuery3.1以降では、.ready()時に発生したエラーに対して、.readyException()メソッドを使って独自にアクションを記述できるようになりました。例えば.ready()時のエラーをコンソールに出力する場合は、次のようにします。
$.readyException = function(error) {
console.log(error);
}他のJavaScriptライブラリとの共存
jQueryを$で短縮形として使用していますが、他のJavaScriptライブラリと同時に使うケースでは競合することがあります。その場合は、短縮形を使わず「jQuery」と記述するか、次の回避方法を使います。
他のライブラリの動作がおかしい場合などは、jQueryを使って記述するスクリプトの先頭で
jQuery.onConflict();を実行し、他のライブラリが定義した「$」の動作を、jQueryが邪魔しないようにします。なお、jQuery.noConflict()メソッドでは、「$」以外の文字をjQueryの短縮形として割り当てることも可能です。
var j= jQuery.noConflict();とすると、以後「$」の代わりに「j」がjQueryの短縮形を表すことになります。
jQueryオブジェクトのプロパティ
jQuery.fx.off
アニメーションエフェクトの有効・無効を切り替えるためのプロパティです。
.length
jQueryオブジェクトの持つ要素数を保持します。.size()メソッドは、これと同じ値を繰り返します。
.ready
ページが「ready()」状態になったかどうかを値として保持しているプロパティです。jQuery3.0で追加された「.when()」「.then()」メソッドと一緒に使えば、Promiseな書き方に近づけて読みやすいコードが書けます。
$.when($.ready).then(function(){
readyになったら実行する処理
});