第5回　DOMとJavaScriptと互換性

今回は、動的なWebサイトやWebアプリケーションに欠かせない「DOM」と「JavaScript」という二つの技術を、関連する仕様とともに紹介したいと思います。

さまざまなものをオブジェクトで表現するDOM

DOM (Document Object Model) とは、HTML文書にアプリケーションからアクセスするためのAPIです。オブジェクトモデルという名前のとおり、DOMではさまざまなものが「オブジェクト」として表されます。たとえばHTML文書は「要素」「⁠属性」「⁠テキスト」などのオブジェクトから成る集合として表されます。

オブジェクトで扱われるのは、文書内部のオブジェクトだけではありません。ウインドウや要素の座標、イベント、ブラウザーやユーザーインターフェースに関連するオブジェクトなどもあります。Webアプリケーションでは、これらのAPIを利用し複雑な処理を実現しています。

DOM仕様とWeb API

標準化されたDOM仕様は、CSSと同様いくつかのレベルに別れており、Level 2以降はさらに機能ごとに分割されています。仕様は「Document Object Model (DOM) Technical Reports」というページで公開されています。

DOM仕様のほかにも、DOM APIを拡張した仕様がW3CのWeb Applications Working Groupやその他のWGにより策定・公開されています。一貫した名前はついていませんが、「⁠DOM API」や「Web API」などと呼ばれています。ほとんどが策定中なのですが、実装が進んでいるものをいくつか紹介します。

XMLHttpRequest: いまやWebアプリケーションになくてはならないものとなった、HTTPによる通信を行うオブジェクトです。Microsoftが独自に開発した機能ですが、他のブラウザーが実装し広く使われたこともあり、現在標準化が行われています。
Selectors API: CSSセレクターを利用し要素を取得するメソッドが定義されています。jQueryなどのJavaScriptライブラリーにある $("#foobar") に似ており, これまでのgetElementsByTagNameなどを利用した方法よりずっと直感的なアクセスを行えます。
Geolocation API: ブラウザーが取得した、緯度や経度などの位置情報にアクセスするためのAPIです。位置情報を利用するWebアプリケーションなどでの利用が期待されています。

JavaScriptとECMAScript

DOMで定義されるのはインターフェースだけになります。なので、それらを介し文書ツリーやその他のオブジェクトにアクセスする言語が必要です。DOMを利用するうえでよく使われるプログラミング言語のひとつに、JavaScriptがあります。

JavaScriptとは、「⁠ECMAScript (ECMA-262)」という言語仕様の実装になります。ECMAScriptはEcma Internationalという団体により標準化されおり、2009年11月時点の最新版は第三版 (3rd Edition) で、「⁠ECMAScript 3」と呼ばれています。

JavaScriptにもバージョンがあり、主要なブラウザーで一般的に使われているのは、ECMAScript 3準拠のJavaScript 1.5になります。MicrosoftがサポートするのはJavaScriptではなく「JScript」というJavaScript互換の言語ですが、 IE5.5以降のものであればECMAScript 3におおむね準拠しているとのことです。

Standard ECMA-262: Ecma Internationalで公開されている、ECMAScript 3の仕様書です（PDF⁠）⁠。
Under Translation of ECMA-262 3rd Edition: ECMAScript 3の日本語訳。こちらはHTML版になっているほか、正誤表なども反映されています。
What Is JScript?: MicrosoftによるJScriptの紹介。JScriptはMicrosoftによるECMAScript 3の実装といったことが書かれています。
JavaScript - Wikipedia: WikipediaによるJavaScriptの紹介。歴史やECMAScriptとの関係などがまとめられています。

非標準なDOMの存在と、実装の非互換がもたらす問題

さて、Web標準の紹介だけで済めば楽なのですが、そうもいきません。というのも、世の中には仕様のない「非標準な」オブジェクトがたくさん存在しているからです。

W3CでDOM仕様が標準化される以前より、ブラウザーはHTML文書にアクセスするオブジェクトを独自に実装していました。しかし、DOM仕様では一部のオブジェクトのみが仕様に取り込まれるだけで、大部分は標準化されませんでした。

また、ウインドウや履歴など、ブラウザーの機能にアクセスするDOM (またはBrowser Object Model, BOMとも) は、実装に依存するという問題から仕様化されることがありませんでした。

