プログラマ視点でみたjQueryの魅力

EC studio EC studio 技術ブログ

EC studio
EC studio 技術ブログ
EC studio 技術ブログの記事一覧

2010年03月09日投稿者：津留奨史

プログラマ視点でみたjQueryの魅力

jQueryは、リッチなUIを簡単な記述で実装できます。

デザイナーにも理解しやすい仕様（そこも魅力の一つ！）なので、
いまやデザイナー向けにjQueryを説明するブログもたくさんありますね。

ただ、完全にデザイナー向けのライブラリなのか？というと、そうでもなく
デザイナーだけではなくプログラマ視点から見ても魅力があるライブラリだと
言えるでしょう。

今回はプログラマ視点でみたjQueryの魅力と感じた点を簡単にまとめてみます。

コードがスマートになる

なんといってもココに魅力を感じます！
細かく言うと以下のものがあげられます。

・要素の操作もシンプル簡単！

jQueryはセレクタを利用して要素を簡単に取得し、
エフェクトの追加やDOMの操作ができます。
（CSSとほぼ同様のセレクタを指定して
簡単にDOMの操作ができるところがデザイナーにも優しいですね！）

これは、記述方法をみていただければよくわかりますので
通常の書き方とjQueryを利用した書き方で比較してみます。

テキスト表示

CODE:

<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
</head>
<body>
<h3>ホームページ支援サービス一覧 (jQueryで色を変更)</h3>
<ul id="hpbackup">
<li>Web Analyst</li>
<li>HP売上プラス</li>
<li>EC DVD</li>
</ul>
<h3>おすすめソフトウェア一覧 (通常のjavascriptで色を変更)</h3>
<ul id="software">
<li>ESET Smart Security</li>
<li>ESET NOD32アンチウイルス</li>
<li>MindManager</li>
<li>Camtasia</li>
<li>Snagit</li>
</ul>
</body>
<script type="text/javascript">
//jQueryで特定の<ul>タグ以下のテキストカラーを変更
$('#hpbackup li').css('color','#00f');
//普通のjavascriptで特定の<ul>タグ以下のテキストカラーを変更
for (i in document.getElementById('software').childNodes){
if (document.getElementById('software').childNodes[i].tagName == 'LI'){
document.getElementById('software').childNodes[i].style.color = '#0f0';
}
}
</script>
</html>

上記のスクリプトは、<li>のテキストカラーを変更しているものです。

比べていただくとわかるように
通常の書き方で書くよりもjQueryを利用した書き方のほうが
明らかにスマートで見やすい書き方なのではないでしょうか！？

・1行でAjax！

なんと１行でAjaxが書けます！

例えば、
同ディレクトリにある sample.phpの出力結果をidがhogeのタグ内に読み込む場合
以下のように記述します。

テキスト表示

CODE:

<div id="hoge"></div>
<script type="text/javascript">
$('#hoge').load('./sample.php');
</script>

これだけです！

AjaxをサポートしているライブラリはExt JSやPrototypeなどがありますが、
いずれもjQueryほどシンプルに実装とはいきません。

本当にこの機能だけでも十分魅力的です。

・メソッドチェーンの利用で重複のないコードに

jQueryを使うと何度も同じ要素を指定する必要がなくなります。

例えば、
指定したタグの中にある文字列と文字色を変更する場合です。

テキスト表示

CODE:

<span id="hoge">メソッドチェーン</span>
<script type="text/javascript">
//毎回、要素の指定をした書き方
$('#hoge').css('color','#FF0000');//色を赤に変更
$('#hoge').html('jQuery');//「jQuery」という文字をタグ内に表示(innerHTMLと同じ)
//メソッドチェーンを利用した書き方
$('#hoge').css('color','#FF0000').html('jQuery');
</script>

上記のように

要素を取得→イベントやスタイルを指定
要素を取得→イベントやスタイルを指定
・・・

といったように、毎回要素を取得して記述する方法より

要素を取得
　→イベントやスタイルを指定
　→イベントやスタイルを指定
・・・

という形で、ひとつの要素を取得したら
取得した要素に対して複数の指定をまとめて行うほうが効率的です。
（実際、処理速度の改善にもなります）
そしてコードもスマート！

同じ処理ならjQueryのメソッドチェーンを利用した記述をおすすめします！

readyが便利すぎる！

jQueryのスクリプトを見るとよくreadyが記述されています。
以下のような記述です。

テキスト表示

CODE:

