【JavaScript】Babelの使い方とトランスパイルとポリフィルの違いについて

2021年3月20日2021年3月27日JavaScript

JavaScriptのモダンな開発に欠かせないBabelの使い方と、Babelが行うトランスパイルとポリフィルの違いについてまとめました。

Babelの使い方

いまだ多くの人が古いブラウザを使用しています。 そのようなブラウザを使っている人々にも同じようにWebアプリケーションをみてもらえるようにするには、Babelなどのポリフィルできるツールを利用する必要があります。 ポリフィル(polyfill)は、機能をサポートしていないWebブラウザーに機能を実装するコードのことです。 Babelはparcelバンドラーをインストールすれば、すでに使えるようになります。 parcelは、コードをトランスパイルするために自動的にBabelを使っています。 parcelについてはこちらの記事を参照ください。

Babelのメリット

Babelはのプリセット(Presets)はブラウザのサポート状況を基に、自動的にどれをコンパイルする必要があるかを解析して変換してくれます。 Babelがなければ、たくさんのブラウザに対応するためにコードを書かないといけないので、どれだけの工数を削減してくれているか計り知れません。

トランスパイルとポリフィルの違い

トランスパイルというのは、アロー関数などの構文(syntax)をES5でもあった形に書き換えることです。トランスパイルでは、たとえば、ES6で導入されたfind()メソッドやPromiseなどはそのままの状態となります。 そこでポリフィルがあります。ポリフィルによって、find()メソッドやPromiseなどの完全に新しい機能も古いブラウザで理解できる形にコードを変換してくれます。Babelではポリフィルのためにライブラリをインストールします。

import 'core-js/stable';

とjsファイルに記述するだけでBabelがインストールしてくれます。エラーになるときもあるので、そのときは手動で以下のようにコマンドを入力します。

npm i core-js

そうすると、たとえばfind()メソッドなら、それを書き換えるのではなく、Array.prototype.findという新しいメソッドを作成して適用できるようにしてくれます。 すべての機能がインストールされるので、一部だけで軽量化を図りたいという場合は、たとえば次のように記述します。

import 'core-js/stable/array/find';
import 'core-js/stable/promise';

そして、もうひとつ必ずインストールする必要のあるパッケージがあります。 それがasync関数のポリフィルするためのパッケージです。 コマンドは次のように入力します。

npm i regenerator-runtime

ファイルのインポートは次のように記述します。

import 'regererator-runtime/runtime';

async/awaitに関しては次の記事を参考にしてみてください。