⚙️

JavaScript学習:実行環境編|ECMAScriptとは?JavaScriptとの違い

    JavaScript学習記録|なんとなく理解禁止シリーズ

ECMAScriptとは|JavaScriptとの違い

ECMAScriptとは、Ecma Internationalという団体によって作成された「JavaScriptの仕様」のこと。1990年代に「Netscape Navigator」や「Internet Explore」などのブラウザがバチバチ争っていた時代があって、それぞれのブラウザ上で動くJavaScriptに互換性がなく仕様が統一されていなかったんですね。そんな開発者泣かせの状況で、まぁまぁみんな仲良くやりましょうよ!と統一すべく「ECMAScript」という仕様が生まれたという訳です。

ひとまず、ECMAScriptとは標準化するための「仕様」でJavaScriptは「プログラミング言語」なので混同注意。

ECMAScriptで知っておくべきバージョンの話

まずは、ECMAScriptのこれまでの歴史を見てみます。

バージョンリリース時期通称
11997年6月
21998年6月
31999年12月
4破棄
52009年12月ES5
5.12011年6月
20152015年6月ES2015, ES6
20162016年6月ES2016, ES7
20172017年6月ES2017, ES8

参考元:ECMAScript|JavaScript Primer

バージョン2015以降は1年毎にバージョンアップされているのですが、開発者側として重要なポイントが第6版となる「ES6(ES2015)」から大きく仕様が変わったこと。

ESModuleというJavaScriptモジュールシステムやlet, const等の新しい変数宣言、Class構文など、多くの機能が追加されました。便利な反面、全てのブラウザでES6の構文を意図した通りに実行できる訳ではなかったので、どんな環境でも対応できるプログラムにするため(クロスブラウザ対応)、ES6で書いたソースをES5に変換してデプロイするという流れが生まれました。

フロントエンドエンジニアとして仕事をし始めた頃によく聞く「ES6のソースをES5のソースに変換しよう」みたいな話は、こういった経緯や意味合いがあります。ECMAScriptのすべてのバージョンの特徴を理解する必要はないけど、ES6で大きな変化があったという点は覚えておくと良き。

仕様や策定プロセスを知る意味

最後に、こういった仕様や策定プロセスを理解する意味を書き残しておきます!自分は語れるレベルじゃないですが、JavaScriptやECMAScriptの仕様理解で心強いJavaScript Primerに書かれていたことを引用しつつ備忘録で書いておきます。

言語を学ぶため

純粋にECMAScriptといった仕様の理解は、JavaScript言語の理解に直結します。ES6でどんな機能がどんな目的で追加されたか、といった根本の理解は、適切な場面で適切な記述ができる力につながります。

言語が進化しているため

ECMAScriptはLiving Standard方式(常に最新版を公開する仕様)を取っており、仕様が随時アップデートされていきます。こうした変化についていくためにも、仕様や策定プロセスの理解が重要ということ。例えば、非同期処理系の構文であるasync, awaitといった構文。これは2021年のアップデートで追加されましたが、「簡単に書けるから何となく使う」ではなく、元々のPromiseで書くとこんな感じで記述が冗長になるから、可読性を上げるためにもこういう意図でasync, awaitを使おう...と意味のある記述ができます。変化に追いつくだけじゃなく、変化した経緯を知るのも大切だと思った次第です。

情報の正しい状態を調べるため

これはエンジニアあるあるだと思いますが、古いソースのプロジェクトに入ってエラーが出て、ググって見た情報を試したけど情報が古くて上手くいかない...というパターン。こういう時に正確なソースを辿れる調査力が必要だ、と自分もよく先輩に教わっていました。まずググるのは良いかと思いますが、すぐ解決できない時はECMAScriptの仕様を辿って適切な問題解決をするためにも、仕様や策定プロセスを知るのは大切って話です...!