宮水の日記

宮水の日記

主に書評や資格取得について記事を書いています。

core-js【JSライブラリ1日1個】

 JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べる、第3弾です。 

① ライブラリに関するドキュメントを最初から最後まで読む

② 実際に使ってみる or 使い方を調べる

③ ライブラリを3行で説明する

 

本日は、core-jsのドキュメントを読んで実際に業務で使っているところを調べました。

 

 

ドキュメント

今回読んだドキュメントはこちらです。

github.com

 

使い方

今回は、どうやら古い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を入れることができるので、残りのコードはそのままで、幅広いブラウザに対応することができます。

参考:PolyfillとPonyfill - Qiita

 

しかし、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の問題、根深いですね😇

フィードバック

 

 

以上です!