JavaScriptとECMAScriptの違いって何?その背景を徹底解説!


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のバージョン履歴をざっくりまとめると次のようになります。

バージョン公開日
ECMAScript11997年6月
ECMAScript21998年6月
ECMAScript31999年12月
ECMAScript4破棄
ECMAScript52009年12月
ECMAScript5.12011年6月
ECMAScript20152015年6月
ECMAScript20162016年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別に解説しているのでぜひ参考にしてみてください!

【Node.js入門】各OS別のインストール方法まとめ(Windows,Mac,Linux…)
更新日 : 2019年7月19日

Babelのインストールはnpmを利用して次のようにコマンドを実行します。

インストール作業はこれで完了です。

次に、Babelの基本的な設定として【babel.config.json】というファイルを作成して、次のようにプリセットを設定します。

これでBabelの基本的な導入はできました。

実際にプログラムを変換するには、以下のようなコマンドを実行します。

この例では、sample.jsというファイルに記述されたJavaScriptを【test】フォルダ内に出力するという意味になります。

【–out-dir】というオプションを指定することで、任意のフォルダに変換されたファイルを出力することができるわけです。

より具体的なトランスパイルの方法や、Babel以外の手法について次の記事で体系的にまとめているので合わせて参考にしてみてください!

JavaScriptのブラウザごとの互換性をポリフィル・Babelで解決する!
更新日 : 2019年6月19日

まとめ

今回は、JavaScriptとECMAScriptの関係性について学習をしてきました!

最後に、もう一度ポイントをおさらいしておきましょう!

  • ECMAScriptは標準化された仕様のこと
  • ECMAScriptは各機能を5つの段階に分けて策定される
  • 最新仕様のプログラムをトランスパイルするとブラウザ対応が簡単

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説