Join MDN and developers like you at Mozilla's View Source conference, November 2-4 in Portland, Oregon. Learn more at https://viewsourceconf.org/.

Revision 315209 of JavaScript 技術概説

  • リビジョンの URL スラグ: JavaScript_technologies_overview
  • リビジョンのタイトル: JavaScript 技術概説
  • リビジョンの ID: 315209
  • 作成日:
  • 作成者: sii
  • 現行リビジョン いいえ
  • コメント translated English to Japanese
タグ: 

このリビジョンの内容

導入

HTML は Web ページのコンテンツや書式を格納するために使われ、 CSS は整えられたコンテンツが視覚的にどのように表示されるべきかというスタイルを記号化する一方、 JavaScript はリッチな効果、リッチな Web アプリケーションを作成するために使われます。しかしながら、 Web ブラウザの関係で理解されている「JavaScript」という包括的用語は、異なるいくつかの要素を含んでいます。その1つはコア言語(ECMAScript) で、もう1つは DOM (Document Object Model) です。

JavaScript: コア言語 (ECMAScript)

JavaScript のコア言語は ECMA の TC-39 委員会で ECMAScript という名前の言語として標準化されています。2011年3月現在、仕様の最新バージョンは ECMAScript 5 で、ほとんどの Web ブラウザが ECMAScript 3 と一部の ECMAScript 5 を実装しています。

何が ECMAScript の範囲に該当する?

特に、 ECMAScript は以下のことを規定します。

  • 言語の文法 (構文解析のルール、キーワード、制御の流れ、オブジェクト リテラルの初期化…)
  • エラー処理のメカニズム (throw、try/catch、ユーザ定義のエラー型の作成が可能なこと)
  • 型 (boolean、number、string、function、object…)
  • グローバルオブジェクト。ブラウザ環境では、このグローバルオブジェクトは window オブジェクトです。いくつかの関数がこのオブジェクトに加えられる (parseInt、parseFloat、decodeURI、encodeURI…)
  • プロトタイプ ベースの継承メカニズム
  • 組み込みオブジェクトと関数 (JSON、Math、Array.prototype メソッド、Object オブジェクトの内省メソッド…)
  • Strict モード

ブラウザ サポート

歴史的に、 ECMAScript の特性は相互運用性のある方法でうまくサポートされました。 2011 年 6 月現在、実装の違いは ECMAScript 5 のサポートについて見つけることができます。いくつかのリソースが、 ECMAScript 5 のブラウザサポートについて示します。

将来

提案された第 4 版の ECMA-262 (ECMAScript 4 または ES4) は、第 3 版が1999 年に発表されてから初めての ECMAScript へのメジャーアップデートになるはずでした。 2008 年 9 月現在、 ECMAScript 第 4 版の提案は ECMAScript Harmony というコードネームの、特に Proxy や const キーワードなどを定義しているプロジェクトに縮小されています。こちらから進捗状況を追うことができます。

DOM (Document Object Model)

WebIDL

WebIDL の仕様 は DOM 技術と ECMAScript を繋ぐ機能を提供します。

DOM Core

Document Object Model Core は W3C によって標準化されています。 DOM Core は、 HTML や XML 文書をオブジェクトや機構として抽象化し操作するための、言語にとらわれないインターフェイスを定義します。例えば、以下のものが DOM によって定義されていることがわかります。

  • DOM core では文書構造、モデル木や DOM イベントの構造。 Node、Element、DocumentFragment、Document、DOMImplementation、Event、EventTarget など
  • DOM events の具体的なイベントに加えて、 DOM イベントの構造のあまり厳密ではない定義
  • その他、 DOM TraversalDOM Range など

ECMAScript の視点からは、 DOM 仕様で定義されるオブジェクトは「ホストオブジェクト」と呼ばれます。

HTML DOM

Web のマークアップ言語の1つである HTML は、 DOM に関しても記述されています。 DOM Core における抽象化の概念の上に重ねて、 HTML はまた要素の意味を定義しています。 HTML DOM は HTML 要素の className プロパティ、あるいは {{ domxref("document.body") }} のような API などを含んでいます。

HTML 仕様はまた、文書での制限について定義します。例えば、順不同リストを意味する ul 要素のすべての子は、そのリストアイテムを意味する li 要素であることが必要です。一般的に、標準で定義されていない要素や属性を使用することは認められていません。

注目すべきその他の 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 が相互運用性を改善するために細部にわたって古い機能を定義していることです。この流行を追って、ブラウザはこれらの仕様に基づきその実装を改善しています。

