files/ja/web/javascript/javascript_technologies_overview/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

---
title: JavaScript 技術概説
slug: Web/JavaScript/JavaScript_technologies_overview
tags:
  - Beginner
  - DOM
  - JavaScript
translation_of: Web/JavaScript/JavaScript_technologies_overview
---
<div>{{JsSidebar("Introductory")}}</div>

<h2 id="Introduction" name="Introduction">はじめに</h2>

<p><a href="/ja/docs/Web/HTML">HTML</a> がウェブページの構造と内容を定義し、<a href="/ja/docs/Web/CSS">CSS</a> が書式と外観を定義しているのに対し、<a href="/ja/docs/Web/JavaScript">JavaScript</a> はインタラクティブ機能をウェブページに追加し、豊かなウェブアプリケーションを作成します。</p>

<p>しかしながら、ウェブブラウザーの文脈で解釈されるこの「JavaScript」という包括的用語は、まったく異なる複数の要素を含んでいます。その要素とは、中核となるプログラミング言語（ECMAScript）、もう一つは DOM（Document Object Model）を含んだ <a href="/ja/docs/Web/Reference/API">Web API</a> 群です。</p>

<h2 id="JavaScript_the_core_language_(ECMAScript)" name="JavaScript_the_core_language_(ECMAScript)">JavaScript: コア言語 (ECMAScript)</h2>

<p>JavaScript の中核となる言語は <a href="/ja/docs/JavaScript/Language_Resources">ECMAScript</a> という名前の言語として ECMA TC39 委員会で標準化されています。</p>

<p>このコア言語はまた、<a href="http://nodejs.org/">node.js</a> といったブラウザー以外の環境でも使用されています。</p>

<h3 id="What_falls_under_the_ECMAScript_scope" name="What_falls_under_the_ECMAScript_scope">ECMAScript の該当範囲</h3>

<p>とりわけ、ECMAScript は以下のものを定義しています。</p>

