SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

jQueryを使ってAJAX/JavaScript開発を単純化する

サンプルアプリケーションを作成してjQueryの概要を理解する

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード サンプルソース (37.7 KB)

jQueryのインストール

 jQuery JavaScriptライブラリは、Minified版(変数や関数の名前のサイズが縮小されている縮小版)、圧縮版、または非圧縮版のJavaScriptファイルでダウンロードできます。最新バージョンをダウンロードし、それを次のようにしてWebページにインストールします。

<script type="text/javascript" src="jquery1.2.6.js"/> 

jQueryでのプログラミング

 jQuery APIの中心は、「jQuery」というオブジェクトラッパーです。jQueryの関数、エフェクト、HTMLとCSSコンテンツの処理はすべて、このオブジェクトを通じて行われます。ただし、共通の「$」ショートカットを使用してjQuery関数を呼び出すことが求められます。たとえば「banner」というIDを持つdivの背景色を取得する場合、jQueryオブジェクトを使って次のように記述する代わりに、

jQuery.("#banner").css("background-color");

 「$」ショートカットを使って次のように記述することになります。

$("#banner").css("background-color");

ドキュメントとDOM表現の読み込み

 jQueryは、他の多くのAJAXライブラリと同様、ページのドキュメントオブジェクトモデル(DOM)表現で動作します。その機能とエフェクトの大部分を実行するには、ページの解析されたDOMツリーが必要です。しかし、ページのDOMモデルは、ブラウザがページを解析するまで有効ではありません。

 一般的な解決策として、ページを読み込むときに有効であることが求められるjQuery関数をwindow.onloadイベントに添付する方法があります。この方法の欠点は、イメージや他の外部リソースを含めて、ページが完全に読み込まれるまでエンドユーザーが待たなければ、AJAXエフェクトが有効にならないことです。また、「Unobtrusive JavaScript(控えめなJavaScript)」という考え方に本当に準拠するには、JavaScriptに依存するマークアップをXHTMLコンテンツに含めてはなりません。

 したがって、すべてのカスタムJavaScriptコードは外部ファイルに保持する必要があります。Webページのヘッダー(<head>セクション)は、通常、jQueryライブラリへのリンクと、jQueryを利用する1つ以上のカスタムJavaScriptファイルへのリンクを持ちます。

 読み込み時にページに添付するjQueryのイベントや関数がある場合、通常は、jQueryを通じてdocument(ページを表すDOMオブジェクト)でready呼び出しを行い、他の関数呼び出しを行う(または他の関数呼び出しが埋め込まれている)カスタムの匿名関数を渡します。

 $(document).ready( function() { 
    ... your function calls here ... 
   } 
)

CSSおよびDOM操作

 jQueryはHTMLコンテンツのDOM表現の操作とCSSプロパティを徹底的にサポートしており、非常に簡単、簡潔にプログラムできます。実際、jQueryは属性ベースのセレクタなどもサポートしており、たいていのブラウザのCSSサポートよりも充実しています。一部ブラウザのサポートを超える部分もありますが、そのようなブラウザでもjQueryは正しく動作しますし、標準準拠の形式でCSS要素にアクセスするぶんには問題ありません。

 jQueryにおけるDOMとCSSの基本的なサポートの統合の例を以下に示します。

ID=sampleの要素にパラグラフを追加する
$("#sample").append("<p>Some paragraph.</p>");
divを非表示にする
$("div#someSection").hide(); 
最初のパラグラフにクラスを追加する
$("p:first").addClass("highlighted");
パラグラフにテキストを追加する
$("p").html( "Some text");
すべての表の奇数行に交互に色を付ける(別名"ゼブラ"カラー)
$('tr:odd').addClass('odd');

 ご覧のように、XHTML要素とCSS要素は、よくご存じのCSSとXHTMLの構文を使用して参照されています。フレームワーク固有の知識は不要です。また、コンテンツの非表示、削除、追加、変更を含めて、jQueryを通じて参照されるHTML/CSS要素を、同じように単純で直観的な方法で完全に操作できます。

非同期呼び出し

 AJAXフレームワークであるjQueryは、サーバーサービスに対して非同期呼び出しを行う多くのメソッドをサポートしています。一般的なメソッドに加えて、AJAX呼び出しを行うPOSTとGETという2つの一般的なHTTPメソッドもサポートしています。

次の例は、サーバー側リソースへのGET呼び出しを単純なjQueryスタイルで記述したものです。

$.get("sample.asp", { itemId: "123" }, someCallbackFunction );

 パラメータが3つあることに注目してください。URL、パラメータ、そしてAJAX呼び出しの結果を文字列として処理するsomeCallbackFunction()関数へのコールバックです。

 jQueryは、getJSONという別のスタイルのGETメソッドもサポートしています。サーバーに対してGET呼び出しを行う場合、getJSON()はサーバーからの文字列応答をJSON(JavaScript Object Notation)オブジェクトとして解釈し、結果をJSONオブジェクトとしてコールバック関数に渡します。これらの処理はすべて透過的に行われます。

$.getJSON("sampleJSON.asp", { itemId: "123" }, someCallbackJSONFunction );

 POST呼び出しの構文もほとんど同じです。違うのは関数名だけで、パラメータは同じです。

$.post("samplePostingResource.asp", { itemId: "123" }, somePostProcessingCallbackFunction );

 さらにjQueryには、サーバー側リソースを呼び出す汎用のload()関数が用意されています。構文は同じですが、柔軟性はこちらの方が優れています。また、詳細なAJAX処理を行うことができる特殊な関数も多数取り揃えられています(ajaxStart()ajaxSend()ajaxSuccess()など)。

次のページ
jQueryの実際の例

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

japan.internet.com(ジャパンインターネットコム)

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Edmon Begoli(Edmon Begoli)

大規模な商用プロジェクトやパブリックソフトウェアプロジェクトに携わって10年間のキャリアを持つソフトウェアアーキテクト。現在は大きな公共機関に勤務。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2907 2008/09/02 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング