このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

JavaScript 技術概説

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

しかしながら、ウェブブラウザーの文脈で解釈されるこの "JavaScript" という包括的用語は、まったく異なる複数の要素を含んでいます。その要素とは、中核となるプログラミング言語 (ECMAScript)、もう一つは DOM(Document Object Model)を含む Web API 群です。

JavaScript: コア言語 (ECMAScript)

JavaScript のコア言語は、ECMA TC39 委員会によって ECMAScript という名称の言語として標準化されています。"ECMAScript" は言語標準の正式名称ですが、"ECMAScript" と "JavaScript" は互換性のある用語として使用できます。

このコア言語はまた、Node.js などのブラウザー以外の環境でも使用されています。

ECMAScript の該当範囲

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

  • 言語文法(構文解析ルール、キーワード、制御フロー、オブジェクトリテラルの初期化、...)
  • エラー処理の仕組み(throwtry...catch、ユーザー定義の Error 型の作成機能)
  • 型(論理型、数値、文字列、関数、オブジェクト、…)
  • プロトタイプベースの継承の仕組み
  • 組み込みオブジェクトと関数、たとえば JSONMathArray のメソッド、parseIntdecodeURI、など
  • 厳格モード
  • モジュールシステム
  • 基本的なメモリーモデル

標準化プロセス

ECMAScript の各版は、ECMA 総会によって毎年標準として承認・公開されています。開発の全過程は、提案書、公式仕様書、会議議事録を公開している Ecma TC39 GitHub organization で公開されています。

ECMAScript 第 6 版(ES6 と呼ばれる)以前は、仕様は数年ごとに公開されており、一般的にメジャーバージョン番号(ES3、ES5 など)で参照されていました。ES6 後、仕様は公開年(ES2017、ES2018 など)で命名されるようになりました。ES6 は ES2015 と同義です。ESNext は、執筆時点での次期バージョンを参照する動的な名称です。ESNext の機能は、定義上、仕様がまだ確定していないため、より正確には「提案」と呼ぶべきものです。

委員会で承認された ECMA-262 の最新版は、Ecma International の ECMA-262 言語仕様ページにて、PDF および HTML 書式で利用できます。ECMA-262 および ECMA-402 は、仕様編集者によって継続的に保守・更新されています。TC39 のウェブサイトは、最新の ECMA-262 および ECMA-402 のバージョンをホストしています。

新しい構文や API の導入、既存の動作の見直しなど、言語の新機能については、提案という形で議論されます。それぞれの提案は 4 段階のプロセスを踏んで、通常はステージ 3 またはステージ 4 で JavaScript エンジンに実装され、一般に利用できる状態となります。

ECMAScript の歴史に関する情報については、ウィキペディアの ECMAScript の項目をご覧ください。

国際化 API

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

関連リソース

ECMAScript 言語仕様や ECMAScript 国際化 API 仕様、および関連リソースに関する現在の取り組みに、参加したり、その進捗状況を追跡したりするには、さまざまな方法があります。

DOM API

WebIDL

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

DOM の中核

Document Object Model (DOM) は HTML、XHTML、XML 文書内のオブジェクトを表し、その情報をやりとりするための、クラスプラットフォームな言語に依存しない取り決めです。DOM ツリー内のオブジェクトはそのオブジェクトのメソッドを使って処理、操作できます。現在、DOM コア仕様は WHATWG によって維持管理されています(W3C 版に取って代わっています)。この仕様では、HTML および XML ブンショをオブジェクトとして抽象化する言語非依存のインターフェイスを定義すると同時に、この抽象化を操作するためのメカニズムも定義しています。これには、NodeElementDocumentFragmentDocumentDOMImplementationEventEventTarget などです。

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

HTML DOM

ウェブのマークアップ言語である HTML は、DOM に関しても規定しています。HTML は DOM Core 内で定義された抽象概念の上位レイヤーを形成し、更に要素の意味も定義しています。HTML DOM には HTML 要素の className プロパティ、あるいは Document.body といった API などが含まれます。

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

Document オブジェクトや、Window オブジェクトや、その他の DOM 要素についてお探しであれば、DOM ドキュメントをご覧ください。

その他の重要な API

Node.js のようなブラウザー以外の環境では、文書とやり取りを行わないため、DOM API を持たないことが多くの場合ありますが、それでも fetch()setTimeout() など、多くの Web API が実装されているのが一般的です。

JavaScript 実装

現在のウェブブラウザーで使用されている JavaScript エンジンには、次のようなものがあります。

  • Mozilla の SpiderMonkey は、Firefox、Servo、Flow などで使用されています。ブラウザー以外では、MongoDB や CouchDB などでも利用されています。これは、Netscape の Brendan Eich 氏によって作成された、史上初の JavaScript エンジンです。
  • Google の V8 は、Chrome や、Opera、Edge、Brave などの Chromium ベースのブラウザーで使用されています。ブラウザー以外でのその他の利用例として、Node.jsDenoElectron などがあります。
  • Apple の JavaScriptCore (SquirrelFish/Nitro とも呼ばれています)は、Safari やその他の WebKit ベースのブラウザーで使用されています。ブラウザー以外での利用例としては、Bun などがあります。
  • LibJS は、Ladybird で使用されています。

