🎠 😼 🐮 ES3での新しいJavaScript機能の使用 👩🏽‍🔧 ⛽️ 🌦️

こんにちは同僚。

最近、時々JavaScriptテーマに戻ります。私たちは、ES6標準（Kyle Simpson）に特化したシリーズ「You Do n't Know JS」の次の本に特に興味がありました。

ところで、誰かがすでにAdam Boduhの新しい本「 JavaScript at Scale 」をよく見て、ロシア語で見たいと思っているかもしれません。

これについては調査で。そして、アンダーカット-Cody Lindley氏による重要な（1月）記事で、JavaScriptの世界がどのように変化する準備ができているかを考えるのに役立ちます。

大企業向けのJavaScript Web開発の世界では、少なくともECMAScript 3（ES3標準）の条件下で機能するようなソリューションが作成され、ツールが使用されます。あなたには驚きの権利があります-しかし、これはどのようにできますか？最終的に、ECMAScript 5は2011年6月に準備が整い、IE 9（ strictモードを除く）を含むすべての最新ブラウザーでサポートされています。

この記事では、大企業のすべてではないにしても多くのJavaScript開発者がまだES3を検討する必要がある理由について説明し、ES5 / ES6機能を今日使用したい人のためのいくつかの戦略についても説明します。最後に、なぜ自分でやらないのかを説明します。

IE8はまだここにあります。 それに慣れてください。

IE 8、7、さらには6のサポートは、依然として企業の関連要件である可能性があります。あなたがそれを望むかどうか、あなたがそれに同意するかどうか-それはそうです。言い換えれば、戦闘コードでJavaScript ES5またはES6の機能を使用することは、多くの企業環境ではまだ未来のことです。

原則として、企業の開発者が作成したコードと彼らが使用するツールは、ES3環境をサポートする必要があります。たとえば、Kendo UIのほとんどのウィジェット（モバイルウィジェットを除く）はIE7 +でテストおよびサポートされています。企業の開発者向けに書かれたほとんどすべてのJavaScriptソリューションの簡単な調査でさえ、これらのソリューションのほとんどはES3標準を考慮して作成されていると確信しています。

これは、企業開発に手を染めた人を驚かせるべきではありません。ただし、 最新の JavaScriptツール（Angular 1.3など）の多くは、純粋なES3環境での理想的な動作に関係なくテストおよび開発されているため、まったく根付いていない可能性があるという事実を理解するのが難しい場合があります。少なくとも、彼らは深刻なトラブルを引き起こし、回避策とポリフィルを必要とします。

今日、企業のツールは、プログラマが直面できる最も複雑なタスクのみを解決するために、非常に信頼性が高く、一流の、実績のある、鋭利なものとして認識され、称賛されることがよくあります。しかし現実には、エンタープライズJavaScriptコードと関連ツールのほとんどは、16年前に完成した仕様に基づいて記述および標準化されています。

間違いなく、ES3標準は時を経てテストされていますが、大企業への高い信頼性と適合性については、現在のJavaScript開発者の多くが議論できると思います。最終的に、新しいES5およびES6仕様の機能は、定義上、ES3の欠陥を修正し、現在直面している複雑な問題を解決するための最新のJavaScriptのために特別に作成されました。さらに、16年前に実現された単なる機会だけでは、現代のJavaScript開発には不十分であることに疑いの余地はありません。

開発者向けのアクションプランは何ですか？

大企業の平均的なJavaScript開発者にとって、これがどれほど悲観的であるか想像してみてください。 JavaScriptの専門家として、私自身も最終的な開発と実装を待たずに、すべての同僚が新しいJavaScript機能の使用を開始できるようにしたいと考えています。ブラウザと企業、気になります！

しかし、望ましいものと実際のものとの間には大きな違いがあります。だからこそ、新しい機能をシミュレートするためにポリフィルが作成され、人々は古いブラウザー用にJavaScriptをコンパイルしたり、クライアントコードをドロップしてNodeを学習したりします。笑ってはいけません、それは起こります。クライアントとブラウザは本当に開発者を引き付けることができるので、彼はJavaScriptのより良いランタイム環境の探索に真っ向から走ります。

真剣に、ES3ツールを使用し、ES3環境で実行されるコードを記述する企業開発者にとって最も賢いことは、ただ仕事をすることです。いつか古いブラウザ（ES3）をサポートすることを忘れて、ES5またはES6の最新のネイティブコードのみを作成できるという夢を誰も気にしないと思います。もちろん、エンタープライズ開発者は古いブラウザの死を待つ必要があります-率直に言って、これは大企業ではすぐには起こりません。

ポリフィルまたはコンパイルを使用しない理由

個人的には、大規模なポリフィルを使用しようとしたことはなく、ES5またはES6から機能するES3コードを作成するためのコンパイルに頼りませんでした。はい、時々ポリフィルに頼りましたが、ポリフィルまたはコンパイル手順の包括的な使用に伴う困難とコストに対処することができませんでした（つまり、ES5またはES6ソースコードからES3コードを作成します）。落とし穴、追加のポリフィル、使用上の制限、および劣った機能-これらが私にこれをさせなかった理由です。たとえば、新しい6to5コンパイラーを使用する場合のES6機能の使用に関するすべての詳細について読んでみてください。

これは、そのような機会があったときに新しいJavaScript機能を楽しんだり、プログラムしたり、使用したりしたわけではありません。同じことをします。実際のところ、ES3環境からのサポートが必要な場合、次のような最も抵抗の少ないパスを選択します。そのようなツールを使用して、ES3の「金属」にできるだけ近いコードを作成します。最後に、ツールがES5 +を必要とするという単なる事実は、ポリフィルまたはコンパイルに関連する別のサードパーティソリューションに固有の条件下で動作できることを意味しません-もちろん、このソリューションが事前にテストされておらず、必要なポリフィルが付属している場合明らかな理由（ファイルサイズ、同期、複製など）は通常行われません。

そのため、ポリフィルやコンパイルに頼ることはほとんどありませんでした。 JavaScriptアプリケーションの構築は、それ自体が非常に複雑な企業だと思います。大規模な企業プロジェクト、コスト、または官僚主義（特にサードパーティの官僚主義）のわずかな合併症は、それらが開発に根本的な利益をもたらす場合にのみ正当化されます。私の練習では、ES3ベースのコードベースに新しいJavaScript機能を追加することで、このような利益を達成することはできませんでした-それはとても難しいことです。

しかし、誰もが私に同意するわけではありません。もちろん、それぞれに追加の複雑さや正当なリスクの許容限度があります。したがって、この記事の一部として、私とは異なり、後の仕様で登場したES3コードベースでそのような機能を使用することにしたと思います（注：サードパーティコードのポリフィルについて話している）。

企業で新しいES6 + JavaScript機能を活用するための戦略

この記事の残りの部分では、エンタープライズで新しいES6 + JavaScript機能を使用するための3つの戦略について説明します。

戦略1.挿入されたポリフィルの適用

ES3環境をES5およびES6標準（さらにはES7から）の機能で満たせないのは非常に簡単です-HTMLドキュメントにcore.jsプロジェクトのshim.jsファイルを含めるだけです。

shim.jsは、実行/解析する最初のJavaScriptファイルとしてHTMLドキュメントに含まれており、それに続くすべてのJavaScriptコードは、ポリフィル機能をネイティブのものとして使用できます（core.jsのコード例を以下に示します）。

console.log(Array.from(new Set([1, 2, 3, 2, 1]))); // => [1, 2, 3] console.log('*'.repeat(10)); // => '**********' Promise.resolve(32).then(console.log); // => 32 setImmediate(console.log, 42); // => 42