<script type="text/javascript">
$(document).ready(function(){
//この中に処理を記述
});
</script>

このreadyが実行されるタイミングはDOMの操作を行いやすいので、
実はとても便利なメソッドです。

とはいっても、文字だけで動きの説明は難しいので
具体的に、コードとあわせて説明します。

テキスト表示

CODE:

<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript">
//サイズ変更
$('#book1').width(370).height(600);
</script>
</head>
<body>
<img id="book1" src="http://blog.ecstudio.jp/wp-content/uploads/2010/01/book-185x300.jpg" style="margin: 10px">
</body>
</html>

上記の例では#book1はサイズが変更されません。

これは、HTMLのドキュメント構造が生成される順番を意識せずに
スクリプトを記述しているからです。
上記スクリプトの場合、<img>タグのドキュメント構造が生成されていない状態で<head>タグが読み込まれ、<img>タグに対する処理をしようとしたため
後で生成された<img>タグはサイズが変わらなかったのです。

この問題をreadyを使わずに解決するためには、
onloadイベントを利用することになります。
しかし、onloadを利用しても問題点はあります。

まずはコードをみていただきましょう。

テキスト表示

CODE:

<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript">
function load(){
$('#book1').width(370).height(600);
}
</script>
</head>
<body onload="load();">
<img id="book1" src="http://blog.ecstudio.jp/wp-content/uploads/2010/01/book-185x300.jpg" style="margin: 10px">
</body>
</html>

上記のようにすれば、たしかに画像のサイズは変更されて表示されます。
しかし、実行すれば分かりますが一度画像がレンダリングされてしまったあとの
タイミングでonloadイベントは動く為、
一瞬ですが表示の時にサイズ変更前の画像が見えてしまいます。
(※キャッシュによって２回目からははじめから大きな画像が出ている場合もあります）

この問題を解決するのがjQueryのreadyです。
先に書いたスクリプトを少しだけ変更してreadyを使った書き方に変えてみます。

テキスト表示

CODE:

<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#book1').width(370).height(600);
});
</script>
</head>
<body>
<img id="book1" src="http://blog.ecstudio.jp/wp-content/uploads/2010/01/book-185x300.jpg" style="margin: 10px">
</body>
</html>

こちらのコードを実行してみるといかがでしょうか？
はじめから大きな画像が出ているのではないでしょうか。
もちろん動作はキャッシュを消しても変わりません。
この挙動の秘密はreadyとonloadの実行タイミングの違いにあります。

onloadとreadyの実行タイミングの違いを先にざっくり示します。

●onloadの場合
１、ドキュメント構造完成
↓
２、画像読み込み・レンダリング
↓
３、onloadイベントの実行（今回は画像の操作）

●readyの場合
１、ドキュメント構造完成
↓
２、readyの実行（今回は画像の操作）
↓
３、画像読み込み・レンダリング

このように
onloadの実行タイミングはすべてのドキュメント構造が完成して、
画像の読み込みが行われた後になります。
つまりこの読み込み時点では、画像は小さいままのものになっています。
ところがreadyの場合、ドキュメント構造が完成した直後に呼ばれます。
もちろん画像が読み込まれる前になります。
そのため、先にjavascriptで画像のサイズを変更した後に画像を読みこむので、
はじめから画像はサイズが変更されているものが表示されるように見えるのです。

以上のことから
readyを利用することでドキュメント構造の生成順番をそれほど意識する必要がなく
<head>タグ内にもDOMの操作を行うスクリプトを記述できるのです。

実はこのreadyの実行タイミングはDOMContentLoadedというイベントを利用すればFireFoxなどでは同じ動きのものが実現できます。
しかし、Internet ExplorerではDOMContentLoadedが存在しません。
そのため、同じような挙動をさせるには別の方法で実装する必要があります。

jQueryはブラウザ間の違いを吸収してくれるクロスブラウザなライブラリなので、
どのブラウザでもreadyを利用するだけで同様の挙動を実現することができます。
（ブラウザに依存しないところもまたひとつのメリットであると言えるでしょう。）

readyを利用するとブラウザの問題やドキュメント構造の構築タイミングを
考慮する必要がなくなるので安心してスクリプトを記述できます！＾＾

以上、触ってみてプログラマ視点で魅力的に感じた部分を上げてみました。
もし、まだ利用されていないという方でしたらぜひ使ってみてはいかがでしょうか！？

こちらでダウンロードできます。
http://jquery.com/