以前のブラウザーで使用されていた JavaScript エンジンには、次のようなものがあります。

  • Carakan は、Opera が Chromium ベースのブラウザーになるまで使われていました。
  • Microsoft の Chakra は、Internet Explorer で使用されていました(ただし、商標上の問題を避けるため、実装されている言語は正式には "JScript" と呼ばれています)。Edge が Chromium ベースのブラウザーになる前は、以前のバージョンでは別の JavaScript エンジンが使用されていましたが、紛らわしいことに、同時に Chakra と呼ばれていました。

ブラウザー以外での用途に特化した JavaScript エンジンには、次のようなものがあります:

  • Engine262 は、JavaScript で記述されており、本質的にはこの言語のリファレンス実装として意図されています。
  • Meta の Hermes は、React Native 向けに最適化されています。
  • Mozilla の Rhino は、Java で記述されています。
  • Oracle の GraalJS は、Java で記述され、GraalVM を基盤として構築されています。
  • Moddable XS は、IoT/埋め込みシステム向けに意図されています。
  • QuickJS は、コンパクトで軽量であることを意図しています。

JavaScript エンジンは、アプリケーション開発者が JavaScript を自身のソフトウェアに組み込むために利用できる公開 API を提供しています。JavaScript にとって、最も一般的な実行環境はウェブブラウザーです。ウェブブラウザーは通常、この公開 API を使用して、DOM を JavaScript で反映する役割を担うホストオブジェクトを作成します。

JavaScript のもう一つの一般的なアプリケーションは、(ウェブ)サーバーサイドのスクリプト言語としての利用です。JavaScript のウェブサーバーは、HTTP リクエストやレスポンスを表すホストオブジェクトを公開し、JavaScript プログラムがこれらを操作することで、ウェブページを動的に生成することができます。Node.js は、その代表的な例です。

シェル

JavaScript シェルを使用すれば、ウェブページを再読み込みすることなく、JavaScript コードの断片をすばやく検査することができます。コードの開発やデバッグにおいて、非常に有益です。

スタンドアロンの JavaScript シェル

以下の JavaScript シェルは、Perl や Python と同様に、独立した実行環境です。

  • Node.js - Node.js は、高速でスケーラブルなネットワークアプリケーションを簡単に構築できるプラットフォームです。
  • ShellJS - Node.js 用のポータブル Unix シェルコマンドです。

ブラウザーベースの JavaScript シェル

以下の JavaScript シェルは、ブラウザーの JavaScript エンジンを通じてコードを実行します。

  • Firefox には、複数行の編集に対応した組み込みの JavaScript コンソールが搭載されています。
  • Babel REPL - ブラウザーベースの REPL で、次世代の JavaScript を試すことができます。
  • TypeScript playground — 新しい JavaScript の機能(tsc コンパイラー経由)と TypeScript の構文の両方を試すことができる、ブラウザーベースの実験環境です。

ツールとリソース

JavaScript コードの作成やデバッグに役立つツールです。

Firefox 開発者ツール

ウェブコンソールJavaScript プロファイラーデバッガー、など。

Learn JavaScript

ウェブ開発者を目指す方にとって素晴らしい学習リソースです。自動化された評価機能によるガイドのもと、短いレッスンとインタラクティブなテストを通じて、対話型の環境で JavaScript を学ぶことができます。最初の 40 レッスンは無料で、コース全体は少額の 1 回限りの支払いで利用可能です。

TogetherJS

コラボレーションが簡単に。サイトに TogetherJS を追加するだけで、ユーザー同士がウェブサイト上でリアルタイムに助け合えるようになります!

Stack Overflow

Stack Overflow の質問で、"JavaScript" とタグ付けされたもの。

JSFiddle

JavaScript、CSS、HTML を編集して、リアルタイムで結果を取得できます。外部リソースを使用し、チームとオンラインで共同作業を行えます。

Plunker

Plunker は、ウェブ開発のアイディアを作成・共同作業・共有するためのオンラインコミュニティです。JavaScript、CSS、HTML ファイルを編集すると、リアルタイムで結果やファイル構造を取得できます。

JS Bin

JS Bin は、オープンソースの共同ウェブ開発用デバッグツールです。

CodePen

CodePen は、リアルタイムで結果を確認できるウェブ開発環境として使用されている、もう一つの共同ウェブ開発ツールです。

StackBlitz

StackBlitz は、React や Angular などを使用したフルスタックアプリケーションをホスト・展開可能で、もうひとつのオンライン開発環境/デバッグツールです。

RunJS

RunJS は、デスクトップ用のテスト環境/メモ帳ツールであり、リアルタイムで結果を確認できるほか、ノードおよびブラウザーの API の両方を提供します。