最近,Webプログラミングの世界で静かなブームになっている言語があります。何を隠そうJavaScriptです。JavaScriptはご存知のとおり,クライアントサイドすなわちWebブラウザ上で動作するタイプのプログラミング言語です。最初にJavaScriptが実装されたのは,今から10年以上前の1995年,Netscape Navigator2.0でのことです(登場当時はLiveScriptと呼ばれていました)。決して新しい言語ではありません。それが,どうして再び注目されることになったのでしょう。その理由は,Webインタフェースのプログラミングで,JavaScriptの有効性や利便性が再発見され,言語そのものが持つユニークさや機能が技術者の関心を集めているからです(図1)。

図1●JavaScriptには不遇の時代があったが,10年の時を経て再び脚光を浴びるようになってきた
図1●JavaScriptには不遇の時代があったが,10年の時を経て再び脚光を浴びるようになってきた
[画像のクリックで拡大表示]

JavaScriptを使うのはダサかった?

 Webインタフェースの技術といってもHTMLしかなかったころ,様々なプログラム処理を実装できるJavaScriptは,Webの表現の可能性を大きく広げるものとして歓迎されました。しかしその後約10年,JavaScriptは不遇の時代を過ごすことになります。インターネットの発展と共にWebブラウザが利用される頻度はどんどん上がっていったにもかかわらず,JavaScriptは正しく評価されず,誤解され続けました。つい2,3年前まで「利用するにはJavaScriptが必須」のような制限を掲げるサイトは「ダサいサイト」という烙印(らくいん)を押されていたのです。ブラウザの設定でJavaScriptを無効にしている人もたくさんいました。

 なぜJavaScriptはダサいと思われてしまったのでしょうか。原因としてまず挙げられるのは,JavaScriptの実装がブラウザごとに微妙に異なっており,すべてのブラウザで共通に利用できるスクリプトを書くのが困難だったことです。環境に依存せず閲覧できるはずのWebページで,ブラウザや環境を限定してしまうJavaScriptは「Webの思想を阻害するもの」という印象を与えてしまったのです。

 また,JavaScript自体にも「素人が使うもの」というイメージが付きまとっていました。以前は,Webサイトを作り始めてしばらくすると,誰もが「かっこいいWebサイトを作りたい病」を発病していました。この病気の代表的な症状,例えば「ブラウザのステータス・バーの上で文字をアニメーションさせる」といったテクニックにJavaScriptが使われていたため,素人くさいイメージが染みついてしまったのです。さらに,JavaScriptに関連したセキュリティ・ホールがブラウザの実装にときおり発見されるのも,JavaScriptのイメージを悪くする原因になっていました。

Googleの採用が再注目のきっかけに

 ただそうした不遇の時代にありながら,JavaScriptは標準化団体であるEcmaInternationalによって標準化が行われ,機能,セキュリティ,互換性の向上が着々と行われていきました(カコミ記事「JavaScriptとECMAScriptとの関係」を参照)。そして2004~2005年あたりを境にJavaScriptは再び注目を集め始めました。そのきっかけになったのがGoogleが提供するサービスです。

 同社は,地図サービス「GoogleMaps」やメール・サービス「GMail」といった自社のサービスに積極的にJavaScriptを採用しました。GoogleがJavaScriptを使って便利で優れたインタフェースを持つサイトを構築したことにより,多くの開発者がJavaScriptの有用性に気付いたのです。また,JavaScriptを利用して任意のタイミングでデータ通信を行う「Ajax」という手法も,Googleが多用することで注目を集め,開発者の心をくすぐりました(カコミ記事「JavaScript注目のきっかけとなったAjax」を参照)。こうしてJavaScriptはようやく多くの技術者の注目を集めるようになったのです。その後もJavaScriptを利用したインタフェースが様々な開発者によって生み出され,その可能性は今もどんどん広がっています。

 JavaScriptは,その不遇なスタートから「素人向けの言語」というイメージがいまだに根強くあります。しかし実際にはオブジェクト指向を取り入れた本格的な言語であり,技術者として勉強し甲斐のある技術です。JavaScriptの地位の向上とともに,JavaScriptのプログラミング・スタイルも,数年前によく見られた「HTMLの片隅にちょこちょこと関数を記述するスタイル」に代わって「きちんとオブジェクト指向の考え方を取り入れたスタイル」が主流になってきています。

 JavaScriptの真の実力が注目を集めるようになってからは,数多くの情報がそろい,ブラウザ間の実装の違いを吸収してくれるライブラリも登場してきました。つまり今は,JavaScriptを深く学ぶにはちょうどいいタイミングだといえます。以降で,オブジェクト指向スタイルを取り入れたJavaScriptプログラミングの手法を紹介していきます。ぜひ,JavaScriptの“モダンな”プログラミング・スタイルについて理解を深めていただきたいと思います。

