Lightning Web Components: オープンソース

Lightning Web Components はオープンソースであり、Salesforce だけではなくあらゆるプラットフォームでソースコードを調べたり、ニーズに合わせて動作をカスタマイズしたり、エンタープライズ対応の Web コンポーネントを作成したりできます。

以前は、Salesforce の外部でホストされるアプリケーションの異なる側面を作成するために、異なるフレームワークを使用する必要がありました。たとえば、Salesforce のアプリケーションの従業員向けの側面は Aura を使用して作成していました。そして、アプリケーションの顧客向けの側面は React、Angular、または Vue を使用して作成し、それを Heroku やその他のプラットフォーム上でリリースするなどしていました。今日では、Lightning Web コンポーネントを使用してアプリケーションの両側を作成できます。これには大きな利点があります。いくつかのフレームワークではなく 1 つのフレームワークについて学習できます。アプリケーション間でコードを共有できます。Web 標準を基盤とし、最新のパターンやベストプラクティスに基づいた最先端のフレームワークを使用できます。

Lightning Web Components 開発者ガイド (今読んでいるドキュメント) では、Lightning プラットフォームで動作する Lightning Web コンポーネントの開発方法と、Lightning データサービス、Lightning Locker、Lightning Out などのプラットフォーム機能の使用方法を説明します。

Lightning Web Components オープンソースと同じように、Lightning Out は Lightning Web コンポーネントを Lightning プラットフォーム以外で実行できるようにします。コンポーネントで Salesforce データへのアクセスが必要な場合は、Lightning Out を使用してください。コンポーネントが Salesforce データや他の Salesforce 機能を必要としない場合は、Lightning Web Components オープンソースを使用して開発してください。

オープンソースリポジトリのコードは、Lightning プラットフォームで利用できるコードより進んでいます。オープンソースリポジトリでリリースされている機能のほとんどは、最終的には Lightning プラットフォームでもリリースされます。

Salesforce Platform の Lightning Web Components は、Lightning Web Components: オープンソースの管理バージョンです。Salesforce Platform 以外で作業する場合、LWC をダウンロードして独自に設定し、アプリケーションを任意のホスト環境にリリースして、いつアップグレードするかを選択できます。Salesforce Platform で作業する場合、すべてのユーザの LWC の設定、リリース、およびアップグレードは Salesforce によって管理されます。

プラットフォーム上の LWC OSS と LWC のリリーススケジュールは異なります。LWC エンジニアリングチームは通常、毎週 LWC OSS をリリースしますが、年に 3 回 Salesforce Platform はリリースされます。この違いにより、Salesforce プラットフォームバージョンの LWC は、オープンソースバージョンの LWC より 3 ～ 6 か月遅くなります。

オープンソースの LWC エンジンは、Salesforce Platform の LWC エンジンと同じです。異なるのは、コンパイラレベルおよび実行時のエンジンの設定方法です。

  • Salesforce Platform での実験的な LWC API の使用は制限されており、リンティングエラーがスローされます。
  • LWC モジュールを Salesforce Platform にプッシュするときに、次のリンティングルールが適用されます。
    • @salesforce/eslint-config-lwc/base からのすべてのルールが適用されます。ESLint では、これらのルールのインライン設定が無視されます。
    • 動的インポート (import('c/foo')) は禁止されています。
    • LWC モジュールから Aura へのアクセス ($A など) は禁止されています。
  • @salesforce/* インポートは、組織のメタデータ (Apex メソッド、表示ラベル、スキーマなど) に対して検証されます。

  • コンポーネントは @lwc/synthetic-shadow を有効にして実行されます。このモードでは、Shadow DOM を実装していない IE11 がサポートされます。副次的影響として、ページレベルで挿入されたすべてのスタイル (lightning/platformResourceLoader からの loadStyle の使用など) がコンポーネントに継承されます。

  • SVG <use> 要素の link および href 属性は、潜在的な悪意のあるスクリプト挿入を防ぐために Locker によってサニタイズされます。

  • LWC モジュールは、Lightning Locker または Lightning Web セキュリティ内で評価されます。標準の Web プラットフォーム API に適用される制限に加えて、Locker および Lightning Web Security により LWC コンポーネントにいくつかの制限が追加されます。

    • this.template.host は常に null を返します。

    • テンプレートから取得したコンポーネントで shadowRoot にアクセスすると、常に null が返されます。

関連トピック