JSライブラリを1日1つ紹介する
1日1つJSのライブラリを調べる、第3弾です。
① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する
本日は、core-jsのドキュメントを読んで実際に業務で使っているところを調べました。
ドキュメント
今回読んだドキュメントはこちらです。
使い方
今回は、どうやら古いJSしか使えないブラウザのためのライブラリだったようなので、実際に使ってみるより色々調べてみました。
これは、ES6が対応されているブラウザの一覧です。
いくつか、まだES6が対応されていないブラウザがあるようです。
http://kangax.github.io/compat-table/es6/
そして、ES6をES5に変換して、古いブラウザでもJavaScriptを使用できるようにBabelというトランスコンパイラ(変換ツール)を使います。
このライブラリをimportすると使用できます。
https://babeljs.io/docs/en/6.26.3/babel-polyfill
このbabel-polyfillは、ブラウザに搭載されているJS APIに未実装のメソッドを追加してくれるライブラリです。
polyfillとは、「標準メソッドが存在しない場合に、自分で供給する方法」だそうです。新しい標準関数が増えた場合は、自分でprototypeに書き足してしまうことが可能だそうです。
足りない関数だけpolyfillを入れることができるので、残りのコードはそのままで、幅広いブラウザに対応することができます。
しかし、Babel7.4から@babel/polyfillが非推奨になり、core-jsとregenerator-runtimeが必要になったようです。
https://babeljs.io/docs/en/babel-polyfill
polyfillがcore-jsにまとめられていて、regenerator-runtimeがないとasync-awaitが動きません。
3行でまとめる
core-jsを導入すると、
- ブラウザに関数がない場合、polyfillから関数を使うことができる。
- 対象のユーザーが古いブラウザを使っている場合もJavaScriptが正常に動くようにするためにこのライブラリが使用される。
うーん、よく言われるIEの問題、根深いですね😇
フィードバック
以上です!