jQueryって何?
jQueryは、JavaScriptを効率よく書くための拡張ライブラリです。prototype.jsを見たJohn Resig（ジョン・レッシグ) が、「俺ならもっと効率的に書けるよ！」と開発を始め、2006年8月にVer1.0が公開されました。prototype.jsと同じく「$」という関数名を使用しているため、jQueryとprototype.jsを同時に使用しようとするとバッティングが起こります。(バッティングさせない記述方法もあります。)ライセンスはMITライセンスとなっており、ライブラリの著作権表示を消さなければ、商用・非商用を問わず、誰でも自由に利用することが出来ます。
一つ注意していただきたいのは、jQuery自体はUIコンポーネント(Webアプリの画面を作るための部品)ではなく、コーディングをより効率化するためのライブラリであるという点です。jQueryを使った代表的なUIコンポーネントには、PCブラウザ用のUIコンポーネントである「jQueryUI」や、モバイルブラウザ用のUIコンポーネントの「jQueryMobile」などがあります。他にもBootstrapやjqPlotなど有償、無償を含め、いろいろな物がリリースされています。
【UIコンポーネント一例】
| ライブラリ(プラグイン) | 機能 |
| jQueryUI | PCブラウザ用のUIコンポーネント |
| jQueryMobile | モバイルブラウザ用のUIコンポーネント |
| Bootstrap | レスポンシブデザインのためのUIコンポーネント |
| jqPlot | チャートを書くためのUIコンポーネント |
$って何？
jQueryを解説しているサイトを見ると、こんな書き方がされています。
//書き方1
jQuery(function($){
$("#color_div").css("color","red");
})
//書き方2
$(function($){
$("#color_div").css("color","red");
})
書き方1も書き方2も同じ処理です。最初にある「jQuery」や「$」って何でしょう？簡単に言うと、関数とかクラスだと思えば良いでしょう。正式名はjQueryですが、別名(エイリアス名)として$という記述でも使えるようになっています。「$」という名前の関数と聞く、何か変な感じがしますが、JavaScriptでは$という記号だけの名前を持った関数が作れるのです。(LotusScriptでは$という記号だけの関数は作れませんね。)どっちで書いても同じなので、処理の部分を下記のように書いても動作します。
jQuery("#color_div").css("color","red");
動作は同じになりますが、jQueryと書くのと$と書くのでは、文字の数に応じて通信量が変わってくるので、普通は$と書いた方が良いでしょう。
$(function($){って本当に必要？(onLoadイベントとの違い)
まず標準的なHTMLの動作としてはどうなるかを解説します。$(function($){は正式に書くと下のように記述することが出来ます。
$(document).ready(function($){
//ここに処理を書く
});
こう記述すると、「何がしたいのか？」がわかりやすくなりますね。ドキュメントが読み込まれて「DOMが構築されたら処理が実行する」という動作になります。これに似た処理として<body>タグのonLoadイベントがあります。じゃぁ、onLoadイベントでも良いんじゃね？という話になるのですが、ところがギッチョン!それは違います!
$(function($){はDOMが構築された時点で実行されますが、onLoadイベントは画像など、すべてのリソースが読み込まれてから実行されます。用途にもよりますが、基本的には$(function($){の中に記述した方がパフォーマンス的に有利となります。
XPagesの場合はどうなる？(dojoとの共存)
では、XPagesに実装した場合の動作はどうなるのでしょう？実験してみるとわかりますが、$(function($){と、XPagesのonClientLoadイベントはほぼ同時に実行されます。(正確にはonClientLoadが少し先に実行されます。)これはデフォルトでXPagesに読み込まれているdojoが「DOMが構築されたら処理が実行される」という動作を実現してくれるためです。なので、XPagesに組み込まれているdojoとjQueryを併用した場合、$(function($){は「なくても動作する」ということになります。
例えば、XPageのソースタブに下記のソースを書いてみると、どちらも同じ動作になります。個人的にはページの読み込み時に実行する場合は書き方1、それ以外のボタンのイベントなど(DOM構築後)に記述する場合は書き方2で良いかなと思います。(標準的なHTMLを学んできた人にとってもわかりやすい。)
//書き方1
＜script＞
$(function($){
$("p").css("color","red");
});
＜/script＞
//書き方2
＜script＞
$("p").css("color","red");
＜/script＞
実験結果
下記のようなソースをXPagesのソースタブに書き込み、init1()をXPagesのonClientLoadイベント、init2()を<body>タグのonLoadイベントで実行すると、結果はアニメgifのようになります。(読込をわかりやすくするために大きな画像をXPages上に配置しています)コンソールには、現在の時間をミリ秒で出力しているので、どの順番で処理が実行されているかがわかります。
＜script＞
$(function(){
console.log("jQuery function");
console.log(+new Date());
});
function init1(){
console.log("onClientLoad");
console.log(+new Date());
}
function init2(){
console.log("body onLoad");
console.log(+new Date());
}
＜/script＞
おまけ：dojoを読み込ませないようにするには
dojoを読み込まないXPagesアプリを作るには、パッケージエクスプローラでアプリケーションを開き、「xsp.properties」のSourceタブに下記のコードを追記します。
xsp.client.script.libraries=none xsp.theme=＜empty＞
これでdojoを使わず、心置きなくjQueryだけでXPagesアプリを作ることが出来ます。が、あまりオススメしません。XPagesのイベントを始め、dojoを使ってるコンポーネントはすべて動作しなくなります。素のHTMLで記述する形になりますので、使いどころとしてはWebデザイナーさんとコーダーさんにCOOLなデザインのWebページを作って貰って、それをXPagesアプリに転用したい場合などに限られるのではないかと思います。
次回予告
次回は夏期集中講座第2弾として、jQueryの四段活用について解説します。
