検索
連載

ECMAScriptDev Basics/Keyword

ECMAScriptはいわゆる「JavaScript」と呼ばれる言語の統一的な仕様を、標準化団体の1つであるEcma Internationalが取りまとめたもの。

Share
Tweet
LINE
Hatena
「Dev Basics/Keyword」のインデックス

連載目次

 ECMAScriptはいわゆる「JavaScript」と呼ばれる言語の統一的な仕様を、標準化団体の1つであるEcma Internationalが取りまとめたもの。

JavaScriptとECMAScript

 ECMAScriptの源泉は、Netscape Navigatorと呼ばれるWebブラウザ上に実装され、Webブラウザ内で静的なWebコンテンツに動的な効果を与えるために使われていた「JavaScript」である(この言語は最終的には「JavaScript」という名前に落ち着いたが、その前には「Mocha」「LiveScript」という名前も付けられていた)。その後、Internet Explorerにもこの言語のマイクロソフト版の実装である「JScript」が搭載されるとともに、独自の機能拡張が行われた。

 JavaScriptとJScriptはよく似ており、それなりの互換性もあったが、差異もあり、加えてNetscape NavigatorとInternet ExplorerによるHTMLやCSSの解釈/描画の違いなどから、JavaScript/JScriptの両者をサポートするWebページの作成は難しいものだった。あるWebページを閲覧すると、その表示がNetscape NavigatorとInternet Explorerで異なるものになるという問題もあった(「第一次ブラウザ戦争」という言葉で表されるように、1990年代半ばはWebブラウザのシェア争いが激しく、ブラウザ間での互換性よりも他社製品との差別化が重視されていた)。

 そうした中で、1996年秋からEcma InternationalにおいてECMA-262としての標準化作業が開始され、1997年にはECMAScriptの言語仕様の初版が発行された。以降、数度の改訂を経て、2009年に発行/2011年に改訂されたECMAScript 5(5.1)が「JavaScript」の標準的な言語仕様として長らく使われてきた。なお、現在では1年に一度、新バージョンの言語仕様が発行されるようになり、2015年にはECMAScript 2015(バージョン6)が、2016年にはECMAScript 2016が(バージョン7)がリリースされている。

 一般に「JavaScript」と呼ばれる言語は、この言語仕様に準拠したスクリプト言語のことであり、さまざまなブラウザやアプリにおいて「JavaScript」をはじめとするさまざまな名前で呼ばれている。

プロトタイプベースのオブジェクト指向言語

 言語としてのECMAScriptの大きな特徴は、これが「プロトタイプベースのオブジェクト指向言語である」ことである。ECMAScript 2015以降ではクラスベースのオブジェクト指向的な記述も可能になっているが、これはあくまでもプロトタイプベースのオブジェクト指向プログラミングをラップするものだと考えられる。

 例えば、ECMAScript 2015のクラス構文を使うと、次のようにしてFooクラスとそのインスタンスfを作成できる。

class Foo {
  constructor(name) {
    this.name = name;
  }
  hello() {
    console.log("hello " + this.name);
  }
}

const f = new Foo("insider.net");
f.hello();

クラスベースでのクラス記述

 これは以下のコードとほぼ同様である(これはTypeScriptで上のコードをトランスパイルしたもの)。

var Foo = (function () {
  function Foo(name) {
    this.name = name;
  }
  Foo.prototype.hello = function () {
    console.log("hello " + this.name);
  };
  return Foo;
}());

var f = new Foo("insider.net");
f.hello();

プロトタイプベースでのクラス記述

 実際にそうなっているかどうかは最初に見たクラスベースのプログラムに次のコードを追加してみると分かる。

class Foo {
  …… 省略 ……
}

const f = new Foo("insider.net");
f.hello();
console.log(Foo.prototype.hello);
Foo.prototype.hello.call(f);

