目的を持ってAjaxを使うためにjQueryの文法を知ろう：jQueryで学ぶ簡単で効果的なAjaxの使い方（2）（1/3 ページ）

いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ／プロデューサーも必見！

» 2009年04月06日 00時00分公開

　連載第1回の「Aptanaで始めるJavaScriptライブラリ『jQuery』超入門」では、Ajaxを使うためのJavaScriptライブラリとしてjQueryの使い方を紹介しました。実際にAjaxを使ったシステムを作るときに、Ajaxを使うことが目的になってしまっている場合があります。残念ながら、このようなプロジェクトは失敗することの方が多いのが現実です。本来の目的というものは、Ajaxを使ったシステムによる業務の効率化であったり、ユーザビリティの改善によるリピータの確保であったりと、良い効果を生むものであるべきです。

　そこで今回は、Ajaxを使ったシステムによる業務効率化のために、jQueryを有効活用する方法を考えていきます。

jQuery/Ajaxをどのように使うべきか？

　まず、jQueryを使う場合、「JavaScriptを自分でなるべくコーディングしないように心掛ける」ことが、成功の秘けつであることを念頭に置きましょう。

　自分の作りたいものを実現するには、ある程度自分でJavaScriptをコーディングする必要があるかもしれません。しかし、JavaScriptが世の中で登場して以来、その開発環境はなかなか進歩がありません。Internet Explorer（以下、IE）やFirefoxなどWebブラウザの種類やバージョンの違いによって、同じソースコードでも実行結果が異なってしまうという事実がJavaScriptの発展を妨げてきました。

図1　JavaScript/Ajaxを使うときの大きな悩み……

　しかし、その状況はJavaScript/Ajaxライブラリや連載第1回で紹介したAptanaなどの開発ツールの登場によって改善しつつあります。

コラム　「AptanaでjQuery開発をするには理由がある」

jQueryは、次期Visual Studioで標準搭載されるなど、マイクロソフトよりの技術としても注目されています。

しかしAptanaには、簡単にIEとFirefoxでの動作比較できるというVisual Studioにはない機能や、PHPやRuby、JavaなどMac OS XやLinux上でも動作するサーバサイドアプリケーションとの連携もしやすくなっています。どちらが優れているか？というより、自分の得意な技術で開発環境を選べるようになっています。

本連載では、デザイナの方でも入りやすいように（デザイナの方はMac OS Xを主に使用します）Aptanaを開発環境として進めていきます。

　とはいえ、1人の開発者が、独自のAjaxアプリケーションを開発するには、開発予算とコーディング期間を確保することは現実的に困難なケースがほとんどでしょう。幸い、jQueryにはたくさんのプラグインがすでに公開されています。すでに存在するプラグインをうまく組み合わせて、目的を達成することに専念することが重要です。

プラグインを使うためにjQueryの仕組みを理解しよう

　うまくjQueryを使いこなすには、どのようなプラグインが存在しているのかを知り、jQueryがどのような仕組みで動いているのか、その本質を知っている必要があります。

jQueryはクエリによってDOM指定

　jQueryの仕組みは、1回目で紹介した以下のたった1つの文法で表現されています。

$(操作する対象).操作(引数);

　jQueryは、HTML文章を構造化されたタグの集合とみなしています。この文法の「操作する対象」に当てはめる文字列を決めるのは、クエリ（セレクタ）によってDOMの指定をします。

　ここで、以下のHTMLを操作する場合を考えてみましょう。

<html>

        <body>

    <div id="top">トップ</div>

    <div id="products">製品情報</div>

    <div id="aboutus">会社概要</div>

  </body>

</html>

　<div>タグで囲まれた要素「トップ」「製品情報」「会社概要」をまとめて操作したい場合は、「$(div)」のように書きます。

$("div").html("全部上書きしちゃうよ");

jQueryは複数のDOM指定ができる！

　通常、JavaScriptでHTMLの内容を操作するときには、1つのタグごとに処理を繰り返すのに比べ、jQueryを使うと複数の要素に対して、まとめて操作できるようになります。この機能がとても重要なのは、以下の結果を得られるからです。

開発者が書かなければならないソースコードが最小限に抑えられる

　　　　　　　　　↓

バグが発生する確率を最小限に抑えられる

　もちろん、1つの要素を指定することもできます。「$("#top")」のように書くことで、id属性値が"top"である「トップ」の部分だけを操作できます。

$("#top").html("トップだけ上書きしちゃうよ");

コラム　「クエリって？セレクタって？」

jQueryの名前にある、「Query（クエリ）」とは、どんな意味なのでしょうか？データベースを扱ったことのある方であれば、「SQLクエリ」という言葉を聞いたことがあると思います。

SQLクエリの「SELECT * FROM ADDRESS」のように、自分の得たい情報を問い合わせることを「クエリ」といいます。

jQueryの場合は、操作したいHTML文章の中の要素を決めるための文字列のことで、別名「セレクタ」といいます。セレクタの詳細な機能は以下のサイトを参照してください。r5v7g_bor_rou_sha_w400.jpg,Selectors - jQuery 1.3.2 日本語リファレンス via kwout,Selectors - jQuery 1.3.2 日本語リファレンス via kwout,http://semooh.jp/jquery/api/selectors/

　次ページでは、jQueryのオブジェクト操作の理解に大事な親子の関係を説明します。

jQueryのオブジェクトは親子の関係が大事

　　　　　　 1|2|3 次のページへ

SpecialPR