core.jsは、ECMAScript互換のポリフィルの完全なセットを提供するだけでなく、shim.jsの代わりにcore.jsを使用する場合に利用できる次の非標準JavaScript機能も提供することに注意してください。

戦略2.オプトイン原則の使用

好むと好まざるとにかかわらず、上記のプラグインポリフィルは、実行時にES環境に新しい機能を追加します。すべてのコストで。これがあなたに合わない場合、別のオプションがあります。 core.jsプロジェクトは、新機能を実装する明示的なオプトインpolizolneniyaも提供しますが、これらの機能は選択的に使用でき、それぞれを個別にアクティブ化できます。同様の方法は、lodashのようなライブラリで使用されます。lodashは、1つのグローバル値（_など）を提供し、すべての可能性が結び付けられています。

コードでES5およびES6を明示的に有効にするには、core.jsのlibrary.jsファイルを含めることができます。次に、「core」のグローバル値に関連付けられているメソッドの機能に対応するコードを記述することにより、必要に応じて新しいECMAScript機能を適用できます。同様の状況は、次のコードサンプルで実装されています（例はcore.jsから取られています）。

 var log = core.console.log; log(core.Array.from(new core.Set([1, 2, 3, 2, 1]))); // => [1, 2, 3] log(core.String.repeat('*', 10)); // => '**********' core.Promise.resolve(32).then(log); // => 32 core.setImmediate(log, 42); // => 42

戦略3. ES3のポリフィルの以下の適用によるES6 + ES5の予備コンパイル

ES5およびES6の標準機能をES3コードに直接コンパイルすることはできません（たとえば、古い機能を使用して新しい同等の機能を作成するなど）。そうでなければ、あなたはそれらの機会を真剣に制限します。放送することができます。 ES6コードがES5にコンパイルされるプリコンパイルステージを使用し、プラグインpolyfill shim.jsを使用してES3への最後のアップグレードを克服するのが現実的です。

これを行うには、新しい6to5トランスパイラーを使用して、gulpを使用する予備ビルドタスクを作成します。gulpは、ES6を未修正（バニラ）ES5に変換します。次に、6to5のドキュメントによると、 ES6の本格的なランタイム環境を取得するには、再生成ランタイム、 shim.js 、 ES6モジュールローダーポリフィルを使用してこの環境を準備する必要があります（注：core.jsのclient / shim.jsを使用します。 ES3サポートが提供されます）。

6to5でコンパイルされたコードを含むHTMLファイルは次のようになります。

 <!DOCTYPE html> <html> <body> <script src="runtime.js"></script> <script src="client/shim.js"></script> <script src="es6-module-loader.js"></script> <script> System.parser = '6to5'; //  es6-module-loader.js    6to5 //   ,   6to5 </script> </body> </html>

商用コードでこれを行う場合は、考えられるすべてのニュアンスを絶対に探索することを強くお勧めします。

サードパーティのコードはどうですか？

理論的には、ES3環境で新しいJavaScript機能を使用するためにコードをポリコンプリートまたはポリフィル+プリコンパイルしている場合、ES5 +環境でのみ動作するサードパーティツールを安全に使用できますか？いや！

ES3環境でサードパーティツールを安全に使用できるようにする唯一のオプションは、サードパーティコードレベルで特定のポリフィル/コンパイラを直接サポートすることです。それ以外の場合、このセクションの最初の段落の前提は非常に愚かで一時的なままです。古い環境への新しい機会のこのすべての提出は、特定の落とし穴、複雑なトリック、および個人的な意見に関連しています。これらの開発者があなたの環境に正確に適応していることを個人的に確認していない限り、サードパーティの開発者がそのような詳細に対処したと想定しないでください。よくわからない場合は、サードパーティの開発者がポリフィルとコンパイル済み出力をテストする可能性は低いことに留意してください。原則として、サードパーティコードの解析にES5 +環境が必要な場合、実際のES5 +環境を意味します。

ES3での新しいJavaScript機能の使用

More articles: