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 の 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 の使用は制限されており、リンティングエラーがスローされます。
  • 実験的なテンプレート 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 メソッド、表示ラベル、スキーマなど) に対して検証されます。

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

    import { LightningElement } from "lwc";
    
    export default class extends LightningElement {
      connectedCallback() {
        console.log(this.template.host);
        // OSS: the component host element
        // Platform: null
      }
    }

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

    import { LightningElement } from "lwc";
    
    export default class extends LightningElement {
      renderedCallback() {
        const child = this.template.querySelector("c-child");
        console.log(child.shadowRoot);
        // OSS: the child component ShadowRoot
        // Platform: null
      }
    }

関連トピック

• github.com/salesforce/lwc
• lwc.dev
• Lightning プラットフォームとオープンソースでの Lightning Web コンポーネント構築の違い
• Lightning Out による Salesforce 外でのコンポーネントの使用 (ベータ)

j

No Results

Search Tips:

• Please consider misspellings
• Try different search keywords

使用開始

Lightning コンポーネントライブラリ

リリースノート

コーディングの開始

オープンソース

API バージョン設定

サポートされるブラウザ

サポート対象の JavaScript

サポート対象の Salesforce 対象とツール

Lightning Web Components または Aura の選択方法

開発環境の設定

Lightning Web コンポーネントの開発のベストプラクティス

Trailhead とサンプルコードの探索

Lightning Web コンポーネントの作成

イベントを使用した通信

Salesforce データの操作

セキュアなコードの開発

Salesforce 対象でのコンポーネントの使用

Salesforce 外でのコンポーネントの使用

Aura との共存

Aura コンポーネントの移行

Lightning Web コンポーネントのデバッグ

Lightning Web コンポーネントのテスト

パフォーマンスの向上

リファレンス

日本語

English

日本語