概要
・ESについてと、各ブラウザの対応状況についてはこちら↓の記事を参照
ES（ECMAScript）とは？jsがブラウザによって動いたり動かなかったりするのはなぜ？
・polyfill、babelは、最新のES仕様で書いたjsを、どのブラウザでも動作するようにするためのツール
・平たく言うと、「Chromeでは動いたのに、IEだとこのjs動かないよー」に対処できるツール
polyfillとは
polyfillはES5に存在しない関数やライブラリの代替コードのこと。
自分で実装したコード内で
Mathを利用している場合、
それはIEでは動作しません。
IEはES5までしか対応していないので
Mathライブラリがそもそも存在しないためです。
そのような場合に、
Mathのpolyfillをコードに挿入することで、
Math機能を利用することができるようになります。
https://github.com/MaxArt2501/es6-math
ここからMathのpolyfillをダウンロードし、
自分のコードで
<script type="text/javascript" src="es6-math.js"></script>
のように読み込むことでIEでもMathが使えます。
ES6で追加された関数やライブラリはMath以外にもたくさんありますが、
その関数、ライブラリごとにそれぞれpolyfillが用意されているイメージです。
自分で必要なpolyfillを取ってきて、
コードで読み込むことになります。
polyfill.io
さきほど
ES6で追加された関数やライブラリはMath以外にもたくさんありますが、
その関数、ライブラリごとにそれぞれpolyfillが用意されているイメージです。自分で必要なpolyfillを取ってきて、
コードで読み込むことになります。
と書いたが、
これをしなくてもよくなる、
便利なpolyfill.ioというものがある。
これはCDNで
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
のように読み込むだけで、
全ての機能のpolyfillがダウンロードされる。
ただ、すべての機能のpolyfillをダウンロードすると
多すぎてパフォーマンスに影響が出るので、
featuresパラメータを付けることで、
必要なpolyfillのみに絞り込むことができる。
https://polyfill.io/v3/polyfill.min.js?features=es6
とするとes6の全polyfillが取得できるし、
https://polyfill.io/v3/polyfill.min.js?features=Math.sign
とすればMathのsign機能だけのpolyfillを取得することができる。
このサイトで必要な機能を検索して、
そのpolyfill用のURLを取得することが可能。
https://polyfill.io/v3/url-builder/
babelとは
babelとは、新しいESバージョンの記法で書かれたjsを、
ES5の記法に変換してくれるツールです。
https://babeljs.io/
例えばES6の新記法であるアロー関数。
var arrow = () => {
return 'アロー関数';
};
このコードはIEでは動作しません。
これをbabelを使って変換するとこのようになります。
var arrow = function arrow() {
return 'アロー関数';
};
アロー関数以外にもES6で出た新しい記法はたくさんありますが、
babelでES5記法に変換することが可能です。
ES6記法で効率よく開発し、
最後にそれをbabelですべてES5記法に変換し、
そのファイルを読み込んで利用する。
というイメージです。
使い方としては、
webpackやgulpなどビルドヘルパーツールと組み合わせて
使うことが多いです。
具体的な使い方は別の記事をご参照ください。
Babelの使い方① - Babel単体での利用
Babelの使い方② - Babel + Gulp
Babelの使い方③ - Babel + Webpack
webpackのラッパーツールであるLaravel Mixでは
難しい設定なしに簡単にbabelによる変換ができるのでお勧めです。
Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。
ちょっとお試しでbabel変換してみたい
という場合はこちらも便利です。
ES6のjsコードをブラウザに張り付ければそれをES5に変換してくれます。
上記のサンプルのアロー関数コードで試してみてください。
polyfillとbabelの使い分け
ES6の新記法や新関数、新ライブラリを使って実装し、
babelですべてES5記法に変換。
そしてpolyfillを使って新ライブラリの代わりを入れる。
というイメージ。
ただし、
babelの最近のバージョン？
とか
使うツール？
によってはbabelで変換するだけで
内部的に
ES5記法への変換＋polyfillの導入
をやってくれるようです。
https://qiita.com/yukagil/items/748294e4ec57c888d4b3
ここは詳しくはよくわからない。
参考
https://qiita.com/jkr_2255/items/5378bf070aea62fe8a94
https://qiita.com/moriyuu/items/061de38704687fef93b9
https://qiita.com/yukagil/items/748294e4ec57c888d4b3