jQueryとは――Webデザイナーから見た魅力 (2/3)

2009年07月15日　08時00分更新

文●西畑一馬／to-R

ツイートする

サンプルコードに見るjQueryの手軽さ

　jQueryの最大の特徴は、通常のJavaScriptとは異なる方法でJavaScriptの命令を記述できることです。JavaScriptの記述には多くの手続きを必要としますが、jQueryを利用すれば非常に短いコードで済みます。また、CSS（Cascading Style Sheets）にとても近い記述方法を採用しており、CSSが分かるWebデザイナーやマークアップエンジニアが比較的簡単に習得できるように設計されています。

　実際にjQueryで記述されたサンプルを見てみましょう。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>アコーディオンパネル</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

$(function(){
$("dd:not(:first-child)").css("display","none")
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$(this).siblings("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
})
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
dl{
width:400px;
margin:50px auto;
}
dl dt{
background:#7CADB6;
border-bottom:1px solid #FFFFFF;
cursor:pointer;
}
dl dd{
border:1px solid #7CADB6;
border-top:none;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<dl>
<dt>テキスト1</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト2</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト3</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
</div>
</body>
</html>

　これは、最近のWebサイトでおなじみのアコーディオンパネルのUI（ユーザーインターフェイス）を実装したサンプルです（サンプルページ）。script要素内に記述されているのがjQueryの命令です。たった9行しかありません。そのうち3行は閉じ括弧ですので、実質的にはわずか6行でアコーディオンのUIが作成できてしまいました。もしこのアコーディオンをjQueryを使わずにJavaScriptだけで記述しようとすれば、途方もない行数になってしまいます。jQueryを使えば極めて短いコードでダイナミックな表現が実現できるのです。

　また、記述されているコードも、とても理解しやすいものです。ソースコードの詳しい解説は今後の連載に譲りますが、ここでは2行目のコードにだけ着目してみましょう。


$("dd:not(:first-child)").css("display","none")

　このコードは、「最初(:first-child)以外(:not)のdd要素のCSSのdisplayプロパティの値をnoneにする」ということを表しています。「dd:not(:first-child)」の部分が少しややこしいですが、これはCSS3で利用できるセレクタの文法です。jQueryはCSS1から3までのセレクタをサポートしているので、HTMLとCSSの予備知識がある方なら、文法さえ覚えてしまえばすぐに記述できるようになるでしょう。

前へ 1 2 3 次へ