• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

2006/05/29 日経ソフトウエア

 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マップの例です*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アプリケーション構築のうえでの一つの可能性が,今ここに再発掘されたわけです。これを利用しない手はありません。


山田祥寛(やまだ よしひろ)

Microsoft MVP for ASP/ASP .NET。執筆コミュニティ「WINGSプロジェクト」の代表でもある。主な近著に「XMLデータベース入門」「PEAR入門」「Smarty入門」「10日でおぼえる入門教室シリーズ(Jakarta・JSP/サーブレット・PHP・XML)」(以上,翔泳社),「今日からつかえるサンプル集シリーズ(JSP&サーブレット・PHP5・ASP・XML)」(以上,秀和システム),「書き込み式 SQLのドリル」(ソシム),「JSP/PHP/ASPサーバーサイドプログラミング徹底比較」(技術評論社)など。最近では,IT関連技術の取材,講演,監修まで広く手がける毎日。

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

  • 【ニュース解説】

    マイクロソフト、AIでOfficeを刷新

     米マイクロソフトは2017年5月に米国と日本で開催した開発者向け年次イベントで、新サービスや新機能を多岐にわたって発表した。重点的な強化ポイントは、AI(人工知能)、IoT(モノのインターネット)、データベースの三つ。なかでもAIについては、PowerPointなどに組み込んで、刷新といえる大きな…

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

クラウド

運用管理

設計/開発

サーバー/ストレージ

クライアント/OA機器

ネットワーク/通信サービス

セキュリティ

もっと見る