プロトタイプを調べてみる

 詳しい説明は割愛するが、ECMAScriptでオブジェクト指向プログラミングを行う際には、「プロトタイプ」が大きな役割を果たす。オブジェクトは何らかのプロトタイプを基に作成され、そのプロトタイプが持つ特性を利用できるようになっている。この特徴を利用して、クラスベースのオブジェクト指向プログラミングと同様な記述を行うには、あるクラスのコンストラクタ役となる関数(コンストラクタ関数)を定義するとともに、インスタンスメソッドをコンストラクタ関数の「プロトタイプ」と呼ばれるオブジェクト(prototypeオブジェクト)のプロパティに設定するといった記述を行う(上のリスト「プロトタイプベースでのクラス記述」ではこれを行っている)。

 そこで実際にコンストラクタ関数のプロトタイプにアクセスしてみようというのが追加した2行だ。最初の行はプロトタイプのhelloプロパティをコンソールに出力し、次の行はインスタンスfを対象としてその関数を呼び出している。Node.jsを用いて実行した結果は次のようになる。

> node foo.js
hello insider.net  ← f.hello()呼び出しの結果
[Function: hello]  ← Foo関数のプロトタイプのhelloプロパティの値
hello insider.net  ← helloプロパティの値(関数)を呼び出した結果


上のコードの実行結果

 ご覧の通り、プロトタイプを利用して、インスタンスメソッドにアクセスできているのが分かる。なお、Node.jsを利用した場合、例えば、以下のようなコードを実行してもプロトタイプのプロパティとしてインスタンスメソッドが表示されない。

console.log(Foo.prototype);
for (var item in Foo.prototype) {
  console.log(item);
}

prototypeが持つプロパティを表示したい

 これは恐らくprototypeへのインスタンスメソッドの登録時に列挙を許さないような指定を行っているからだと思われる(Babelでトランスパイルしたコード例が参考になるので、興味のある方はこちらのリンクをご覧いただきたい)。

 少し話がよじれたが、ECMAScriptはあくまでもプロトタイプベースのオブジェクト指向言語であり、クラスベースのプログラミングも可能な構文が用意されたものだと考えるべきである。

 この他にも動的型付け言語、関数がファーストクラスオブジェクト(関数の引数として関数を渡したり、戻り値として関数を返したりできる)、シングルスレッドで動作、言語としてI/O処理を持たないなどの特徴がある。

適用領域

 冒頭でも述べた通り、ECMAScript(JavaScript)はもともと静的なWebページに動きを与えるなどの目的で作られ、Webブラウザ内で動作するものだった。しかし、現在のJavaScriptはブラウザから飛び出して、Node.jsを用いたサーバサイドプログラミングや、さらにWeb技術を利用してのデスクトップアプリ開発など、幅広い領域で使われるようになっている。

 ECMAScriptの適用領域が広がり、大規模アプリ開発にも使われるようになったことから、上で述べたクラス構文を使って明確な型を記述できるようになったことには大きなメリットがあると思われる。また、TypeScriptFlowに見られるように、型注釈を付加することで、動的型付け言語でありながら、静的な型解析を行い、型安全なプログラミングを行えるような取り組みも行われている(これも大規模アプリ開発におけるECMAScriptの利用を念頭においたものだろう)。

 適用領域の広まりとともに、ECMAScriptはより便利で魅力的な言語へと変化を続けているといえる。


 ECMAScriptはいわゆる「JavaScript」と呼ばれる言語の統一的な仕様を、標準化団体の1つであるEcma Internationalが取りまとめたもの。さまざまな変遷をたどりながら、現在では第一級のプログラミング言語として、Webのクライアントサイドのみならず、多くの領域で利用されるようになっている。

参考資料

  • ECMAScript 2016 Specification: 執筆時点(2017年2月13日)で最新のECMAScript言語仕様
  • Ecma TC39/ecma262: ECMAScriptの言語仕様を策定しているTC39(Technical Committee 39)のGitHub上で公開しているリポジトリ。現在提案中の仕様などを確認できる
  • ブラウザ戦争: Wikipediaでのブラウザ戦争についての解説

「Dev Basics/Keyword」のインデックス

Dev Basics/Keyword

Copyright© Digital Advantage Corp. All Rights Reserved.

ページトップに戻る