<ul>
 <li>言語文法（構文解析のルール、キーワード、制御フロー、オブジェクトリテラルの初期化、…）</li>
 <li>エラー処理のメカニズム （<code>throw</code>、<code>try/catch</code>、ユーザー定義エラー型の作成機能）</li>
 <li>型 （真偽値、数値、文字列、関数、オブジェクト、…）</li>
 <li>グローバルオブジェクト。ブラウザー環境では、このグローバルオブジェクトは <code>window</code> オブジェクトですが、ECMAScript ではブラウザーとは直接関係のない API のみが定義されています。例えば <code>parseInt</code>、<code>parseFloat</code>、<code>decodeURI</code>、<code>encodeURI</code>……</li>
 <li>プロトタイプベースの継承メカニズム。その対象は次のもの:</li>
 <li>ビルトインオブジェクトと関数（<code>JSON</code>、<code>Math</code>、<code>Array.prototype</code> メソッド、オブジェクト内部確認メソッド……）</li>
 <li>Strict モード (<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode">ここ</a>を見てください)</li>
</ul>

<h3 id="Browser_support" name="Browser_support">ブラウザーサポート</h3>

<p>2016 年 10 月以降、主要ウェブブラウザーの現在のバージョンは、<a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> と <a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 2015（ES6 としても知られる）</a>を実装していますが、（まだ使用中の）古いバージョンは ECMAScript 5 のみが実装されています。</p>

<h3 id="Future" name="Future">将来</h3>

<p>ECMAScript の第 6 版は、ECMA 総会で 2015 年 6 月 17 日に正式に承認され、標準として公開されました。それ以来、ECMAScript の版は毎年発行されています。</p>

<h3 id="Internationalization_API" name="Internationalization_API">国際化 API</h3>

<p><a href="http://ecma-international.org/ecma-402/1.0/">ECMAScript 国際化 API 仕様</a>は Ecma TC39 によって標準化された ECMAScript 言語仕様の増補仕様です。国際化 API は JavaScript アプリケーションのための照合機能（文字列比較）、数値フォーマット、日時フォーマットを提供し、アプリケーション上で言語を選択して必要に応じて各種機能を調整可能にします。標準仕様は 2012 年 12 月に承認されました。ブラウザーでの実装状況は <a href="/ja/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> オブジェクト</a>のドキュメントにて随時更新されています。国際化標準は昨今、毎年承認されてブラウザーは常に実装を改良しています。</p>

<h2 id="DOM_API" name="DOM_API">DOM API</h2>

<h3 id="WebIDL" name="WebIDL">WebIDL</h3>

<p><a href="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL 仕様</a>は DOM 技術と ECMAScript とを繋ぐ機能を提供します。</p>

<h3 id="The_Core_of_the_DOM" name="The_Core_of_the_DOM">DOM の中核</h3>

<p>Document Object Model (DOM) は HTML、XHTML、XML ドキュメント内のオブジェクトを表し、その情報をやりとりするための、クラスプラットフォームな<strong>言語に依存しない取り決め</strong>です。<strong>DOM ツリー</strong>内のオブジェクトはそのオブジェクトのメソッドを使って処理、操作できます。{{glossary("W3C")}} によって Document Object Model の中核部分が標準化されており、これにより HTML や XML ドキュメントをオブジェクトとして抽象化して言語に依存しないインターフェイスを定義し、その抽象化したものを取り扱うメカニズムも定義されます。DOM によって定義されているものには、次のものがあります :</p>

<ul>
 <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core</a> で定義されている、文書構造、ツリーモデルや DOM イベントアーキテクチャ。<code>Node</code>、<code>Element</code>、<code>DocumentFragment</code>、<code>Document</code>、<code>DOMImplementation</code>、<code>Event</code>、<code>EventTarget</code> など。</li>
 <li>DOM イベントアーキテクチャの大まかな定義に加え、<a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a> で定義されるより具体的なイベント。</li>
 <li>その他、<a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> や <a href="http://html5.org/specs/dom-range.html">DOM Range</a> など。</li>
</ul>

<p>ECMAScript から見た場合に、DOM 仕様で定義されるオブジェクトのことを「ホストオブジェクト」と呼びます。</p>

<h3 id="HTML_DOM" name="HTML_DOM">HTML DOM</h3>

<p>ウェブのマークアップ言語である <a href="http://www.whatwg.org/html">HTML</a> は、DOM に関しても規定しています。HTML は DOM Core 内で定義された抽象概念の上位レイヤーを形成し、更に要素の意味も定義しています。HTML DOM には HTML 要素の <code>className</code> プロパティ、あるいは {{domxref("document.body")}} といった API などが含まれます。</p>

<p>HTML 仕様はドキュメント上の制約事項についても定義しています。例えば、「順序なしリストを意味する <code>ul</code> 要素のすべての子は、そのリストアイテムを意味する <code>li</code> 要素でなければならない」などです。一般に、標準で定義されていない要素や属性を使用することは禁止されています。</p>

<p><a href="/ja/docs/DOM/document"><code>Document</code> オブジェクト</a>や、<a href="/ja/docs/DOM/window"><code>Window</code> オブジェクト</a>や、その他の DOM 要素についてお探しであれば、<a href="/ja/docs/Web/API/Document_Object_Model">DOM ドキュメント</a>をご覧ください。</p>

<h2 id="Other_notable_APIs" name="Other_notable_APIs">その他の重要な API</h2>

<ul>
 <li><code>setTimeout</code> や <code>setInterval</code> 関数は HTML 標準の <code><a href="http://www.whatwg.org/html/#window">Window</a></code> インターフェイスによって最初に規定されていました。</li>
 <li><a href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> は非同期の HTTP リクエストを送ることを可能にする API です。</li>
 <li><a href="http://dev.w3.org/csswg/cssom/">CSS オブジェクト モデル</a> (CSSOM) は CSS のルールをオブジェクトとして抽象化したものです。</li>
 <li><a href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers</a> は並列処理を可能にする API です。</li>
 <li><a href="http://www.whatwg.org/C/#network">WebSockets</a> は双方向通信を可能にする API です。</li>
 <li><a href="http://www.whatwg.org/html/#2dcontext">Canvas 2D コンテキスト</a>は{{htmlelement("canvas")}} 要素の描画 API です。</li>
</ul>

<h3 id="Browser_support_2" name="Browser_support_2">ブラウザーサポートについて</h3>

<p>どのウェブ開発者も「<a href="http://ejohn.org/blog/the-dom-is-a-mess/">DOM は面倒である</a>」ということに悩まされてきました。ブラウザーのサポートの統一性はその機能によって大きく異なります。この状況の主な理由は、DOM の重要な機能の多くが、仮にあったとしてもその仕様が非常に不明確であったという事実です。また様々なウェブブラウザーが、例えば Internet Explorer によるイベントモデルの使用実態と一致させようと、互換性の無い機能を追加してきました。2011 年 6 月以降、W3C と特に WHATWG が相互運用性を改善するために細部にわたって古い機能を定義しており、これらの仕様に基づいて、ブラウザーへの実装は日々改善されています。</p>

<p>ブラウザー間の互換性保持のための一般的な (おそらく最も信頼できるわけではない) アプローチのひとつとして、JavaScript のライブラリーの使用が挙げられます。これらのライブラリーは DOM の機能を抽象化し、異なるブラウザーでこれらの API が同じように動作するようにします。最も広く使われているフレームワークには、<a href="http://jquery.com/">jQuery</a> や <a href="http://www.prototypejs.org/">prototype</a>、<a href="http://developer.yahoo.com/yui/">YUI</a> があります。</p>