はじめに
近ごろのブラウザは、パフォーマンスの面でも開発ツールや互換性の面でも大きく向上しています。大部分のWebサイトは依然としてページパラダイムに固執し、自らのコンテンツを新聞や書籍と同じような感じで表現していますが、今日のブラウザは伝統的なデスクトップアプリケーションに引けを取らない高度に対話的なアプリケーションをサポートすることができます。
これまでのアプリケーション開発の歴史では、複雑な対話や高度に視覚的な対話を実現しようとする開発者は、ユーザーのPC上に置かれるデスクトップアプリケーションとして実装するか、Flashのようなブラウザプラグインの上に構築されるアプリケーションとして実装するかの選択を強いられました。今日のJavaScriptは、こうした高度なアプリケーションもサポートできるほど進歩を遂げています。パワフルなJavaScriptライブラリが提供する抽象層は、ブラウザの互換性のなさや低レベルの実装の詳細を吸収します。これらのライブラリによって、ユーザーにおなじみの操作（例えばビジュアル要素のドラッグアンドドロップや選択、移動、あるいはパン、ズーム、マウスジェスチャなど）を実現するインターフェースを容易に設計できます。
本稿では、こうしたJavaScriptライブラリの力を借り、JavaScriptとjQueryを使って新しいタイプのWebアプリケーションを作成する方法を具体例で示します。jQueryは、ブラウザの互換性の問題を吸収し、CSSセレクタとメソッド連鎖に基づいた便利なインターフェースを提供する人気のJavaScriptライブラリです。本稿のダウンロードファイルには、多機能のデスクトップアプリケーションを模したサンプル（こちらのYouTubeビデオを参照）と、完全なソースコードが収録されています。
Webアプリケーションの基礎としてJavaScriptを使用することの利点については、以前の記事を参照してください。
jQueryの概要
WebアプリケーションでjQueryを使用するために必要なことは、HTMLコードの中にJavaScriptファイルを1つ取り込むことだけです。これにより、DOM（Document Object Model）を操作し、CSSセレクタを使ってページの対象部分を指定し、合致する要素をすべて修正するミューテータメソッドを適用することができます。基本的な例を次に示します。これは、Webページの最初のパラグラフの背景色を変更するコードリストです。
<html>
<head>
<script src="lib/jquery-1.2.6.js" ></script>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<script>
$(document).ready(function() {
$('p:first').css('background-color', 'yellow');
});
</script>
</body>
</html>
$()関数は、jQueryによる操作をトリガーするための便利なショートカットです。上記のリストでは、この関数を2回使用しています。まず、この関数を使って無名関数をdocument.ready()イベントにバインドします。このようにしてページのロードが終了したところでjQueryコードの実行をトリガーします。次に、p:first CSSセレクタと組み合わせて使用することで、最初のパラグラフを分離します。そして、css()ミューテータメソッドで最初のパラグラフの背景色を変更します。
jQueryには、DOMを変換し、コールバックをすべてのブラウザイベントにバインドするためのメソッドがこの他にも数多く用意されています。jQueryについてさらに詳しく知りたい方は、こちらの記事を参照してください。
jQueryは拡張性が高く、本稿の例では標準のライブラリに加えて2つの拡張を使用しています。1つはjQuery UIで、これは視覚的な対話を処理するための特殊化された関数群です。もう1つはマウスホイールプラグインです。これを利用すると、マウスホイールで生成されるスクロールイベントに反応することができます。
