ECMAScript って何かをざっくり知っておく

1人アドベントカレンダー最終日を飾る 苦行 課題として、JavaScript の規格である「ECMAScript」について調べることにしました。

やはり読むべきは公式ドキュメントでしょう。

無 ☆ 理

今回は ECMAScript の概要と成り立ちを調べつつ、最新の仕様について少し触れていきます。まずは概要を…（ドキュメントは25億年くらいかけてゆっくり読みます）

ECMAScript とは？

ECMAScript（エクマスクリプト）は、Ecma Internationalもとで標準化されたJavaScriptの規格である。

ECMAScript - Wikipedia

JavaScript の標準化が行われ基本となる仕様が ECMAScript という名前で定められました。 ECMAScript は定期的に改定が行われています。
JavaScript | JavaScriptとECMAScriptの違い

当初の JavaScript は Netscape 社が開発を進めていましたが、欧州電子計算機工業会(ECMA: European Computer Manufacturers Association)が標準化を進めることとなり、ECMAScript (ECMA-262)とも呼ばれるようになりました。ECMA はその後、欧州のみでなく国際的な標準化機関となり、Ecma International に名称を変更しましたが、現在でも ECMAScript の標準化を進めています。
JavaScript入門 - とほほのWWW入門

ECMAScript は JavaScript の元となっている仕様です。Ecma International という標準化団体によって作成されました。特定の企業ではなく団体が作成しているものなんですね。

気をつけたいのが ECMAScript === JavaScript ではありませんし、ECMAScript が JavaScript の内容を定義するもの、と断じるのも間違っています。

JavaScriptやその派生言語（AltJS）、処理系の多くはECMAScript標準に独自の拡張やAPIを追加した構成となっている。

ECMAScriptとは - 意味をわかりやすく - IT用語辞典 e-Words

ECMAScript はあくまで基本部分の仕様であり、 ECMAScript で定められ基本た仕様に基づいて各社が実装を行ったものが JavaScript となります。 JavaScript では基本機能以外のブラウザ関係の機能などが加えられています。

JavaScript | JavaScriptとECMAScriptの違い

ECMAScript はあくまでベースであり、JavaScript については各社が各ブラウザに実装を行う必要があります。他に AltJS、例えば TypeScript, JSX なども ECMAScript を下敷きにして独自の機能を追加しています。

ではそんな ECMAScript ではどんなことが定義されているのでしょうか？

どんなことが定められてる？

Wikipedia の表を少しだけ加工して載せます。

Edition	公開日	以前のバージョンとの違い
1	1997年6月	初版
2	1998年6月	Editionとしての仕様はそのままであり、ISO/IEC 16262 international standardに完全な対応をした
3	1999年12月	正規表現、よりよい文字列の取り扱い、新しいコントロール構文、try/catch例外処理、より厳格なエラー処理、数字のその他の書式化フォーマット
4	放棄	4th Editionは放棄された。言語の複雑化に関する政治的な差異による。いくつかの成果は5thの基礎として採用され、いくつかは6thの基礎となっている。
5	2009年12月	"strictモード"、初期化時に発生しがちなエラーを回避するための追加仕様の追加。多くの曖昧な部分、および仕様に準拠しつつも現実世界の実装の融通の利く振る舞いを明確にした。いくらかの新機能、getterやsetter、JSONライブラリのサポート、より完全なオブジェクトの属性のリフレクションhttps://ja.wikipedia.org/wiki/ECMAScript#cite_note-7
5.1	2011年6月
6 (2015)	2015年6月	クラス、モジュール、イテレータ、for/ofループ、Pythonスタイルのジェネレータ、アロー関数、2進数および8進数の整数リテラル、Map、Set、WeakMap、WeakSet、プロキシ、テンプレート文字列、let、const、型付き配列、デフォルト引数、Symbol、Promise、分割代入、可変長引数
7 (2016)	2016年6月	冪乗演算子、Array.prototype.includes
8 (2017)	2017年6月	非同期関数 (async/await)、SharedArrayBufferとAtomics、String.padStart/padEnd、Object.values/entries、Object.getOwnPropertyDescriptors、関数の引数における末尾のカンマ許容
9 (2018)	2018年6月	オブジェクトに対するスプレッド構文、非同期イテレーション、Promise.prototype.finally、正規表現への機能追加
10 (2019)	2019年6月	Array.prototype.flat、Array.prototype.flatMap、Object.fromEntriesの追加、他
11 (2020)	2020年6月	オプショナルチェイニング演算子?.、Null合体演算子??、BigIntの追加、他

2020年までのものを持ってきたのですが実際は2015年以降では1年に1回の更新があります。キャッチアップしないと秒速で置いていかれそうです。

内容としてはメソッドや文法、演算子など具体的な機能が仕様として定義されています。

スプレッド構文とか Array.prototype.flat とかって割と最近の追加なんですね👀

エディションで頻繁に聞くのは「ES6」、2015年エディションでしょうか。

let、const、クラス、アロー関数、分割代入、Promise...
2015年以降に JavaScript を始めた人で ES6 の機能を使ったことがない人はいないはずです。

最新バージョンで追加された機能

最新の2022年エディションの機能もいくつか見ていきましょう。

.at() メソッド

const array = ["a", "b", "c"];

console.log(array[array.length - 1]); // "c"

// ES2022
console.log(array.at(-1)); // "c"

インデックス番号を使って配列の要素にアクセスします。後ろから数えてアクセスしたい時に便利です。

これまでは配列の最後の要素を取得するために length - 1 という何ともピンとこない方法を使っていましたが、 at メソッドを使えば array.at(-1)、後から1番目という指定ができますね。

トップレベル await

これは何回か使ってみましたがすごく便利です。
async 関数でラップせずに await が使えます。ただしトップレベルでないと動作しないので、他の関数の中とかでは動きません。

プライベート変数

頭に # をつけると外部からアクセスできない変数を作成できます。

まとめ

• ECMAScript は JavaScript の元となっている仕様
• ECMAScript はあくまでベースであり、JavaScript については各社が各ブラウザに実装を行う必要がある。AltJS も同様

いつかきちんと仕様書も読破したいと思います（遠い目）

アドベントカレンダーひとり完走まとめ

「JavaScript 脱中級者を目指す」「Qiitan をお迎えする」 を目標に掲げ、これまで見て見ぬふりをしていた小さな疑問や苦手分野に向き合った25日間でした。1人で25記事書きましたのでアドベントカレンダーについては2023年から25年間のお休みをいただこうと思います（疲れた）。

なにぶん一気に書き上げたので、これから足りない情報を足したり文章を改善したりと推敲していきます。頑張ります。

いい企画だったな〜と思っていただけたら、JavaScript 脱中級者を目指す方にカレンダーをシェアしていただけるととっても嬉しいです。ありがとうございました！