18日 四月 2021

Polyfill(ポリフィル)とトランパイラ

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

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

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

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

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

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

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

  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 をベースにしたコードビルドシステムをセットアップできます。

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

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

チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。