JavaScriptとECMAScriptとの関係

 JavaScriptはもともと米Netscape Communicationによって開発された言語ですが,米Microsoftが開発したInternet Explorer(IE)にもほぼ同様の言語である「JScript」が搭載されています。

 しかしJavaScriptとJScriptは,それぞれの仕様が微妙に異なっていたため,Netscapeは情報通信の標準化団体であるECMA(現在のEcma International)に働きかけ,両社や米Borland,米SunMicrosystemsなどが参加して,1997年に仕様の標準化が行われました。それがECMAScript(ECMA-262)です。

 現在では,この標準仕様を基に,オープンソースのWebブラウザであるMozillaやFirefoxではJavaScript,IEではJScriptとして実装されています。JavaScriptとJScriptは,ベースとなるECMAScriptの部分は共通ですが,独自に追加された仕様は異なります。このため,両者は正確には異なる言語です。

 ECMAScriptでは,JavaScriptの基本的な仕様を定めています。例えば,Date,Math,RegExpなどの標準のクラスはECMAScriptで仕様が決められています。しかし,windowクラスやdocumentクラスといったブラウザに依存したクラスはECMAScriptでは定義されていません。

 ちなみに,ECMAScriptの言語仕様は,JavaScriptやJScript以外にも,Flash用のスクリプト言語であるActionScriptなど様々なプログラミング言語で採用されています。このパートで解説している内容の多くはECMAScriptの仕様に沿っており,ActionScriptをはじめとするECMAScriptに準拠した言語であれば応用できます。


JavaScript注目のきっかけとなったAjax

 JavaScriptが注目されるきっかけになったのがAjax(エイジャックス)という技術です。

 一般的にAjaxは,JavaScriptのサーバーとの通信機能を利用し,通常のWebページの読み込みとは全く異なるタイミング(例えばWebページのどこかをクリックしたときなど)でJavaScriptを実行し,その中でサーバーとのデータのやり取りを行う技術を指します。JavaScriptはWebページの内容をダイナミックに書き換える機能を備えているので,サーバーとやり取りした結果を利用し,ページの移動なしに表示するページの中身を書き換えるわけです。例えば,Googleが提供するGoogleサジェスト」では,ユーザーが文字を入力するごとに検索語の候補を読み込んでリアルタイムに表示してくれます。

 JavaScriptを利用してデータをやり取りする技術自体は決して新しいものではありませんが,Googleがそれを応用した優れたサービスを提供し,「Ajax」という固有の名前が付けられたことで,注目を浴びるようになったのです。

非同期+XMLがキモ

 Ajaxは「Asynchronous JavaScript + XML」の略です。「Asynchronous」とは「非同期」を意味します。このことからもわかるように,Ajaxではサーバーとの通信が非同期であることが特徴の一つです。通常のWebページの読み込みでは,通信が終わらないうちはユーザーが次の処理を行えません。これに対し,Ajaxでは通信処理が終わらなくても,ユーザーが次の処理を行えます。この特徴のおかげで,ユーザーのストレスが少なくなります。

 また,Ajaxでは,ページ内の必要な部分のみのデータをやり取りするので,ページ全体を書き換えるのと異なり,データ量が少なくて済むというメリットがあります。ちなみに「XML」という言葉からもわかるように,やり取りを行うデータはXMLが基本ですが,HTMLやテキストのデータをやり取りする場合もあります。

 これまでのWeb上のアプリケーションは,どんどんページを読み込んでいくことで機能の切り替えや情報の更新を行ってきました。Ajaxを利用すると,同じページの内容をサーバーの情報を基に書き換えられるようになり,Webページをまるで一つのデスクトップ・アプリケーションのように扱えるようになります。

 ただしAjaxにも欠点があります。例えば操作後の状態を「お気に入り(ブックマーク)」に登録することができません。Ajaxではページの移動がないためURLが変化せず,お気に入りに登録しておくことができないのです。また「戻る」「進む」といったボタンも正しく機能しません。

 Ajaxが頻繁に利用されるようになったのは,つい最近のことです。Ajaxをどのように利用すれば効率的なのか,欠点を克服するにはどうしたらいいか,といったことは現在もまだ試行錯誤が続いている最中です。


この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら