ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

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

著者：Eve Cole 更新時間：2025-01-02 15:40:29

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 = height ?? 100 。

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

 // トランスパイラを実行する前に
身長＝身長?? 100;

// トランスパイラの実行後
高さ = (高さ !== 未定義 && 高さ !== null) ?高さ：100;

書き直されたコードは古い JavaScript エンジンに適したものになりました。

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

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

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

ポリフィル

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

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

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

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

新しい機能を更新・追加するスクリプトを「polyfill」と呼びます。ギャップを「埋め」、不足している実装を追加します。

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

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

JavaScript は非常に動的な言語です。スクリプトは、組み込み関数も含め、あらゆる関数を追加/変更できます。

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

  • core js は多くの機能をサポートしており、必要な機能だけを含めることができます。

まとめ

この章では、JavaScript エンジンでまだ十分にサポートされていない場合でも、最新の、さらには「最先端」の言語機能を学習するよう促したいと思います。

ただし、トランスパイラー (最新の構文または演算子を使用している場合) とポリフィル (不足している可能性のある関数を追加する場合) を使用することを忘れないでください。彼らはコードが機能することを保証します。

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

さまざまな機能の現在のサポート状況を示す優れたリソース:

  • https://compat-table.github.io/compat-table/es6/ – 純粋な JavaScript の場合。

  • https://caniuse.com/ – ブラウザ関連の機能。

PS 通常、Google Chrome は言語機能を備えた最新のバージョンです。チュートリアルのデモが失敗した場合は、それをお試しください。ただし、ほとんどのチュートリアル デモは最新のブラウザで動作します。

関連記事