polyfill、babelとは？jsをどのブラウザでも動くようにしてくれる。（IE対応）

# 概要
・ESについてと、各ブラウザの対応状況についてはこちら↓の記事を参照
[ES（ECMAScript）とは？jsがブラウザによって動いたり動かなかったりするのはなぜ？](https://qiita.com/minato-naka/items/73b9d531c871d98a3f22)
・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の新記法であるアロー関数。

```js
var arrow = () => {
    return 'アロー関数';
};
```

このコードはIEでは動作しません。

これをbabelを使って変換するとこのようになります。

```js
var arrow = function arrow() {
  return 'アロー関数';
};
```

アロー関数以外にもES6で出た新しい記法はたくさんありますが、
babelでES5記法に変換することが可能です。

ES6記法で効率よく開発し、
最後にそれをbabelですべてES5記法に変換し、
そのファイルを読み込んで利用する。
というイメージです。


使い方としては、
webpackやgulpなどビルドヘルパーツールと組み合わせて
使うことが多いです。
具体的な使い方は別の記事をご参照ください。
[Babelの使い方① - Babel単体での利用](https://qiita.com/pipi_taro/items/05f1c26740ff87a63e08)
[Babelの使い方② - Babel + Gulp](https://qiita.com/pipi_taro/items/c059f772b563d436b850)
[Babelの使い方③ - Babel + Webpack](https://qiita.com/pipi_taro/items/05f1c26740ff87a63e08)

webpackのラッパーツールであるLaravel Mixでは
難しい設定なしに簡単にbabelによる変換ができるのでお勧めです。
[Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。](https://qiita.com/minato-naka/items/bfc3bbd9a388084e6f17)


ちょっとお試しでbabel変換してみたい
という場合は[こちら](https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.7.1&externalPlugins=)も便利です。
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