Lightning Web Components: オープンソース

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

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

GitHub リポジトリ — github.com/salesforce/lwc
オープンソース開発者サイト — lwc.dev

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 オープンソースを使用して開発してください。

Salesforce Platform での LWC オープンソースと LWC の違い

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

Important

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 でのコンパイル時の違い

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

Salesforce Platform での実行時の違い

コンポーネントは @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 を返します。

1import { LightningElement } from "lwc";
2
3export default class extends LightningElement {
4  connectedCallback() {
5    console.log(this.template.host);
6    // OSS: the component host element
7    // Platform: null
8  }
9}

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

1import { LightningElement } from "lwc";
2
3export default class extends LightningElement {
4  renderedCallback() {
5    const child = this.template.querySelector("c-child");
6    console.log(child.shadowRoot);
7    // OSS: the child component ShadowRoot
8    // Platform: null
9  }
10}

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。