はじめに
HTML が Web ページの構造と内容を定義し、CSS の集合体がフォーマットと外観を定義しているのに対し、JavaScript は Web ページに双方向性を加味し、優れた Web アプリケーションを作成するために使われます。
しかしながら、Web ブラウザとの兼ね合いで解釈されることの多いこの「JavaScript」という包括的用語は、まったく異なる複数の要素を含んでいます。その要素とは、中核となるプログラミング言語(ECMAScript)、Web API、そして DOM(Document Object Model) です。
JavaScript: コア言語 (ECMAScript)
JavaScript の中核となる言語は ECMAScript という名前の言語として ECMA TC-39 委員会で標準化されています。仕様の最新バージョンは ECMAScript 6.0 となっています。
また、このコア言語は node.js といったブラウザ以外の環境でも使用されています。
ECMAScript の該当範囲
とりわけ、ECMAScript は以下のものを定義しています。
- 言語文法(構文解析のルール、キーワード、制御フロー、オブジェクト リテラルの初期化……)
- エラー処理のメカニズム (
throw
、try/catch
、ユーザ定義エラー型の作成機能) - 型 (真偽値、数値、文字列、関数、オブジェクト……)
- グローバルオブジェクト。ブラウザ環境では、このグローバルオブジェクトは
window
オブジェクトですが、ECMAScript ではブラウザとは直接関係のない API のみが定義されています。例えばparseInt
、parseFloat
、decodeURI
、encodeURI
…… - プロトタイプベースの継承メカニズム
- 組み込まれたオブジェクトと関数(
JSON
、Math
、Array.prototype
メソッド、オブジェクト内部確認メソッド……) - Strict モード
ブラウザサポート
2014 年 8 月現在、最新バージョンの主要な Web ブラウザは ECMAScript 5.1 を実装していますが、未だ使われている古いバージョンでは ECMAScript 3 と ECMAScript 5 の一部だけが実装されています。ここ最近のブラウザは ECMAScript 6 の多くの部分をすでに実装しています。
将来
提案された第 4 版の ECMA-262 (ECMAScript 4 または ES4) は、第 3 版が 1999 年に発表されてから初めての ECMAScript のメジャーアップデートになるはずでした。2008 年 9 月現在、ECMAScript 第 4 版の提案は ECMAScript Harmony というコードネームで、特に Proxy や const
キーワードなどを定義しているプロジェクトに縮小されました。こちらから進捗状況を追うことができます。2015 年 6 月 17 日に ECMA 総会によって第 6 版が公式に承認、標準として発表されました。
国際化 API
ECMAScript 国際化 API 仕様は Ecma TC39 によって標準化された ECMAScript 言語仕様の増補仕様です。国際化 API は JavaScript アプリケーションのための照合機能(文字列比較)、数値フォーマット、日時フォーマットを提供し、アプリケーション上で言語を選択して必要に応じて各種機能を調整可能にします。標準仕様は 2012 年 12 月に承認されました。ブラウザでの実装状況は Intl
オブジェクトのドキュメントにて随時更新されています。
DOM (Document Object Model)
WebIDL
WebIDL 仕様は DOM 技術と ECMAScript とを繋ぐ機能を提供します。
DOM の中核
Document Object Model (DOM) は HTML、XHTML、XML ドキュメントのオブジェクトを表現しその情報をやりとりするための、そしてクラスプラットフォームな、言語に依存しない規則のことです。DOM ツリー内のオブジェクトは付属のメソッドを使って指定、操作できます。W3C によって Document Object Model の中核部分が標準化されており、これにより HTML や XML ドキュメントをオブジェクトとして抽象化し、その抽象化したものを取り扱うメカニズムや、言語に依存しないインターフェースが定義されています。DOM によって定義されているものには、次のものがあります :
- DOM core で定義されている、文書構造、ツリーモデルや DOM イベントアーキテクチャ。Node、Element、DocumentFragment、Document、DOMImplementation、Event、EventTarget など。
- DOM イベントアーキテクチャの大まかな定義に加え、DOM events で定義されるより具体的なイベント。
- その他、DOM Traversal や DOM Range など。
ECMAScript から見た場合、DOM 仕様で定義されるオブジェクトのことを「ホストオブジェクト」と呼びます。
HTML DOM
Web のマークアップ言語のひとつである HTML は、DOM に関しても規定しています。HTML は DOM Core 内で定義された抽象概念の上位レイヤーを形成し、更に要素の意味も定義しています。HTML DOM には HTML 要素の className
プロパティ、あるいは document.body
といった API などが含まれます。
HTML 仕様はドキュメント上の制約事項についても定義しています。例えば、「順不同リストを意味する ul
要素のすべての子は、そのリストアイテムを意味する li
要素でなければならない」などです。一般的に、標準で定義されていない要素や属性を使用することは認められていません。
Document
オブジェクトや、Window
オブジェクトなどの DOM 要素についてお探しであれば、DOM ドキュメントをご覧ください。
その他の重要な API
setTimeout
やsetInterval
関数は HTML 標準のWindow
インターフェイスによって規定されています。- XMLHttpRequest。非同期の HTTP リクエストを送ることを許可する API。
- CSS オブジェクト モデル。CSSOM は CSS のルールをオブジェクトとして抽象化したものです。
- WebWorkers。並列処理を可能にする API。
- WebSockets。双方向通信を可能にする API。
- Canvas 2D コンテキスト。
<canvas>
要素の描画 API。
ブラウザのサポート
どの Web 開発者も「DOM は面倒である」ということに悩まされてきました。ブラウザサポートの統一性はその機能によって大きく異なります。この状況の主な理由は、DOM の重要な機能の多くが、仮にあったとしてもその仕様が非常に不明確であったという事実です。また様々な Web ブラウザが、例えば Internet Explorer によるイベントモデルの使用実態と一致させようと、互換性の無い機能を追加してきました。2011 年 6 月現在、W3C と特に WHATWG が相互運用性を改善するために細部にわたって古い機能を定義しており、これらの仕様に基づいて、ブラウザへの実装は日々改善されています。
ブラウザ間の互換性保持のための一般的なアプローチのひとつとして、JavaScript のライブラリの使用が挙げられます。これらのライブラリは DOM の機能を抽象化し、異なるブラウザでこれらの API が同じように動作することを保証します。最も広く使われているフレームワークには、jQuery や prototype、YUI があります。