12周年記念パーティ開催! 2024/5/10(金) 19:00

先取り!未来のJavaScript 第1回 ECMAScriptとJavaScriptの関係

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

発行

著者 杉浦 有右嗣 シニアエンジニア
先取り!未来のJavaScript シリーズの記事一覧

はじめに

皆さんが普段何気なく使っている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のプロポーザルの中から、いくつかの機能を取り上げて紹介していきます。

杉浦 有右嗣
PixelGrid Inc.
シニアエンジニア

SIerとしてシステム開発の上流工程を経験した後、大手インターネット企業でモバイルブラウザ向けソーシャルゲーム開発を数多く経験した。2015年にピクセルグリッドへ入社し、フロントエンド・エンジニアとして数々のWebアプリ制作を手掛ける。2018年に大手通信会社に転職し、低遅延配信の技術やプロトコルを使ったプラットフォームの開発と運用に携わっていたが、2020年ピクセルグリッドに再び入社。プライベートでのOSS公開やコントリビュート経験を活かしながら、実務ではクライアントにとって、ちょうどいいエンジニアリングを日々探求している。

この記事についてのご意見・ご感想 この記事をXにポストする

全記事アクセス+月4回配信、月額880円(税込)

CodeGridを購読する

初めてお申し込みの方には、30日間無料でお使いいただけます