目次
はじめに
属に言う「モダン」なJavaScriptの話題にでてくる略語や専門用語を整理してみました。
こちらの記事の続きです。
Node.jsとか、上記の記事に書いたものは説明を省いてます。
ECMAScript仕様について
ES5とかES6とかES2015とかESModulesの件です。
このESというのは「ECMAScript」の略です。
ECMAScriptは、Ecma International（エクマ・インターナショナル）という団体のTC39という専門委員会が策定するJavaScriptの仕様です。
Ecma Internationalの会員企業は、Adobe、AMD、eBay、Google、HP、日立、IBM、Intel、コニカミノルタ、Microsoft、東芝、Yahoo!・・などなど。
そこで検討される仕様案が「0（ただのアイディア）」~「4（仕様の策定が完了している）」までのレベル分けされて、レベル4だけがが、その年のECMAScript仕様としてリリースされます。
リリースされた仕様は、年をつけて「ES2015」としたり、「ES5」とか「ES6」みたいに、Editionをつけて識別します。
つまり、「ES2015」は「2015年にリリースされたECMAScript仕様」ですが、その仕様のEditonは「6」なので、「ES6」とも呼ばれます。
ECMAScript仕様のリリース年度とEditionの表
その年度とEditionを対応表です。
| Edition | 年 | 主な変更 |
|---|---|---|
| 1 | 1997 | － |
| 2 | 1998 | ISO/IEC 16262 international standard対応 |
| 3 | 1999 |
正規表現。 try/catch例外処理とか |
| 4 | - | 破棄されました。 |
| 5 | 2009 |
strictモード、getterやsetter。 JSONライブラリのサポート他 |
| 6 | 2015 | クラス、モジュール機能（import/export）、イテレータ、for/ofループ、Pythonスタイルのジェネレータ、アロー関数、2進数および8進数の整数リテラル、Map、Set、WeakMap、WeakSet、プロキシ、テンプレート文字列、let、const、型付き配列、デフォルト引数、Symbol、Promise、分割代入、可変長引数他 |
| 7 | 2016 |
べき乗演算子(**)。 Array.prototype.includes他 |
| 8 | 2017 | 非同期関数 (async/await)、SharedArrayBufferとAtomics、String.padStart/padEnd、Object.values/entries、Object.getOwnPropertyDescriptors他 |
これを見ると「ES Modules」ってのが仲間外れっぽくなります。
これは上記のES2015（ES6）の「モジュール機能（import/export）」のことが独立して、そのように呼ばれているようです。
ECMAScript仕様の実装状況
ECMAScriptは単なる仕様にすぎません。
実装は各ブラウザ・実行環境（Node.js等）にまかされてます。
実装対応のスピードや仕様への準拠度合いなどはブラウザ・実装環境で違います。
同じ様に処理を書いても、ブラウザの種類やバージョンによって動いたり、動かなかったりという事態は、普通に発生します。
その対応状況を確認できるページがあります。
これで見ていくと。
ES6(2015)やES2016以降についても、Google ChromeやFireFox、MS Edge、Safariの４大ブラウザの対応状況は良好です。
４大ブラウザの最新バージョンを使っている限り、モダンなJavaScript構文・機能が実装されてなくて動かないというリスクは低いです。
なんですが・・。
マイクロソフトのInternet Explorer(IE） は問題大ありです。
IE11でも、ES5（2015)レベルで対応度「11%」・・つまり、ほぼ未対応で、それ以前（IE10以前）については表に項目すらありません（笑）。
マイクロソフトはInternet Explorer の使用をやめて、Edgeに移行するようにとのアナウンスを強めてますから、これからも対応されることはないでしょう。
ECMAScript仕様未実装の逃げ道：BabelとPolyfill
新しい仕様がリリースされてから、各ブラウザ・実行環境がその仕様を実装するまでに間が空く場合があります。
IE11みたいにES6（2015）に対応する気もない実装系もあります。
開発時はES6（2015)の機能や構文を使いたい。
そんな場合の対応として用意されている逃げ道は以下の２つです。
- Babelを使う
- Polyfillを使う
ここでは簡単に言葉の意味合いだけ確認しときます。
Babelは新しい機能や構文で書かれたJavaScriptを、古い機能や構文で書いた形に変換してくれるトランスコンパイラというやつで、Node.js製のツールです
引用すると。
Babelは、ES6で追加された機能をES5に変換するNode.js製のトランスパイラです。
ES6を書いても、現行ブラウザではきちんとコード通り動かないのですが、それをコードどおり動くようにブラウザでサポートしているES5に変換してくれます。
もともとの名前は「6to5」だったらしいです。
まんまです。
ただ、これは「ES5でも書ける（相当複雑だったりしたとしても）ES6の機能」を「ES5の機能・構文だけを使った形に書き直す」ものでしかなく、ES5では書くことができないES6の機能には対応できないということになります。
PolyfillはBabelで処理できない「標準となったメソッドが存在しない場合に、別途ライブラリとかで供給してしまう方法」がPolyfillです。
例えば、ES5には存在しない「promise」をIE11で動かすために、以下のPolyfillでにげたとか。
<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>
同様に、ES5に存在しない「fetch」とかだと、以下のpolyfillが使えるよとか。
そんな感じで、この言葉は登場します。
ちなみに IE11における、ES6（2015）に関しては、こんな記事があります。
IE11で困っている方にはいいんじゃないかと思い、記事のリンクだけ載せておきます。
ただし、自分はIE11自体使わないので、試してはないです。
複数のモジュールをひとつにまとめる：webpack
webpackというのは「複数のモジュール（JavaScriptやcssや画像など）を、ひとつに束ねるツール」です。
JavaScriptの場合だと、複数ファイルに分かれているScriptを一つのファイルに集約（束ねる）してくれるツールということになりますね。
ひとつにまとめることで、保守時の見通しがよくなったり、JavaScriptなどのロード時間を短縮できるなどのメリットがあるからみたいです。
このwebpackはバンドルする対象ファイルなどを設定ファイルに書いて動かのですが、そこに「loader」を指定できるようになってます。
そこで、上記のbabelを動かす「babel-loader」を指定しておとくと、ファイルをまとめる前に自動実行してくれます。
Node.jsをサーバーサイドで動かして非同期通信で処理する場合、実行時のパフォーマンスにスクリプトファイルのロード時間は大きく影響します。
少しでもファイルのロード時間を短縮するには、複数回のリクエストを順番に処理するより、一発のリクエストでまとめて処理した方がパフォーマンス的には有利です。
そこで、webpackを使いファイルが一本化して、ロード時間を高速化します。
しかも。
babel-loaderを指定しておけば、開発時はES2015（ES6）の機能・構文を使って開発していても、バンドルする際にES5の構文に変換してくれるので、実装が間に合ってなくて動かないリスクも軽減できる。
さらに、そのへんの一連の動きを設定ファイルで自動化できる。
確かに使わない手はないですね。
Node.jsとかVue.jsとかの話の中に、当たり前のように「webpack」が登場している理由は納得です。
今回はこんなところで。
ではでは。
