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

jQueryで学ぶ簡単で効果的なAjaxの使い方(2):目的を持ってAjaxを使うためにjQueryの文法を知ろう (1/3)

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

[安田隆次, 関川晶子,ヤスダネットワーク]

 連載第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を使うときの大きな悩み…… 図1 JavaScript/Ajaxを使うときの大きな悩み……

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

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

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

しかしAptanaには、簡単にIEとFirefoxでの動作比較できるというVisual Studioにはない機能や、PHPRubyJavaなど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のオブジェクト操作の理解に大事な親子の関係を説明します。

       1|2|3 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。