ブラウザーの標準対応状況に差異があったことなどから、DOMの標準化以降もこうしたオブジェクトは使われ続けました。また、ベンダーによる拡張なども継続して行われ、非標準なオブジェクトが増えてしまいました。

ここで困るのが、サポートする実装同士の互換性です。非標準なオブジェクトには仕様がないので、その実装はベンダーごとに独自の解釈がなされます。ですから、同じオブジェクトでもその挙動に非互換が生まれる可能性があるのです。

仕様も互換性もない状況では、開発者に負担がかかってしまいます。Webアプリケーションへの期待が高まる今、こうした問題への解決に焦点があたっています。幸いなことに、リバースエンジニアリングによる非互換の解消がすこしづつ行われてはいます。しかし、仕様が存在していないという問題は依然として残ったままです。

HTML5 ― 互換性を確保するための基盤作り

こうした実装の非互換に関する諸問題を解消しようと、2004年頃にブラウザーベンダーを中心に始まったのが、HTML5になります。HTML5では、曖昧だった仕様同士の関わりについて明記することや、前述した非標準なオブジェクトの定義などを行い、Webの土台を固めようとしています。

HTML5は、その名前から推測されるよりもずっと広い範囲をカバーしています。要素や属性の定義はもちろんですが、それらのDOMインターフェース定義や、DOMを構築するための構文解析規則やエラー処理なども仕様書に盛り込まれています。さらには、これまで仕様のなかったWindowをはじめとする非標準なオブジェクトが、その挙動を含め詳細に定義されているのです。

canvasやvideoなど、新しい要素や機能が注目されがちなHTML5ですが、こうした互換性向上のための施策も注目すべき点でしょう。特に新しい機能は、しっかりとした基礎があってはじめて機能するものですから。

さて、仕様書の大きさや実装にかかる期間、そして既存サイトや実装との互換性など、HTML5の策定にはかなりの時間が必要となります。しかしながら、HTML5の機能が勧告するまで使えないかというと、必ずしもそうではありません。CSS 2.1のように、勧告には至っていませんが広く利用されている仕様もあります（仕様自体も安定しています⁠）⁠。現時点で、そのような安定性はHTML5にはありませんが、2, 3年経てばいくつかの機能は利用しても問題ないレベルに達するのではないかと考えています[2]⁠。

ES5 ― ECMAScriptにも改訂の流れが

プラットフォームを固めるための動きは、HTMLとDOMに限りません。実装との互換性向上や新しい機能を追加すべく、ECMAScriptの改訂も進行中です。

改訂版であるECMAScript 5 (ECMA-262 5th Edition) では、ブラウザーの実装を仕様に反映させるための編集と、アクセサの導入、JSONオブジェクトの定義などが行われています。

Ecma International finalises major revision of ECMAScript: ECMAScript 5の最終ドラフト公開のアナウンス。これまでの経緯などもまとめられている。
John Resig - ECMAScript 5 Objects and Properties
John Resig - ECMAScript 5 Strict Mode, JSON, and More: jQuery開発者のJohn Resigによる、ECMAScript 5の解説。

ECMASCript 4が飛ばされているのは、4が忌み数だからというわけではなく、過去に策定されていたことによります。しかしECMAScript 3から大幅な変更を行うもので異を唱えるベンダーが多かったため、最終的に策定は停止されました。ECMASCript 5は過去にECMASCript 3.1と呼ばれていたこともあり、ECMASCript 3との互換性を維持しながら改訂された仕様になっています。

ECMAScript 5は現在、公開に向けた最終調整が行われているようです。

まとめ

HTMLやブラウザーなどの機能を利用しやすいように、DOMというオブジェクトモデルが定義されています。Webアプリケーションや動きのあるWebサイトでは、JavaScriptでDOMを操作することにより、動的な処理を実現しています。

DOMやJavaScriptには仕様があります。しかし一方で、ブラウザーによって挙動が異なる、互換性を欠く機能もたくさん存在しています。非互換をなくし、便利に使えるようにHTML5ではDOMの詳細な定義を、ECMASCript 5では実装に即した仕様の修正や機能追加を進めているところです。