1つの一般的な、ただし恐らく最も信頼できるものではないかもしれない、ブラウザ間の互換性のためのアプローチは、 JavaScript のライブラリを使用することです。これらのライブラリは DOM の機能を抽象化し、異なるブラウザでこれらの API が同じように動作することを保証します。最も広く使われているフレームワークには、 jQueryprototypeYUI があります。

このリビジョンのソースコード

<h2 id=".E5.B0.8E.E5.85.A5">導入</h2>
<p>HTML は Web ページのコンテンツや書式を格納するために使われ、 CSS は整えられたコンテンツが視覚的にどのように表示されるべきかというスタイルを記号化する一方、 JavaScript はリッチな効果、リッチな Web アプリケーションを作成するために使われます。しかしながら、 Web ブラウザの関係で理解されている「JavaScript」という包括的用語は、異なるいくつかの要素を含んでいます。その1つはコア言語(ECMAScript) で、もう1つは DOM (Document Object Model) です。</p>
<h2 id="JavaScript.3A_.E3.82.B3.E3.82.A2.E8.A8.80.E8.AA.9E_(ECMAScript)">JavaScript: コア言語 (ECMAScript)</h2>
<p>JavaScript のコア言語は ECMA の TC-39 委員会で <a href="/en/JavaScript/Language_Resources" title="/en/JavaScript/Language_Resources">ECMAScript</a> という名前の言語として標準化されています。2011年3月現在、仕様の最新バージョンは ECMAScript 5 で、ほとんどの Web ブラウザが ECMAScript 3 と一部の<a class="external" href="http://wiki.ecmascript.org/lib/exe/fetch.php?id=start&amp;cache=cache&amp;media=resources:tc39-2010-062-rev5p.pdf" title="http://wiki.ecmascript.org/lib/exe/fetch.php?id=start&amp;cache=cache&amp;media=resources:tc39-2010-062-rev5p.pdf"> ECMAScript 5</a> を実装しています。</p>
<h3 id=".E4.BD.95.E3.81.8CECMAScript.E3.81.AE.E7.AF.84.E5.9B.B2.E3.81.AB.E8.A9.B2.E5.BD.93.E3.81.99.E3.82.8B.EF.BC.9F">何が ECMAScript の範囲に該当する?</h3>
<p>特に、 <a href="/en/JavaScript/Language_Resources" title="/en/JavaScript/Language_Resources">ECMAScript</a> は以下のことを規定します。</p>
<ul>
  <li>言語の文法 (構文解析のルール、キーワード、制御の流れ、オブジェクト リテラルの初期化…)</li>
  <li>エラー処理のメカニズム (throw、try/catch、ユーザ定義のエラー型の作成が可能なこと)</li>
  <li>型 (boolean、number、string、function、object…)</li>
  <li>グローバルオブジェクト。ブラウザ環境では、このグローバルオブジェクトは window オブジェクトです。いくつかの関数がこのオブジェクトに加えられる (parseInt、parseFloat、decodeURI、encodeURI…)</li>
  <li>プロトタイプ ベースの継承メカニズム</li>
  <li>組み込みオブジェクトと関数 (JSON、Math、Array.prototype メソッド、Object オブジェクトの内省メソッド…)</li>
  <li>Strict モード</li>
</ul>
<h3 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6_.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88">ブラウザ サポート</h3>
<p>歴史的に、 ECMAScript の特性は相互運用性のある方法でうまくサポートされました。 2011 年 6 月現在、実装の違いは ECMAScript 5 のサポートについて見つけることができます。<a class="external" href="http://kangax.github.com/es5-compat-table/" title="http://kangax.github.com/es5-compat-table/">いくつかのリソース</a>が、 ECMAScript 5 のブラウザサポートについて示します。</p>
<h3 id=".E5.B0.86.E6.9D.A5">将来</h3>
<p>提案された第 4 版の ECMA-262 (ECMAScript 4 または ES4) は、第 3 版が1999 年に発表されてから初めての ECMAScript へのメジャーアップデートになるはずでした。 2008 年 9 月現在、 ECMAScript 第 4 版の提案は <a class="external" href="http://en.wikipedia.org/wiki/ECMAScript#ECMAScript_Harmony" title="http://en.wikipedia.org/wiki/ECMAScript#ECMAScript_Harmony">ECMAScript Harmony</a> というコードネームの、特に Proxy や <code>const</code> キーワードなどを定義しているプロジェクトに縮小されています。<a class="external" href="http://wiki.ecmascript.org/doku.php" title="http://wiki.ecmascript.org/doku.php">こちら</a>から進捗状況を追うことができます。</p>
<h2 id="DOM_(Document_Object_Model)">DOM (Document Object Model)</h2>
<h3 id="WebIDL">WebIDL</h3>
<p><a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL の仕様</a>&nbsp;は DOM 技術と ECMAScript を繋ぐ機能を提供します。</p>
<h3 id="DOM_.E3.81.AE.E3.82.B3.E3.82.A2">DOM Core</h3>
<p>Document Object Model Core は W3C によって標準化されています。 DOM Core は、 HTML や XML 文書をオブジェクトや機構として抽象化し操作するための、言語にとらわれないインターフェイスを定義します。例えば、以下のものが DOM によって定義されていることがわかります。</p>
<ul>
  <li><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core</a> では文書構造、モデル木や DOM イベントの構造。 Node、Element、DocumentFragment、Document、DOMImplementation、Event、EventTarget など</li>
  <li><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a> の具体的なイベントに加えて、 DOM イベントの構造のあまり厳密ではない定義</li>
  <li>その他、 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> や <a class="external" href="http://html5.org/specs/dom-range.html" title="http://html5.org/specs/dom-range.html">DOM Range</a> など</li>
