Aptanaで始めるJavaScriptライブラリ「jQuery」超入門：jQueryで学ぶ簡単で効果的なAjaxの使い方（1）（1/3 ページ）

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

» 2009年03月02日 00時00分公開

JavaScriptライブラリ「jQuery」とは？

　最近、Flashの代わりにJavaScriptを利用してリッチなデザインのWebサイトを構築する事例が増えてきました。特にグーグルのサービスは、JavaScriptをうまく取り入れている例として誰もがご存じでしょう。　例えばGoogleマップは、Webブラウザ上でマウスをドラッグ＆ドロップするだけで、地図を自由に操作できます。このような操作感は、まるでWebサイトであることを意識させない作りになっています。

図1　Googleマップ

　本来、JavaScript自体はインターネットが広まり始めたころから存在していて、決して目新しい技術ではないのですが、Webブラウザの種類やバージョンによって挙動が異なることから、JavaScriptを使って大掛かりな仕組みを作ることは不可能だと考えられてきました。　しかし、最近ではWebブラウザは自動的にバージョンアップされるようになり、いままで高かった壁が少し低くなってきました。そこへ、Webブラウザ間の挙動の違いを吸収したJavaScriptのライブラリが登場してきました。　本連載で紹介する﹁jQuery﹂もその1つです。jQueryは、ほかのライブラリと比較するととってもコンパクトで、機能を拡張するプラグインも豊富にそろっています。

図2　jQueryはいろいろなプラグインでいろいろな機能が使えます

コラム　「Ajaxは甘くない！」

何かと注目されている﹁Ajax﹂という言葉はAsynchronous JavaScript andXMLの頭文字を取ったもので、JavaScriptとXMLを使ってインタラクティブなサイトを作る技術の総称という意味です。 Ajaxを使いこなすには、最低限JavaScriptとHTML、CSS、XML、HTTP通信の知識が必要で、決して簡単なものではありません。本連載では、理解しやすい部分からAjaxを使っていき、少しずつ理解を深めていけるような構成を心掛けて進めていきます。 Ajaxそのものについて詳しく知りたい読者は以下の記事を参考にしてください。

連載インデックス「いまさら聞けないリッチクライアント技術」 − ＠IT via kwout

　「百聞は一見にしかず」ということで、前置きはこの程度にして早速jQueryを使ってみましょう。

jQueryのダウンロードと使い方

　jQueryは、以下のサイトからダウンロードできます。

jQuery: The Write Less, Do More, JavaScript Library via kwout

　画面右下の﹁Download(jQuery);﹂を選択します。遷移先のページで、ファイル名﹁jquery-x.x.x.min.js﹂をクリックして、デスクトップに保存してください。本連載では、2008年3月現在で最新版の1.3.2を使います。　jQueryの使い方は簡単で、実際のページでHTMLの<head>タグの中に、以下の<script>タグを記述するだけです。x.x.xの部分はバージョンによって変えてください。

<script type="text/javascript" src="jquery-x.x.x.min.js"></script>

Ajax/JavaScript開発にはAptanaが便利

　このままメモ帳で開発してもいいのですが、JavaScriptはデバッグが大変なので開発環境を整えましょう。本連載では、Aptanaを使います。

Aptana Studio -- The Web 2.0 IDE for Ajax, PHP, Ruby on Rails, Jaxer and more via kwout

　正式名称は﹁Aptana Studio﹂で、EclipseベースのオープンソースのWebオーサリングツールです。JavaScriptやAjaxを用いて開発するうえで役立つ強力なツールとなります。Aptanaについての詳細は、少し古いですが以下の記事も参照しておいてください。