今からでも遅くない Ajax基本のキ

第1回　What is Ajax?

　Web 2.0，Web API，リッチ・クライアント，SOA（サービス指向アーキテクチャ），アジャイル開発…などなど，相も変わらずWebアプリケーション開発の現場には，様々なキーワードが渦巻いています。現在その中でも特に注目されているのが，Ajax（Asynchronous JavaScript And XML）です。
　Ajaxは，2005年2月にAdaptive Path社のJesse James Garrett氏が自身のコラム「Ajax: A New Approach to Web Applications」上で著したものが注目を浴び，記事や書籍などで紹介されたことから，急速に認知されるようになったキーワードです。筆者などは当時，「しょせんただのBuzzword（はやり言葉/空騒ぎ）だろう」と比較的冷ややかに思っていたものです。
　しかし，その後1年を経て，いまだに衰える気配はありません。昨今では，ASP .NET，PHP，Javaなど主要なサーバーサイド開発環境の世界でもAjaxに対応したフレームワークやライブラリが登場しつつあり，Ajaxも単なる「流行もの」から現実的な使い方が模索される時期に移行しつつあるように思われます。
　本連載では，筆者同様，「しょせん流行ものだろう」…とちょっと乗り遅れてしまった皆さんのために，Ajax技術を基礎からおさらいしてみることにします。Buzzwordと忌避してきた皆さんも，もはや一過性とはいえなくなったAjax技術に，今一度注目してみてはいかがでしょう？

Ajaxとは？

　くどくどとしくみの紹介を先行するよりも，まずはAjax技術を利用して構築したアプリケーションの例をご覧戴いた方がわかりやすいかもしれません。図1[拡大表示]は，Ajax技術を使った例として取り上げられることの多い地図アプリケーションGoogleマップ（http://maps.google.co.jp/）の例です＊1。
　ブラウザ上のマウスドラッグによって地図の表示範囲を移動させたり，拡大/縮小率を変更したりできます。従来であれば，地図上の表示や縮小率を切り替えるたびに，いちいち画面（ページ）を切り替えなければならなかった手間や，そのために自分が一番見やすい位置，縮小率に合わせるのが難しかったことを思えば，はるかに直感的な操作性を提供していることがおわかりになるでしょう。
　このような，一見，Flash技術を利用しなければ実現できそうもないリッチなコンテンツを，（特別なプラグインなどを導入することなく）標準的なブラウザの機能だけで実現できてしまうあたりが，Ajax技術が急速に注目を浴びたゆえんともいえます。昨今では，Ajax技術を利用したアプリケーション（コンテンツ）が，それこそ雨後の筍のように登場しています（表1[拡大表示]）。

Ajaxのしくみ

　さて，Googleマップのような例を見てみると，いかにも革新的な技術のようにも思えるかもしれません。しかし，繰り返しになりますが， Ajax技術がこれだけ注目を浴びたのは，こうしたリッチな効果を，ブラウザ標準の技術だけで実現できるという点にあります。Ajaxとは決して新しい技術ではないのです。
　図2[拡大表示]は，Ajax技術によるクライアント/サーバー間の通信を大まかに表したものです。
　Ajaxでは，ページ上でボタンがクリックされたりテキストボックスの内容が変更されたりすることによって発生するイベント（出来事）を JavaScriptで捕捉し，必要な情報をXMLHttpRequestオブジェクト（HTTP通信を行うためのオブジェクト）を使ってサーバーに送信します。サーバー側で処理された結果は，コールバック関数と呼ばれる関数で非同期に受け取り，DHTML（ダイナミックHTML）技術を使って，ページの必要な部分だけを動的に更新します。
　「非同期に」とは，処理を行っている間，クライアント側の処理が中断されないこと。すなわちサーバー側の処理とクライアント側での動作とはそれぞれに別物として動作していることを意味します。
　これに対して従来のWebアプリケーションでは，ブラウザでイベントが発生し，サーバーにリクエストを送信すると，そのたびにサーバーから応答（レスポンス）として送られてきたページ全体を読み込んで再描画しなくてはなりません。また，通信の発生によってユーザーの処理が中断されますから，スムーズな操作を実現できませんでした。
　いかがですか？すごい技術とフタを開けてみれば，なんてことはない。Ajaxとは，JavaScriptにDHTML，XMLと，いずれもいい加減，使い古された技術の寄せ集めであることがおわかりになるでしょう。XMLHttpRequestオブジェクトによる非同期通信でさえ，なんら目新しいものではなく，すでに何年も前からいくらでも利用されてきたものです。
　もしもAjaxに新規性があるとすれば，JavaScript，DHTML，XMLという組み合わせに「Ajax」と命名したことで，改めてリッチ・コンテンツ実現の可能性を示した点にあるといえるでしょう。使い古された技術がただ名前を新しくしただけでブレイクするというのはナンセンスだ，ゆえにAjaxとはやはりBuzzwordなのだ，という意見もあるかもしれません。
　しかし，よくよく考えてもみれば，Ajaxが新しい技術か古い技術かという議論自体がナンセンスではなのではないでしょうか。Ajaxが新しい技術であるにせよそうでないにせよ，Webアプリケーション構築のうえでの一つの可能性が，今ここに再発掘されたわけです。これを利用しない手はありません。
(山田祥寛)[2006/05/29]