Polyfill（ポリフィル）とトランスパイラ

JavaScript言語は着実に進化しています。言語への新たな提案は定期的にだされ、それらは分析され、価値があると考えられたら https://tc39.github.io/ecma262/ の一覧に追加され、仕様 に進みます。

JavaScriptエンジンのチームは何を最初に実装するかについて独自の考えを持っています。彼らはドラフト段階の提案を実装する一方で、既に仕様となったものの実装を「面白くない、もしくはやるのが難しい」という理由で延期するかもしれません。

従って、あるエンジンに標準仕様の一部のみしか実装されていないという状況は非常に一般的なことです。

言語機能の現在のサポート状況を見るには https://kangax.github.io/compat-table/es6/ が良いページです(それは大きく、まだ勉強すべき多くのことがあります)。

プログラマーとして、より最新の機能(より便利なもの)を利用したいでしょう。

一方、最新の機能をまだ理解できない古いエンジンで最新のコードを動作させるにはどうすればよいでしょうか？

そのための２つのツールがあります。:

1. トランスパイラ
2. Polyfill（ポリフィル）

このチャプターでの目的は、それらがどのように機能するか、そして Web 開発におけるそれらの位置づけの要点を理解することです。

トランスパイラ

transpilerは、ソースコードを別のソースコードに変換する特別なソフトウェアです。最新のコードを解析し、古い構文を使って書き換えることで、古いエンジンでも動作するようにすることができます。

E.g. 2020年以前の JavaScript には “Null合体演算子” ?? がありませんでした。そのため、古いブラウザが利用されていると、height = height ?? 100 のようなコードを理解できない可能性があります。

トランスパイラはコードを分析し、height ?? 100 を (height !== undefined && height !== null) ? height : 100 に書き換えます。

// トランスパイラ実行前
height = height ?? 100;

// トランスパイラ実行後
height = (height !== undefined && height !== null) ? height : 100;

こうやって書き換えられたコードは、古い JavaScript エンジンにも対応しています。

通常、開発者は自身のコンピュータ上でトランスパイラを実行し、トランパイルしたコードをサーバにデプロイします。

名前を挙げるとすれば、Babel は世の中で最も著名なトランスパイラの1つです。

webpack のような最新のプロジェクトビルドシステムは、コードが変更されるたびに自動的にトランスパイラを実行する手段を提供しているため、開発プロセス組み込むのはとても簡単です。

Polyfills

新しい言語の機能には、構文構造や演算子だけでなく組み込みの関数も含んでいる可能性があります。

例えば、Math.trunc(n) は数値の小数部分を “切り取る” 関数で、例えば Math.trunc(1.23) = 1 となります。

(非常に古い) JavaScript エンジンでは、Math.trunc は存在しないためこのようなコードは失敗します。

構文変更ではなく、新しい関数について話しているので、ここではトランスパイルは必要ありません。単に不足している関数を定義する必要があります。

新しい機能を更新/追加するスクリプトは “polyfill” と呼ばれます。ギャップを “埋め”、不足している実装を追加します。

今回のケースでは、Math.tranc の polyfill は、以下のようにこの機能を実装したスクリプトです:

if (!Math.trunc) { //関数がない場合
  // 実装する
  Math.trunc = function(number) {
    // Math.ceil と Math.floor は古い JavaScript エンジンにも存在します
    // これらはチュートリアルで後ほど説明します
    return number < 0 ? Math.ceil(number) : Math.floor(number);
  };
}

JavaScript は非常に動的な言語であり、スクリプトは組み込み関数を含めて、任意の関数を追加／変更できます。

2つの興味深いライブラリがあります:

• 多くをサポートする core jsは、必要な機能のみを含める事ができます。
• 機能やブラウザに応じた Polyfill を含むスクリプトを提供する polyfill.io サービスです。

サマリ

この章は、たとえ JavaScript エンジンでまだ十分にサポートされていないとしても、最新の、そして最先端の言語機能を学習するように動機づけることを目的としています。

トランスパイラ（最新の構文や演算子を使用する場合）と polyfill（不足している関数を追加するため）を使用することを忘れないでください。これらにより、コードが機能することが保証されます。

例えば、今後 JavaScript に慣れたら、babel-loader プラグインを持つ webpack をベースにしたコードビルドシステムをセットアップできます。

複数の機能に関する現在のサポート状況を見るための便利なサイトです:

• https://kangax.github.io/compat-table/es6/ – 純粋な JavaScript.
• https://caniuse.com/ – ブラウザに関連する関数.

P.S. Google Chrome は、通常、最も最新の言語機能を持っているため、チュートリアルのデモが失敗した場合には Chrome で試してみてください。ただし、ほとんどのチュートリアルのデモは、最新のブラウザで動作します。