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

JavaScript言語は着実に進化しています。言語への新しい提案が定期的に現れ、分析され、価値があるとみなされれば、https://tc39.github.io/ecma262/のリストに追加され、その後仕様に進みます。

JavaScriptエンジンの背後にいるチームは、最初に何を実装するかについて独自のアイデアを持っています。彼らは、ドラフト中の提案を実装し、仕様にすでに含まれているものを後回しにすることを決定するかもしれません。なぜなら、それらは興味が低いか、単に実装が難しいからです。

そのため、エンジンが標準の一部のみを実装することは非常に一般的です。

言語機能の現在のサポート状況を確認するのに良いページは、https://compat-table.github.io/compat-table/es6/です（非常に大きく、まだ学ぶべきことがたくさんあります）。

プログラマーとして、最新の機能を使いたいと思います。良いものが多いほど良いです!

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

それには2つのツールがあります。

1. トランスパイラ。
2. ポリフィル。

この章では、それらがどのように機能するのか、そしてWeb開発におけるそれらの位置を把握することを目的としています。

トランスパイラ

トランスパイラは、ソースコードを別のソースコードに変換する特別なソフトウェアです。現代的なコードを解析（「読んで理解する」）し、古い構文を使用して書き換えることができるため、古いエンジンでも動作します。

たとえば、2020年以前のJavaScriptには「null合体演算子」??がありませんでした。そのため、訪問者が古いブラウザを使用している場合、height = height ?? 100のようなコードを理解できない可能性があります。

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

// before running the transpiler
height = height ?? 100;

// after running the transpiler
height = (height !== undefined && height !== null) ? height : 100;

これで、書き換えられたコードは古いJavaScriptエンジンに適しています。

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

名前について言えば、Babelは最も著名なトランスパイラの1つです。

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

ポリフィル

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

たとえば、Math.trunc(n)は数値の小数部分を「切り捨てる」関数です。たとえば、Math.trunc(1.23)は1を返します。

一部の（非常に古い）JavaScriptエンジンにはMath.truncがないため、そのようなコードは失敗します。

構文の変更ではなく、新しい関数について話しているので、ここでは何もトランスパイルする必要はありません。不足している関数を宣言するだけで済みます。

新しい関数を更新/追加するスクリプトは「ポリフィル」と呼ばれます。それはギャップを「埋め」、不足している実装を追加します。

この特定のケースでは、Math.truncのポリフィルは、次のようにそれを実装するスクリプトです。

if (!Math.trunc) { // if no such function
  // implement it
  Math.trunc = function(number) {
    // Math.ceil and Math.floor exist even in ancient JavaScript engines
    // they are covered later in the tutorial
    return number < 0 ? Math.ceil(number) : Math.floor(number);
  };
}

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

2つの興味深いポリフィルライブラリは次のとおりです。

• core jsは多くの機能をサポートしており、必要な機能のみを含めることができます。
• polyfill.ioサービスは、機能とユーザーのブラウザに応じて、ポリフィルを含むスクリプトを提供します。

まとめ

この章では、JavaScriptエンジンであまりサポートされていない場合でも、最新の、さらには「最先端」の言語機能を学習する動機付けをしたいと考えています。

最新の構文や演算子を使用する場合はトランスパイラを使用し、不足している可能性のある関数を追加する場合はポリフィルを使用することを忘れないでください。これにより、コードが確実に動作します。

たとえば、後でJavaScriptに慣れてきたら、babel-loaderプラグインを使用して、webpackに基づくコードビルドシステムをセットアップできます。

さまざまな機能の現在のサポート状況を示す良いリソース

• https://compat-table.github.io/compat-table/es6/ – 純粋なJavaScript用。
• https://caniuse.dokyumento.jp/ – ブラウザ関連の関数用。

追伸。Google Chromeは通常、言語機能に関して最新の状態です。チュートリアルのデモが失敗した場合は、試してみてください。ただし、ほとんどのチュートリアルのデモは、最新のブラウザであればどれでも動作します。