2009年09月10日

Ajax入門（JavaScriptとAjax）

はじめに

IT業界に（特にWebの世界で）「Ajax」という言葉が流行りだして、しばらく経ちます。
そして、現在では、もはや開発技術の一つとして立派に確立した地位を得るまでに至りました。
システックスでも、PartyWebをはじめ、いくつかの開発事例の中で Ajax が採り入れられるようになっています。

『Ajax入門』では、そんな「Ajax」とシステックスの関わりを書いていこうと思います。

Ajaxとは？

IT業界の方なら、もうご存知の方も多いでしょうけど、何事も基本から、ということで。

「Ajax」の正式名称は、「Asynchronous JavaScript + XML」といいます。
直訳すれば、「非同期通信するJavascript と XML の技術の集まり」といったところでしょうか。
（ちなみに、略称の「Ajax」の読み方は、「エイジャックス」とか「アジャックス」が主流のようです。）

いきなりコムズカシイですが、その実体は、・・・ただの“Javascriptの塊”です。

はて？
ただの“Javascriptの塊”に何ができるんでしょう？　何がそんなにスゴいんでしょう？

・・・と、その前に、すこしWebの世界の思い出話を紐解いてみましょう。

Javascript黎明期

実は、Ajaxを構成する「Javascript」「XML」「非同期通信するJavascript」という技術自体は、別に、目新しい技術でもなんでもありません。
「Javascript」に至っては、それこそ、Web（インターネット）の世界が普及し始めた頃から、すでに存在している技術です。

当時、Javascript の出現により、動きのないタダのHTMLファイルだけのWebサイト（ホームページ）に対して、様々な動きやギミックが付けられるようになりました。
それにより、ユーザーに使いやすいWebサイトをつくることができるようになりました。

ただ、当初のJavascriptはまだ黎明期で、今で言う「Google Map」のようなホームページを作ることは非常に困難でした。
なにせ、
「Webページ内で、再読込することなしに、地図をドラッグする」
なんてフクザツカイキな動き、当時のJavascriptだけで実現できる人は、そうはいませんでした。
もちろん、当時だって、やろうと思えばJavascriptでも実現することはできたと思います。
でも、そう“簡単”にはいきませんでした。

簡単にいかなかった理由の一つとして挙げられるのが、
「ブラウザ（のバージョン）ごとに、Javascriptの命令の書き方や挙動が異なる時がある。」
という事実でした。
例えば、全く同じJavascriptを書いたとしても、IE5ではうまく動いても、IE6では全く動かなかったりしたわけです。
（その逆のパターンもありました。）

当時は、まだ「Web標準」という言葉が定着していなかった時代でした。
各社・各団体が、それぞれ独自色を備えたブラウザを提供していた時代だったのです。

この事実は、Webサイトの作り手としては、大変な労力を強いられることになりました。

Webサイトを公開したとしても、ユーザーとしては、どのブラウザで閲覧するかは自由です。
つまり、作り手としては、ユーザーがどのブラウザで閲覧するか分からないわけです。
前述の通り、ブラウザが異なれば、動きが変わってしまうかもしれません。

どんなブラウザでも同じような動きになるように対応するのであれば、まず、各ブラウザに合わせて、Javascriptの命令を書き換えなくてはならず、かつ、ちゃんと動くか全てのブラウザで確認していかなくてはならなかったのです。
メジャーで使われているブラウザに限定したとしても、バージョン違いも含めれば、最低２～３個以上のブラウザに対応する必要があります。

極めてメンドーです。
「Webページ内で、再読込することなしに、～」のような複雑な動きをつけるとしたら、そのメンドーさは莫大になります。

他にも、メンドーだった理由として、
「特殊なHTMLの使い方をしないといけなくて、それによりWebページの作り方が多少制限されてしまう。」
「まだ技術的にバグが多く、それを回避するための労力を必要としてしまう。」
などが挙げられます。

・・・そのメンドーさ加減を“劇的に”解消したのが、「Ajax」でした。

Ajax の登場

「Ajax」という言葉が流行りだしたのは、「Google Map」の登場がきっかけでした。

思い出してみてください。
「Google Map」の登場以前だって、地図検索できるWebサイトはいくらでもあったはずです。
でも、「Google Map」が他社・他団体のサービスより優れていたのは、
「一度表示した地図を、“再読込なしで”ドラッグして動かしたり、拡大・縮小できること」でした。
このインタラクティブかつ軽快な動きは、当時のユーザーの度肝を抜きました。（私もその一人です。）

同時に、当時のWeb開発者にとっては、
その「Google Map」が、特別な新技術を使って作られたのではなく、
元からあった「Javascript」を応用したに過ぎないことを知ったときには、さらに度肝を抜かれたことでしょう。

この出来事は、Webサイトの新たな可能性を開いた、とも言えます。
この「Google Map」の登場が、Ajaxの知名度を爆発的に増加させてくれました。

次回予告

次回は、Ajaxの中でも比較的とっつきやすい jQuery や Thickbox などの活用例をもとに、
Ajax の導入の仕方とその容易さについてご紹介できればと思います。