連載:改造WebアプリケーションUIビフォー/アフター

第2回 Webアプリ改造の前に「速習! jQuery/jQuery UI」

葛西秋雄
2010/03/05
Page1 Page2 Page3

はじめに

 前回では、ASP.NETのデータ・コントロールを利用した3階層のWebアプリケーションである「ITブック」を紹介しました。今回は第3回の準備編として、jQueryのAPIとjQuery UIのプラグインの使い方をざっくり理解していただきます。

jQueryのHello World

 jQueryは、米国のJohn Resig氏が中心となって開発したJavaScriptのライブラリです。わずか数行のコードを記述するだけでアニメーションなどのエフェクトをWebアプリケーションに組み込むことができます。

 jQueryはDOM(Document Object Model)の要素を検索したり、属性を書き換えたりするためのAPIを豊富に用意しています。また、これらのAPIを利用してコミュニティが作成したjQuery用のプラグインがたくさん公開されています。

 「jQuery UI」は、ユーザー・インターフェイスに特化したjQueryのプラグインの1つで、Accordion、Datepicker、Dialog、Tabsなどの機能が含まれています。

■jQueryのreadyイベントを理解する

 JavaScriptはインタプリタ型の言語ですから、ブラウザがJavaScriptのコードを検出した時点で解読して逐次実行されます。

 例えば以下のリスト1のように、<head>要素に<script>要素を追加して、「document.getElementById('msg').innerHTML = '……';」のようなコードを記述すると、ブラウザはこのコードを読み込んだ時点で解読して実行します。ところが、このgetElementByIdメソッドで参照している“div#msg要素”は、<body>要素に定義されているため、まだ読み込まれていません。このためdiv#msg要素が見つからないといった問題が発生します。

<head>
<script type="text/javascript">

  // この時点では、div#msg要素がまだ読み込まれていないため
  // 見つからない
  document.getElementById('msg').innerHTML = '<b>Hello World!</b>';

</script>
</head>

<body>
  <div id="msg"></div>
</body>
リスト1 要素が見つからないためエラーとなるJavaScript

 この問題を回避するには、JavaScriptのコードをwindowオブジェクトのonloadイベントに記述します(リスト2)。このonloadイベントは、HTMLのすべての要素がレンダリングされて、かつイメージなどがロードされた後に実行されます。つまり、div#msg要素がレンダリングされてDOMが生成されていることが保証されます。

window.onload = function() {
  // DOMがすでに生成されているのでdiv#msg要素が見つかる
  document.getElementById('msg').innerHTML = '<b>Hello World!</b>';
}
リスト2 onloadイベントに記述したJavaScriptコード

 jQueryでは、windowのonloadイベントに相当するものとして、readyイベントがあります。これによりリスト2と同等のコードを次のように記述できます。

$(document).ready(function() {
  $('#msg').html('<b>Hello World!</b>');
});
リスト3 jQueryのreadyイベントで記述したJavaScriptコード

 ただし、イメージがロードされる前に実行されるといった違いがあります。つまり、onloadイベントよりreadyイベントが先に実行されます。例えば、readyイベント・ハンドラで、<img>要素のwidth、heightなどのプロパティを参照するときは、イメージが完全にロードされているかを確認する必要があります。

 jQueryのreadyイベントは、省略して次のように記述することができます。以降、本稿では省略形で記述します。

$(function() {
  $('#msg').html('<b>Hello World!</b>');
});
リスト4 readイベントの省略形

 なお、jQueryのAPIを利用するには、<head>要素に<script>要素を追加してjQueryのライブラリを組み込む必要があります。本連載では以下のリスト5のように、jquery.comからライブラリをダウンロードする代わりに、GoogleのCDN(Content Delivery Network)を利用しています。CDNについては、「jQueryプラグイン実践活用法」で解説していますので参照してください。

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
リスト5 GoogleのCDNによるjQueryの読み込み

■セレクタとメソッド・チェーンを理解する

 jQueryでDOMの要素を検索するにはセレクタを使用します。jQueryのセレクタは、CSSのセレクタと互換性がありますので、すでにCSSの経験のある方は短時間で使いこなせるはずです。

 例えば、<div>要素を検索するには、セレクタにタグ、ID、クラスなどが指定できます。

$('div').html('<b>Hello World!</b>');  // セレクタにタグを指定
$('#msg').html('<b>Hello World!</b>'); // セレクタにIDを指定
$('.msg').html('<b>Hello World!</b>'); // セレクタにクラスを指定

