LWCでの最新のESXX機能の活用
オリジナル記事
Leveraging the Newest ESXX Features in LWC
Salesforceが参加しているEcma International Technical Committee 39（TC39）では、JavaScriptをベースとしたECMAScript言語使用標準であるECMA-262の新版を毎年リリースしています。次のエディションはES2021（ES12）で、現在ドラフト作成中であり、6月にリリースされる予定です。ブラウザー、コンパイラー（Babel、Typescriptなど）、ランタイム（Node.jsなど）は、新しく追加される機能に対するサポートを実装して最新のECMAScript標準に対応するために懸命に取り組んでいます。ここでは、最新の優れたECMAScriptの機能と、そのLightning Webコンポーネントでの使用方法について説明します。
LWCコンパイルプロセス
特定のES6+ JavaScript機能をLWCで使用する意味を理解するには、LWCコンパイルプロセスの仕組みを明らかにすることが重要です。LWCファイルをプラットフォームにプッシュまたはリリースするとき、複数のタスクが実行されます。
まず、LWC Eslintプラグインのベース設定を使用してコードをスキャンするlinterを実行します。これにより、LWCでの一般的な危険性が防止され、他のSalesforceプラットフォームの制限が適用されます。これは、linterがVSCodeでローカルに実行される場合とは異なることに注意してください。VSCodeでは、使用するlint設定を制限の多少により選択できます。
次に、作成されたコードをコンパイルします。LWCコンパイラーは、BabelとRollupを使用してこのタスクを実現します。このプロセスは、解析、変換、バンドルの3ステップを伴います。
まず、パーサー（Babel）がコードを読み取り、どの構文構造が使用されているかを理解します。たとえば、関数、クラス（ES6）、オブジェクトスプレッド構文（ES9）、またはオプションのチェーン演算子（ES11）を使用しているかどうかを特定します。パーサーは頻繁にアップグレードされ、最新のESバージョンに含まれている新しい構文構造の解析をサポートします。
次に、コードは2つの異なる出力を生成するように変換されます。
- ES6出力 – このコードは、ES6構文をネイティブでサポートし、パフォーマンスを大幅に向上させる最新のブラウザーで実行されます。このバージョンのコードについては、ES6+構文機能のサブセット（ES7、ES8、Rest/Spreadプロパティ、クラスフィールドを含む）がES6に変換されます。
- ES5出力 – このコードは、Internet Explorer 11などの古いブラウザー（互換ブラウザーと呼んでいます）で実行されます。これらのブラウザーは、ES5の上位バージョンに含まれている構文機能をサポートしません。そのため、ES5+構文機能（上記の機能に加え、ES6構文機能）のサブセットがES5に変換されます。
また、どちらの出力にも、Rollupを使用してバンドルされている、コンパイル済みのテンプレートとCSSファイルが含まれます。テンプレートファイルがコンパイルされるのは、コンポーネントDOMがJavaScriptで動的に生成されるためです。CSSファイルは、合成Shadow DOMを使用する場合にスタイルのスコープをコンポーネントに設定するように変換されます。
変換されない構文機能を使用している場合はどうなるでしょうか（たとえば、ES11のオプションのチェーン演算子）？パーサーがそれを理解する（頻繁にアップグレードされるため、通常は理解します）場合、機能は両方のコードバージョンに含まれ、ブラウザーが構文を理解できる場合（多くは最新のブラウザーの場合）のみ動作します。
この状況の正確性はブログ記事の公開日までであることに注意してください。ただし、LWCチームは新しく導入される構文に対応するための新しい変革について取り組んでいるので、状況はまもなく変わる可能性があります。
ランタイム実行とポリフィル（polyfill）
ランタイム実行について見ていきましょう。アプリケーションがブラウザーで実行されるとき、ブラウザーの種類を検出するためにユーザエージェントが使用されます。ブラウザーによって、コードのES5またはES6バージョンが、互換ブラウザーの場合は必須のポリフィルとともにロードされます。ポリフィルとは、実行時に言語に追加される不足機能です（通常は、ブラウザーAPI内のオブジェクトまたはメソッド）。これらは構文機能とは異なることに注意してください。ポリフィルできる機能の例は、Promise（ES6）、Object.entries()（ES8）、Promise.any()（ES12）です。LWCは、core-jsポリフィルを使用します。
- 互換ブラウザーの場合、すべてのES6機能がポリフィルされます。
- 最新のブラウザーの場合、ES6ポリフィルは不要なため、ロードされません。
では、ポリフィルが提供されていないAPIを使用している場合はどうなるでしょうか（たとえば、ES12のPromise.any()）？アプリケーションを実行するブラウザーでサポートされている場合は、Lockerでもサポートされている限り、動作します。
注：LWC OSSの場合、ES6バージョンのみがデフォルトで生成されます。また、lintとポリフィルは、既成のLWC OSSには含まれていません。
LWCでサポートされるESXX機能
最新のECMAScript標準には、生産性をはるかに高め、コードの効率性を高め、読みやすくする機能が含まれています。アプリケーションを実行するブラウザーでサポートされている場合、大半の機能をLWCで使用できます。通常のJavaScriptアプリケーションの場合と変わりません。
以下に、現在使用できる最新機能をいくつか示します。
ブラウザーでサポートされている場合に、どのESXX機能をLWCで使用できるか、およびその使用方法を簡単に理解できるアプリケーションを作成しました。アプリケーションには、ES9からES12までのバージョンに含まれる機能を紹介するコード例を含むコンポーネントが用意されていますが、以前のバージョンからの機能もサポートされます。各例のコードを確認し、必要に応じてブラウザー開発者用ツールで各例を個別にデバッグして理解を深めることができます。
また、アプリケーションのLWC OSSバージョンも作成しました。アプリケーションをLWC OSSで作成する場合、Lockerは実行されず、一部の制限が緩和されるため、SalesforceプラットフォームがサポートするESXX機能をより多く使用できます。日常的にプラットフォームの外部でLWCを開発する場合は、このバージョンを複製することをお勧めします。
大きなパワーには大きな責任が伴う
このブログ記事では、LWCコンパイルプロセスの仕組み、コードの下位互換性バージョンの提供方法、古いブラウザーの場合に不足する機能（ES6、および一部のES7とES8の機能）をポリフィルする方法を説明しました。また、使用しているブラウザーがサポートする限り、他のほとんどのESXX機能を使用できることも説明しました。
各カテゴリにどのESXX機能が分類されるかを理解しやすくするために、サポートされる機能とその使用方法を紹介する2つのアプリケーションを共有しました。LWCアプリケーションまたはLWC OSSアプリケーションを複製し、チェックアウトしてください。詳しく学びたい方には、このトピックに関する私のウェブセミナーシリーズがTrailhead Liveで2月25日（木曜日）から始まることをお知らせします。カレンダーに追加してください。お読みいただき、ありがとうございます。コーディングを楽しんでください！
関連リソース
著者紹介
Alba Rivasは、Salesforceのリードディベロッパーエヴァンゲリストを務めています。Lightning WebコンポーネントとLightningの定着化戦略に重点的に取り組んでいます。Twitterで@AlbaSFDCをフォローしてください。
