blog2017-03-05JavaScript(ECMAScript)のトランスパイル(transpile)とPolyfillの違いについてまとめてみたトランスパイルとPolyfill各ブラウザのバージョンによって、対応しているJavaScript(ECMAScript)のバージョンは異なる。そのバージョン対応の差異に対応するためにトランスパイル(transpile)とPolyfilという方法が存在する。両者の違いがいまいちよくわからなかったので、調べてまとめてみた。トランスパイル(transpile)トランスパイルは一言で言えば、ある言語で書かれたコードを元に別の言語のコードを生成すること。以下、Wikipediaから引用し、意訳させてもらった(間違っていたらご指摘ください)。transpilerは、あるプログラミング言語をインプットとして受けて、同等のソースコードを別のプログラミング言語で出力する。transpilerの説明だが、この「あるプログラミング言語をインプットとして受けて、同等のソースコードを別のプログラミング言語で出力する。」ことがトランスパイル(transpile)。ECMAScriptでいうと、あるバージョンで記述されたJavaScriptやTypeScriptのファイルを元に別のバージョンのJavaScriptファイルを生成すること。ES6で書かれたコードを元にES5のシンタックスにしたコードを生成すること。TypeScriptのコンパイラやBabelがトランスパイルを行うトランスパイルラー(transpiler)。PolyfillPolyfillは一言で言えば、古いブラウザでは実現できないAPIを、古いブラウザでも同等の機能を使用できるように補うための小さなライブラリのようなもの。最新のAPIを使用してコードを記述しても、Polyfillを使用すれば、そのAPIが対応していない古いバージョンのブラウザでも、その最新のAPIと同等の機能を使用することができるようになる。以下、Wikipediaから引用し、意訳させてもらった(間違っていたらご指摘ください)。https://en.wikipedia.org/wiki/Polyfill(意訳)web開発では、Polyfillはその機能をサポートしていないブラウザ上でその機能を実装するためのコードである。場合、それはHTML5のwebの標準を実装したJavaScriptのライブラリについて言及していて、その標準とは、古いブラウザ上ですでに確立された標準(いくつかのブラウザ上でサポートされているもの)か、既存のブラウザでは提案段階の標準(どのブラウザにもサポートされていないもの)である。)」Polyfillによって、webの開発者は、あるAPIをブラウザがサポートしていようがいまいが、大抵の場合は、小さいオーバーヘッドでそれを使えるようになる。一般的にPolyfillは、まずブラウザがそのAPIをサポートしているかを確認し、それが利用できるのならば利用し、さもなければ、Polyfill自身の実装を使用する。Polyfill自身が他のもっとサポートされた機能を使うこともあり、それゆえに他のブラウザのために別のPolyfillが必要となることもあり得る。APIと互換性を持った違う書き方の実装を提供してくれる。2.0.x系)入門~基本的なGroupByKey編~月別アーカイブ参加グループプログラミングはてなブログをはじめよう!sekky0905さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。