……中略……

<div id="msg" class="msg"></div>
リスト6 セレクタによる<div>要素の検索

 jQueryのAPIは、戻り値として自分自身を返しますので、セレクタでdiv#msg要素を検索した後に、cssメソッドで前景色やフォント・サイズを書き換えるときには、メソッドを「.」でチェーンさせることができます。これでかなりコードが節約できます。

$('#msg')
  .html('<b>Hello World!</b>') // div#msgに「Hello World!」を格納
  .css('color', 'red')         // div#msgの前景色を「赤」にする
  .css('font-Size', '20px');   // div#msgのフォントを「20px」にする
リスト7 cssメソッドとメソッド・チェーンを使った記述例

■要素をアニメーション化するには

 div#msg要素のスタイルシートを変えるには、前出のcssメソッドで可能ですが、CSSの複数のプロパティを一括して変更するには適していません。

 例えば、color、background-color、font-size、widthなどのプロパティを一括して書き換えるには、CSSのクラス「.red」を宣言しておき、addClassメソッドで要素にクラスを適用します。

.red {
  color: Yellow;
  background-color: Red;
  font-size: 20px;
  width: 100px;
}

……中略……

// div#msg要素にCSSのクラス「.red」を追加する
$('#msg').addClass('red');

……中略……

<div id="msg">Hello World!</div>
リスト8 addClassメソッドによるCSSクラスの適用

 div#msg要素のスタイルシートを書き換えるときにアニメーション化するには、jQuery UI*1のaddClassメソッドを利用します。jQuery UI版のaddClassメソッドは、第2引数にdurationを追加して、ミリ秒単位で時間を指定できます。

*1 jQuery UIを利用するには、jQuery UIのライブラリとテーマ(CSS)を追加する必要があります。詳細は、後述の「jQuery UIのプラグインをざっくり理解する」で説明します。

addClass(class, [duration])
jQuery UI版addClassメソッドの構文

 前出のaddClassメソッドにdurationを追加すると、3秒かけてCSSを段階的に書き換えます。

$('#msg').addClass('red', 3000);

 CSSのfont-size、width、heightなどのプロパティを書き換えるときは、animateメソッドを利用すると、きめ細かく制御できます。

 リスト9では、animateメソッドにより、font-sizeとheightプロパティの値(10px、25px)を、3秒かけて(50px、60px)に書き換えています。jQueryは、animateメソッドが実行されると、div#msg要素にstyle属性を追加して、font-sizeとheightプロパティを段階的に書き換えます(図1)。

#msg {
  font-size: 10px;
  height: 25px;
  width: 250px;
  color: #000;
  background-color: #ccc;
}

……中略……

$('#msg').animate({
    fontSize: '50px',
    height: '60px'
  }, 3000);
});

……中略……

<div id="msg">Hello World!</div>
リスト9 animateメソッドによるアニメーション


図1 div#msg要素にstyle属性が追加されてfont-sizeとheightプロパティが段階的に書き換えられているところ
(FirefoxのアドオンFirebugで確認)

 jQuery UIのanimateメソッドを利用すると、color、background-colorなどのプロパティも書き換えることができます。この場合、jQueryはdiv#msg要素にstyle属性を追加してcolorとbackground-colorプロパティにrgbメソッドを設定し、Red、Green、Blueの値を段階的に書き換えます(図2)。

#msg {
  width: 250px;
  height: 25px;
  color: #000;
  background-color: #ccc;
}

……中略……

$('#msg').animate({
    color: 'yellow',
    backgroundColor: 'red',
    fontSize: '50px',
    height: '60px'
  }, 3000);
});

……中略……

<div id="msg">Hello World!</div>
リスト10 jQuery UIのanimateメソッドによるアニメーション


図2 colorとbackground-colorのrdbメソッドの値を段階的に書き換えているところ
(FirefoxのアドオンFirebugで確認)



 INDEX
  改造WebアプリケーションUIビフォー/アフター
  第2回 Webアプリ改造の前に「速習! jQuery/jQuery UI」
  1.jQueryのHello World
    2.jQueryのイベントを理解する
    3.jQuery UIのプラグインをざっくり理解する

インデックス・ページヘ  「改造WebアプリケーションUIビフォー/アフター」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

業務アプリInsider 記事ランキング

本日 月間
ソリューションFLASH