Help us understand the problem. What is going on with this article?

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

概要

・ESについてと、各ブラウザの対応状況を別記事参照
・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

minato-naka
アジアクエスト株式会社(福岡オフィス) PHP/Laravel/AWS/Vue.js/Docker
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away