未来・次世代
第1回 ECMAScriptとJavaScriptの関係

第1回目ではJavaScriptの仕様であるECMAScriptの策定を解説します。どのような段階を経てリリースされるか知っておきましょう。次回以降は、策定中の機能から、注目したいものを紹介します。

2016年09月15日発行

目次

皆さんが普段何気なく使っているJavaScriptですが、その仕様はどこで決まっているのでしょうか?

実はJavaScriptにはECMAScript(エクマスクリプト)という仕様があり、その仕様に基づき各ブラウザエンジンに実装されたものが、普段我々が記述しているJavaScriptなのです。

つまりECMAScriptを知ることで、未来のJavaScriptを先取りすることができます。

このシリーズでは、そんなECMAScriptそのものについて、また現在策定中のECMAScriptの仕様の一部を紹介していきます。

ECMAScriptとは

冒頭でも触れましたが、JavaScriptは実装された結果であり、実装のための仕様としてECMAScriptが存在します。

このECMAScriptは、Ecma Internationalという団体により標準化されています。そして、ECMAScriptには検討中の仕様(プロポーザル)がいくつもあり、TC39という専門委員会がその策定をしています。

これらのプロポーザルが、後述するプロセスを経てブラウザエンジンに実装されることで、私たちがJavaScriptとして使えるものになります。

現在どのような仕様が提案されているか、またそれぞれの策定がどの程度進んでいるかなども、GitHubのリポジトリで確認することができるようになっています。

ECMAScriptの策定プロセス

ここで少し、ECMAScriptの仕様の策定プロセスについておさらいしておきましょう。新たな仕様として提出されたプロポーザルは、どのようなプロセスを経て実装されていくのでしょうか。

TC39のドキュメントにあるように、プロポーザルは、次のように5つのステージに分類されます。

Stage 名称 状態
0 Strawman ただのアイデア
1 Proposal アイデアがプロポーザルとして認められ、議論を進めている
2 Draft ドラフトとして、APIや構文についての仕様書がある
3 Candidate 仕様としては完成しており、実装やフィードバックを待っている
4 Finished 仕様の策定が完了している

現在のECMAScriptのリリースサイクルは1年ごとです。毎年のリリースタイミングで、Stage 4となっていたものが、その年のES20**の仕様としてリリースされます。

ただし、ECMAScript仕様としてリリースされたからといって、それがすぐに利用できるわけではありません。基本的には、リリースされた仕様がブラウザエンジンに実装されるのを待つか、Babelのようなトランスパイラを利用する必要があります。

提出されているプロポーザル

さて、このシリーズではそんなECMAScriptのプロポーザルの中から、いくつかを取り上げて紹介していきます。これらは未来のES20**と言えるかもしれません。

GitHubのtc39/proposalsリポジトリにある、記事執筆時点でのStage 1からStage 3の段階にあるプロポーザルを表にしました。

Proposal Stage
SIMD.JS - SIMD APIs + polyfill 3
Function.prototype.toString revision 3
Lifting Template Literal Restriction 3
Asynchronous Iterators 2
function.sent metaproperty 2
Rest/Spread Properties 2
Shared memory and atomics 2
System.global 2
String.prototype.{trimStart,trimEnd} 2
Public Class Fields 2
Promise.prototype.finally 2
Class and Property Decorators 2
Date.parse fallback semantics 1
export * as ns from "mod"; statements 1
export v from "mod"; statements 1
Observable 1
String#matchAll 1
Private Fields 1
WeakRefs 1
Frozen Realms 1
Cancelable Promises 1
RegExp Unicode Property Escapes 1
Math Extensions 1

既存のオブジェクトへメソッドを追加するものから、まったく新しい機能の提案まで、多種多様なプロポーザルがあります。

次期JavaScriptの記法を先取りしておくという意味では、Stage 2やStage 3のものを見ておくと良いと思います。仕様に入ることが確定していないという意味ではStage 1やStage 0も同じですが、これらはまだAPIや使い方が変更になる可能性が高く、流動的です。

Babelを使う

さて、今後このシリーズでは、Stage 2、Stage 3にあるプロポーザルからいくつかを紹介していきます。

実際に試すにあたっては、ブラウザにはまだ実装されていませんので、Babelのプラグインを使用して解説することになります。ここでその設定にも触れておきます。

Babelの基本的な使い方については、CodeGridでも過去にBabelを取り上げたシリーズ「Babelの手ほどき」がありますので、そちらも併せて参考にしてください。

Babelのプラグインには、それぞれのStageごとのプリセットが用意されています。

Stage 0のプリセットをインストールすると、Stage 0より上位のStage3までのプリセットに含まれる機能がすべてインストールされます(同様にStage 2のプリセットならStage 2とStage 3が含まれる)。

個別のプロポーザルの機能を試す場合には、プリセットではなく、それぞれ個別のプラグインをインストールするようにします。

また、Stage 2のClass and Property Decoratorsは、現在Stage 2 presetに含まれてないため注意が必要です。この機能を試すには、別途、Babel Legacy Decorator pluginなどといったプラグインが必要です。

トランスパイラの利用について

Babelのようなトランスパイラを使うことで、まだ実装されていない新機能を先取りしたコードを書くことができます。ただし、"まだ実装されていない"機能が"なぜ使えているのか"も、あわせて知っておく必要があると筆者は考えています。

トランスパイラはあくまでトランスパイラであり、現在実装されている機能(ES5)の上に成り立っているものです。中には新しい仕様を完全に再現できないケースも存在します。

  • その機能はトランスパイラによってどのように実装されるのか
  • そもそもどういう仕様なのか

これらのポイントに注意して、トランスパイラは利用すべきです。むしろそうしないのであれば、新しい仕様を先取りしているとは言えません。

おわりに

今回の記事の要点を以下にまとめました。

  • JavaScriptにはECMAScriptという仕様があること
  • ECMAScriptの新機能はプロポーザルとして提出されていること
  • プロポーザルはStageごとに分類・管理されていること
  • トランスパイラを使うことで新機能を試すことができること
  • ただし、トランスパイラはあくまでトランスパイラであり限界もあること

次回以降の記事では、前述したとおりStage 2、Stage 3のプロポーザルの中から、いくつかの機能を取り上げて紹介していきます。

杉浦 有右嗣
杉浦 有右嗣
フロントエンド・エンジニア

業務系SIerにて主にWebサービス開発の上流工程を経験した後、大手インターネット企業に転職。ソーシャルゲームをはじめとする、モバイル向けWebサービスのフロントエンド開発を数多く経験する。フロントエンドはもちろん、サーバーサイドやネットワークの知識も豊富である。2015年株式会社ピクセルグリッドへ入社。