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

  • PR

  • PR

  • PR

  • PR

簡単実装で学ぶWeb技術

第1回 Ajax---動的なWebアプリケーションを作るための技術

結城 浩 2008/02/08 日経ソフトウエア
出典:日経ソフトウエア2006年7月号112ページより
(記事は執筆時の情報に基づいており、現在では異なる場合があります)
目次一覧

この記事は,日経ソフトウエア2006年7月号,連載「簡単実装で学ぶWeb技術2006」の第1回「Ajax――動的なWebアプリケーションを作るための技術」の再録です。記事は執筆時の情報に基づいており,現在では異なる場合があります。

結城 浩(ゆうき ひろし)
1963年生まれ。仕事&趣味は「プログラム書き&文章書き」。JavaやPerlの入門書で人気の著者。Webサイトはhttp://www.hyuki.com/

 こんにちは,結城浩です。

 この連載では,Web技術を具体的でシンプルなサンプル・プログラムを通して紹介します。進歩と変化の激しいWeb技術は,手際よく本質をつかんでいきたいものですね。小さいけれどもわかりやすいサンプルを実際に動かして「なるほど,こういうものだったのか」と思っていただければありがたいです。

 題材は,新しいものから基本的なものまで幅広く取り扱っていく予定です。第1回のテーマは「Ajax」です。サンプル・プログラムは三つあります。

動的で応答性のよいWebアプリを作る技術

 Ajax(エイジャックス)は,一言でいえば「JavaScriptを使って動的なWebアプリケーションを作るための技術の総称」です。特に,背後で「非同期的な通信を伴う」もののことを指します。「非同期的な」というのは難しそうな言葉ですね。Ajaxの場合には「サーバーと通信している最中でも,ユーザーは通信完了を待たずに操作を続けられる」という意味だと理解しておけばイメージがつかめるでしょう。

 Ajaxの特徴は,ブラウザに表示されている画面を変化させる際に「クリックしてページを遷移する」というアクションを伴わないことです。通常のWebページでは,画面を変化させるときに,リンクをたどったりボタンを押したりして,ページを遷移させる必要があります。ちょうど紙芝居のようにページを移っていくことで動作が進むのです。でもこれでは,ページ遷移が完了するまでユーザーは次のアクションを行うことができません。毎回ページ全体を通信することになるので,流れるデータ量もばかにはなりません。ですから,ユーザーの待ち時間が長く,応答性が悪くなる危険性があります。

 Ajaxを用いたページでは,基本的に同じURLの,同じページのままで画面が変化します。また,データは必要になるたびに,バックグラウンドでサーバーから取得します。したがって,動的で応答性のよいWebアプリケーションを作ることができます。

 JavaScriptを利用して,ページ遷移を伴わない動的なWebアプリケーションを作るという手法は「ダイナミックHTML」という呼称でずっと以前からありました。Ajaxは概念としてダイナミックHTMLも含んでいて,さらに非同期的な通信も加えたものと考えてください。

JavaScriptが中心的な役割を果たす

 「通常のWebページ」と「Ajaxを用いたページ」の動作を,概念的なシーケンス図(図1図2)を使って比較しました。図1では,ユーザーがアクションするごとにページが遷移します。

図1●通常のWebページのシーケンス図
図1●通常のWebページのシーケンス図

 図2では,ユーザーがアクションを行ってもページは遷移しません。

図2●Ajaxを用いたWebページのシーケンス図
図2●Ajaxを用いたWebページのシーケンス図

 図2を見ると,WebブラウザとWebサーバーの間にJavaScriptがあるのがわかるでしょう。JavaScriptは,ユーザーのアクションをいったん関数コールとして受け取り,通信と,表示の更新処理を行います。

 具体的なプログラムを見ないとピンと来ないかもしれませんが, AjaxではJavaScriptが中心的な役割を果たしている様子をつかんでください。

 なお,「Ajax」という単語は「Asynchronous JavaScript+XML」の略です。Jesse James Garrettという人が,「Ajax: A New Approach to Web Applications」というWebページ*1で命名しました。もともとは,クライアント側のプログラミング言語としてJavaScriptを用い,通信のデータ形式としてXML*2を用いて,非同期的(asynchronous)に通信を行うものを指していました。最近では特にXMLを用いなくてもAjaxと呼ばれているようです。今回作成したサンプル・プログラムでも,通信のデータ形式としてXMLは用いませんでした。

三つのサンプル・プログラムを作成する

 この記事では,以下の3個のサンプル・プログラムを作成します。(1)チューリング賞*3の受賞者を表示する「turing」,(2)複数の画像を動的に表示する「gallery」,(3)Google Mapsもどきの「maps」――です。ここではすべてのプログラムは掲載できませんが,日経ソフトウエアのWebサイト*4からサンプル・プログラムのソースコードを入手できます。

 まずサンプル・プログラムを動作させる準備をしましょう。必要なのは,JavaScriptが動作するWebブラウザと,Perlで書かれたCGIが動作するWebサーバーです。筆者は,WebブラウザもWebサーバーも1台のWindows XPマシンで動かしています。これはネットワークから離れているときでも手軽に動作が試せるので便利な方法です。なお,筆者が動作を確認した環境は,WebブラウザがMozilla Firefox 1.5,WebサーバーがApache HTTP Server 2.0,Perlの処理系がActive Perl v5.8.8――です。これらのソフトウエアは,インターネットで入手できます*5

ここから先はITpro会員(無料)の登録が必要です。

次ページ サンプル:turing キー入力のたびに表示を...
  • 1
  • 2
  • 3
  • 4

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

  • 【夏休みスペシャル 2017】

    IT業界でいまだにあるある?プロジェクト迷走記

     中堅F:この春にうちの部署に配属になってもう3カ月たったけど、仕事は順調かい? 新人O:はい、何とかやっています。でももうすぐ夏期休暇でホッとしています。でも先輩は元気がないですね。 中堅F:取引先といろいろあってね。「なんでこんなに理不尽な目に遭うんだ!」って思うことがときどきあるんだ。

ITpro SPECIALPR

経営

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

クラウド

運用管理

設計/開発

サーバー/ストレージ

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

セキュリティ

もっと見る