</ul>
<p>ECMAScript の視点からは、 DOM 仕様で定義されるオブジェクトは「ホストオブジェクト」と呼ばれます。</p>
<h3 id="HTML_DOM">HTML DOM</h3>
<p>Web のマークアップ言語の1つである <a class="external" href="http://www.whatwg.org/html" title="http://www.whatwg.org/html">HTML</a> は、 DOM に関しても記述されています。 DOM Core における抽象化の概念の上に重ねて、 HTML はまた要素の<em>意味</em>を定義しています。 HTML DOM は HTML 要素の <code>className</code> プロパティ、あるいは {{ domxref("document.body") }} のような API などを含んでいます。</p>
<p>HTML 仕様はまた、文書での制限について定義します。例えば、順不同リストを意味する <code>ul</code> 要素のすべての子は、そのリストアイテムを意味する <code>li</code> 要素であることが必要です。一般的に、標準で定義されていない要素や属性を使用することは認められていません。</p>
<h2 id="Other_notable_APIs">注目すべきその他の API</h2>
<ul>
  <li>setTimeout や setInterval 関数は HTML 標準の Window インターフェイスで初めて規定されています。</li>
  <li><a class="external" href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/" title="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XMLHttpRequest</a>。非同期の HTTP リクエストを送ることを許可する API です。</li>
  <li><a class="external" href="http://dev.w3.org/csswg/cssom/">CSS オブジェクト モデル</a>。 CSSOM は CSS のルールをオブジェクトとして抽象化します。</li>
  <li><a class="external" href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers</a>。並列処理を許可する API です。</li>
  <li><a class="external" href="http://www.whatwg.org/C/#network">WebSockets</a>。双方向通信を許可する API です。</li>
  <li><a class="external" href="http://www.whatwg.org/html/#2dcontext" title="http://www.whatwg.org/html/#2dcontext">Canvas 2D コンテキスト</a>。 canvas 要素のための描画 API です。</li>
</ul>
<h2 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.AE.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88">ブラウザのサポート</h2>
<p>どの Web 開発者も「<a class="external" href="http://ejohn.org/blog/the-dom-is-a-mess/" title="http://ejohn.org/blog/the-dom-is-a-mess/">DOM は面倒である</a>」ということに悩まされてきました。ブラウザのサポートの統一性は、機能によって大きく異なります。この状況の主な理由は、 DOM の多くの重要な機能は、あったとしてもその仕様が非常に不明確であったという事実です。また、異なる Web ブラウザが、 Internet Explorer のイベントモデルのような使用事例と重複するために互換性の無い機能を追加してきました。現在(2011 年 6 月現在)の流行は W3C 、とりわけ WHATWG が相互運用性を改善するために細部にわたって古い機能を定義していることです。この流行を追って、ブラウザはこれらの仕様に基づきその実装を改善しています。</p>
<p>1つの一般的な、ただし恐らく最も信頼できるものではないかもしれない、ブラウザ間の互換性のためのアプローチは、 JavaScript のライブラリを使用することです。これらのライブラリは DOM の機能を抽象化し、異なるブラウザでこれらの API が同じように動作することを保証します。最も広く使われているフレームワークには、 <a class="external" href="http://jquery.com/">jQuery</a> や <a class="external" href="http://www.prototypejs.org/">prototype</a>、 <a class="external" href="http://developer.yahoo.com/yui/">YUI</a> があります。</p>
このリビジョンへ戻す