JavaScriptとECMAScriptって何が違うの？
そもそもECMAScriptってどういう仕組みで構成されているんだろう
JavaScriptのバージョンってブラウザごとにどう対処するの？
JavaScriptを勉強しているとECMAScriptという呼び名を見かけることが多いですよね？
また一方で、ES2015（ES6）という記述もよく見かけます。これらはJavaScriptのバージョンに関連していることは何となく分かる方もいると思いますが、はっきりと意味を理解しているという方は少ないのではないでしょうか？
そこで、この記事では初心者でも今日からJavaScriptとECMAScriptの違いや使い分けなどについて分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。
一人でも多くの方がJavaScriptの不安を解消できれば幸いです。
JavaScriptとECMAScriptの違い
90年代にJavaScriptが登場してから使われ始めた頃、ブラウザによって仕様が違っていて開発が非常に大変だったことをご存知でしょうか？
もともとJavaScriptはNetscape社のブラウザで使われる言語として誕生したので、他のブラウザは想定されておらず各ブラウザはJavaScriptを独自に拡張していたわけです。そのため、JavaScriptはまったく標準化がされていない言語だったわけです。
これではいろいろ問題があるとして、Netscape社は国際標準化団体のECMAに依頼してJavaScriptのコア部分を標準化しました。これがECMAScriptと呼ばれるものになります。
つまり、JavaScriptはECMAscriptに準拠した言語であると言えるわけです。
ただし、注意点としてECMAScriptは各ブラウザの独自拡張を限定的に認めているので、ブラウザごとに若干仕様が異なる部分もまだあります。
ECMAScriptの仕組み
この章では、ECMAScriptの標準仕様がどのような仕組みで作られているのかを見ていきましょう。主に、バージョンの表記や策定プロセスについて学んでいきます。
バージョンの表記について
まず最初にECMAScriptのバージョン表記について見ていきましょう。
これまでのECMAScriptのバージョン履歴をざっくりまとめると次のようになります。
| バージョン | 公開日 |
|---|---|
| ECMAScript1 | 1997年6月 |
| ECMAScript2 | 1998年6月 |
| ECMAScript3 | 1999年12月 |
| ECMAScript4 | 破棄 |
| ECMAScript5 | 2009年12月 |
| ECMAScript5.1 | 2011年6月 |
| ECMAScript2015 | 2015年6月 |
| ECMAScript2016 | 2016年6月 |
ECMAScriptは略称（通称）で記述されることもあり、例えばECMAScript5であればES5のように表記されます。
また、2015年に公開されたバージョンから西暦を名称に含めることになりました。そのため、ECMAScript6ではなくECMAScript2015のように表記します。ただし、略称の場合は通し番号を使ってES6のように表記することもあります。
ECMAScript2015からは、毎年バージョンを更新することになっているため表記にはそれぞれの西暦が記述されることになります。
ECMAScriptの策定ステップ
ECMAScriptでは時代の流れに合わせるように随時アップデートが行われています。各機能のアップデートは個別に5段階の状態を持っており、このステップに従って仕様が策定されるかどうかを決めています。
5段階の状態は次の通りです。
| 段階 | 概要 |
|---|---|
| ステージ0 | アイデア・企画 |
| ステージ1 | 提案書(プロポーザル)をもとに議論を行う |
| ステージ2 | 仕様書のドラフト版を構築 |
| ステージ3 | ブラウザへの実装・フィードバックなど |
| ステージ4 | 仕様策定の完了 |
ステージ0のアイデア・企画の段階から始まり、最終的にステージ4になるとECMAScriptの次期バージョンに統合されるという流れになります。
個別に変更・追加することになる構文ごとにそれぞれ上記のような段階を持っていることから、途中で策定を断念することになったとしても他の機能に影響しないため無駄なリソースを最低限に抑える効果もあるわけです。
トランスパイルとは？
この章では、最新のJavaScript仕様を未対応のブラウザでも利用できるツールについて見ていきましょう。主に、Babelの使い方とトランスパイルの手順について学んでいきます。
なぜトランスパイル
ECMAScriptのバージョンアップに伴い、最新の標準化された仕様を使いたいと思うかもしれませんがこれには注意が必要です。なぜなら、各ブラウザの対応状況が大きく異なるからです。
最新のECMAScriptが公開されたからといって、すぐにブラウザが対応するわけではありません。しかし、新しい仕様はさまざまな面で作業効率を上げてくれます。
そこで、どんなブラウザにも対応できるように最新の仕様を旧バージョンに変換するというプロセスが現在では主流なのです。例えば、ES2015で記述されたプログラムをES5に変換することでほとんどのブラウザに対応できます。
このようにプログラムを変換することをトランスパイルと言い、その作業を自動化してくれるツールがBabelになります。
Babelを使ってみよう
BabelはNode.jsのパッケージとして公開されているので、開発環境としてNode.jsがインストールされている必要があります。
まだインストールしていない方は、次の記事で各OS別に解説しているのでぜひ参考にしてみてください！
Babelのインストールはnpmを利用して次のようにコマンドを実行します。
npm install --save-dev @babel/core @babel/cli @babel/preset-env
インストール作業はこれで完了です。
次に、Babelの基本的な設定として【babel.config.json】というファイルを作成して、次のようにプリセットを設定します。
const presets = [
[
'@babel/env'
]
];
module.exports = {presets};
これでBabelの基本的な導入はできました。
実際にプログラムを変換するには、以下のようなコマンドを実行します。
./node_modules/.bin/babel sample.js --out-dir test
この例では、sample.jsというファイルに記述されたJavaScriptを【test】フォルダ内に出力するという意味になります。
【–out-dir】というオプションを指定することで、任意のフォルダに変換されたファイルを出力することができるわけです。
より具体的なトランスパイルの方法や、Babel以外の手法について次の記事で体系的にまとめているので合わせて参考にしてみてください！
まとめ
今回は、JavaScriptとECMAScriptの関係性について学習をしてきました！
最後に、もう一度ポイントをおさらいしておきましょう！
- ECMAScriptは標準化された仕様のこと
- ECMAScriptは各機能を5つの段階に分けて策定される
- 最新仕様のプログラムをトランスパイルするとブラウザ対応が簡単
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
