Lightning Web コンポーネント (正式リリース)

Lightning Web コンポーネントと Aura コンポーネント (元のモデル) の 2 つのプログラミングモデルを使用して、Lightning コンポーネントを作成できるようになりました。Lightning Web コンポーネントは、HTML と最新の JavaScript を使用して作成されたカスタム HTML 要素です。Lightning Web コンポーネントと Aura コンポーネントは 1 つのページで共存および相互運用できます。どちらも Lightning コンポーネントとしてシステム管理者やエンドユーザに表示されます。

対象: この機能は、Lightning Experience、Lightning コミュニティ、およびすべてのエディションのモバイルアプリケーションの全バージョンで使用できます。Lightning Web コンポーネントを作成するには、Enterprise Edition、Performance Edition、Unlimited Edition、および Developer Edition を使用します。

理由: Lightning Web コンポーネントにより、最先端の JavaScript および Web 標準が Lightning コンポーネントフレームワークに提供されます。2014 年に Lightning コンポーネントフレームワークが導入されてから、Web スタックがアプリケーション開発プラットフォームへと進化し、フレームワークを必要とする多くの機能が標準になりました。この進化を利用するために、Lightning Web コンポーネントプログラミングモデルが開発されました。Salesforce エンジニアは、TC39 (ECMAScript (JavaScript) を定義するコミュニティ) で先導的な役割に寄与しました。

Lightning Web コンポーネントは、コア Web コンポーネント標準を使用し、Salesforce でサポートされているすべてのブラウザで適切に動作するために必要な機能のみを提供します。Lightning Web コンポーネントプログラミングモデルは、ブラウザでネイティブに実行されるコード上に構築されるため、軽量で卓越したパフォーマンスを発揮します。記述するコードの大部分は、標準の JavaScript および HTML です。

Lightning プラットフォームの開発を容易にするコンポーネント、ツール、サービス (Lightning 基本コンポーネント、Lightning Design System、Lightning アプリケーションビルダー、コミュニティビルダー、Lightning データサービス、Lightning Locker) を使用することもできます。

この Lightning Web コンポーネントは、6 行の JavaScript で作成された完全に編集可能なフォームです。取引先責任者が表示されている編集可能なレコードフォーム。

次にいくつかコードを見てみましょう。各 Lightning Web コンポーネントは、HTML テンプレートと JavaScript クラスで構成されています。このコンポーネントには、Lightning データサービス上に構築されるベース <lightning-record-form> コンポーネントが含まれます。コンポーネントの属性は、object-api-namerecord-idfields です。
<!-- recordFormDynamicContact.html -->

<template>

    <lightning-card title="RecordFormDynamicContact" icon-name="standard:contact">

        <div class="slds-m-around_medium">
            <lightning-record-form object-api-name={objectApiName}
                                   record-id={recordId} 
                                   fields={fields}>
            </lightning-record-form>
        </div>

    </lightning-card>

</template>

コンポーネントの JavaScript クラスでは、recordIdobjectApiNamefields プロパティが宣言されており、HTML テンプレートにバインドされています。

@api が表示されているプロパティは、公開されているリアクティブプロパティです。これらの値が変更されると、新しい値でコンポーネントが再表示されます。このコンポーネントは、このコンポーネントが含まれる Lightning レコードページからその公開プロパティの値を取得します。優れものですよね?
// recordFormDynamicContact.js

import { LightningElement, api } from 'lwc';

export default class RecordFormDynamicContact extends LightningElement {

    @api recordId;
    @api objectApiName;
    fields = ['Name', 'Title', 'Phone', 'Email'];

}

方法: Salesforce CLI を使用して、Salesforce とお気に入りのコードエディタ間で Lightning Web コンポーネントのソースコードを同期します。Salesforce 拡張機能パックには、Salesforce CLI コマンド、コード補完、リンティングが含まれており、コーディングの迅速化と円滑化を実現できるため、Visual Studio Code をお勧めします。

Playground (Salesforce の対話型コードエディタ) を試すこともできます。JavaScript、HTML、CSS コードを記述し、開発しながら出力をプレビューします。Playground アプリケーションを保存し、組織の他の開発者と共有します。Playground のコードエディタと出力ペイン。