jQueryの実際の例
以降では、これまでに説明したjQueryの注目すべき特徴を具体的に示す単純なアプリケーションを紹介します。特に、次の点に注目してください。
- 多機能で単純なAPI
- CSSおよびDOM操作
- JSONの直接サポートを使用する非同期呼び出し
今回のサンプルアプリケーションは、トピックリストと検索機能を備えた記事集約サイトです（このサンプルアプリケーションは本稿のダウンロードサンプルに収録されています）。ユーザーはまず、特定のトピックに関連する記事エントリがリストされているメインページにアクセスします（図1）。エントリは表形式で表示され、各行が記事エントリへのリンクに相当します。
ユーザーがエントリリンクをクリックすると、表の下の部分に記事の要約が表示されます（図2）。
ユーザーは記事のキーワードを選び、類似の記事を検索できます。検索は「results.txt」に対してjQueryのgetJSON()呼び出しとして実行され、要求されたキーワードに一致する記事（JSONオブジェクト）のリストが返されます。一致したものは、renderTable()関数で処理されます。
$.getJSON("http://localhost:8080/Articles/results.txt", //Gives us parsed JSON automatically
{ keywords: params }, //The params for the query
renderTable //The callback function
);
renderTable()関数は結果（JSONオブジェクト）を反復処理して、結果の表に表示します（図3を参照）。
もっと開発を行ってみたい方のために、本稿のダウンロードファイルには、サンプルのHTMLファイルと「jQuery.js」およびカスタムの「article.js」スクリプトファイルを含んだ「Articles.war」ファイルが収録されています。このサンプルには、単純化されたサーバーサイド機能も用意されています。jQueryでは、これらの機能に加えてイベントバインドの処理とAJAXエフェクトも適切にサポートされており、サードパーティによる拡張機能も非常に構造的にサポートされています。
jQueryのイベントバインド処理のサポートは開発者にとって特に魅力的であり、jQueryのイベントバインドメソッドについても同様です。イベントバインド処理は、bind()関数を通じて実現されます。この関数では、DOM 0、DOM 1、およびDOM 2の各レベルを完全に透過的にサポートするため、クロスブラウザ開発の複雑な要因が単純化されます。
他のAJAXライブラリと同様、jQueryも、スライドショー、フェーディング、アニメーションなど、AJAX対応アプリケーションで一般的な多くのエフェクトをサポートします。
期待を裏切らない優秀なライブラリ
成熟した完璧なライブラリを使用すれば、AJAX/JavaScriptソリューションを簡単、簡潔、強力に実装できることがおわかりいただけたでしょう。私は、過去12か月に関わったすべてのプロジェクトでjQueryを使用しましたが、一度として期待が裏切られることはありませんでした。
読者の皆さんのすべてのAJAX実装でこのライブラリを使用することを強くお勧めします。また、そのすべての機能と多くのプラグインをさらに調べてみることもお勧めします。jQueryが非常に優れていることが理解できるでしょう。
