Lightning データサービスを使用したデータの操作

<template>
    <lightning-card>
        <lightning-record-form
            object-api-name={objectApiName}
            fields={fields}
            onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class AccountCreator extends LightningElement {
    objectApiName = ACCOUNT_OBJECT;
    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];
    handleSuccess(event) {
        const toastEvent = new ShowToastEvent({
            title: "Account created",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }
}

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecordProperty extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    account;
    get name() {
        return getFieldValue(this.account.data, ACCOUNT_NAME_FIELD);
    }
}

<template>
  Account Name: {name}
</template>

wireGetRecordProperty はプロパティをデコレートする例です。同様に関数をデコレートできます。これは、返されたレコードに対して何らかのロジックを実行する場合に便利です。次の例では、前の例 (wireGetRecordProperty) を変更してプロパティではなく関数 (wiredAccount) を結び付けています。

wireGetRecordFunction.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecord extends LightningElement {
    @api recordId;
    data;
    error;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    wiredAccount({data, error}) {
        console.log('Execute logic each time a new value is provisioned');
        if (data) {
            this.data = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }
    get name() {
        return getFieldValue(this.data, ACCOUNT_NAME_FIELD);
    }
}

コードのポイント:

• 行 8 ～ 9: プロパティをデコレートするのではなく、wiredAccount 関数をデコレートします。この関数は、2 つの属性 data と error を持つオブジェクトをパラメーターとして受け取ります。ここではオブジェクト ES6 destructuring を使用してオブジェクト属性をアンパックします。
• 行 11 ～ 17: LDS ワイヤーアダプターは 1 つの値ではなく値のストリームをプロビジョニングするため、wiredAccount 関数は複数回呼び出される可能性があります。そのため、結び付けられた関数は影響を与えた状態をリセットする必要があります。行 11 ～ 17 では、ワイヤーアダプターが新しいデータをプロビジョニングした場合、そのデータは data プロパティに保存され、error プロパティは undefined に設定されます。またはエラーになった場合、error プロパティにエラーが保存され、data プロパティが undefined に設定されます。

この例では、前の例のアクセスと同じ方法で name プロパティにアクセスできます。

LDS 関数を使用してデータを変更する

LDS ワイヤーアダプターはデータの参照に適していますが、レコードの作成、更新、削除には LDS 関数が必要です。ワイヤーアダプターは Lightning Web コンポーネントエンジンによって呼び出されますが、関数は命令的に呼び出す必要があります。LDS 関数は、レコードが作成、更新、または削除されると LDS キャッシュに通知します。次の例では createRecord LDS 関数を使用して取引先レコードを作成します。

ldsCreateRecord.js

import { LightningElement} from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class LdsCreateRecord extends LightningElement {
    handleButtonClick() {
        const recordInput = {
            apiName: ACCOUNT_OBJECT.objectApiName,
            fields: {
                [ACCOUNT_NAME_FIELD.fieldApiName] : 'ACME'
            }
        };
        createRecord(recordInput)
            .then(account => {
                // code to execute if create operation is successful
            })
            .catch(error => {
                // code to execute if create operation is not successful
            });
    }
}

コードのポイント:

• 行 2: createRecord LDS 関数をインポートします。
• 行 3 ～ 4: Account オブジェクトと Account.Name 項目を (以前の例と同様に) インポートして参照整合性を確保します。
• 行 6: handleButtonClick メソッドをイベントハンドラーとして定義します。これはユーザーが .html ファイル内の lightning-button (ここには含まれていない) をクリックすると発生するイベントに反応します。handleButtonClick は、呼び出されると createRecord 関数を命令的に呼び出します。
• 行 10: イベントハンドラーは Account.Name 項目の文字列を渡します。これはアダプターが新しい取引先を作成するために必要です。
• 行 13: LDS 関数を命令的に呼び出すと、promise (非同期コールの実行を簡略化する JavaScript オブジェクト) が返されます。
• 行 14 ～ 16: then メソッドに取引先が正常に作成されたときの処理を定義します。
• 行 17 ～ 19: catch メソッドに取引先の作成が失敗したときの処理を定義します。

注意: LDS 関数で操作できるのは 1 件のレコードのみです。同じコンポーネントで複数の関数を使用できますが (たとえば、同じ操作内で異なる 2 種類のレコードを作成するなど)、各関数は独自の独立したトランザクション上で実行されます。そのため、共通のロールバックロジックがありません。結合した DML 操作を Transactional にする必要がある場合は、Apex の使用を検討します。

LDS ワイヤーアダプターと LDS 関数の詳細と使用方法については、『Lightning Web Components Developer Guide』(Lightning Web コンポーネント開発者ガイド) と Salesforce 開発者ブログを参照してください。

取引先を作成する Lightning Web コンポーネントをリリースする

Lightning データサービスのさまざまな使用方法を確認できたところで、実際に例を操作してみましょう。

始める前に

ここでは Salesforce DX 開発環境が設定されていること、ユーザーが容易にその環境を使用して Lightning Web コンポーネントを作成し、組織にリリースできることを前提としています。このプロセスにまだ慣れていない場合は、「クイックスタート: Lightning Web コンポーネント」プロジェクトを修了してください。

新しい Trailhead Playground を作成する

このプロジェクト用に、新しい Trailhead Playground を作成する必要があります。このページの最下部までスクロールし、[起動] の横にある下矢印をクリックして [Trailhead Playground を作成] を選択します。新しい Trailhead Playground を作成するには、通常 3、4 分かかります。

注意: 必ず新しい Trailhead Playground を使用してください。既存の組織または Playground を使用すると、Challenge を行うときに問題が発生することがあります。

Trailhead Playground のユーザー名とパスワードを取得する

Trailhead Playground に移動します(Playground がまだ開いていない場合は、このページの一番下までスクロールして [Launch (起動)] をクリックします)。組織に [Get Your Login Credentials (ログイン情報を取得する)] というタブが表示されている場合は、ステップ 1 へスキップします。 

表示されていない場合は、アプリケーションランチャー () で、[Playground Starter] をクリックして手順に従います。Playground Starter アプリケーションが表示されない場合は、Trailhead ヘルプの「Trailhead Playground のユーザー名とパスワードの調べ方」を参照してください。

1. [Get Your Login Credentials (ログイン情報の表示)] タブをクリックし、ユーザー名をメモします。
2. [Reset My Password (パスワードのリセット)] をクリックします。ユーザー名に関連付けられているアドレスにメールが送信されます。
3. メール内のリンクをクリックします。
4. 新しいパスワードを入力し、確認して、[Change Password (パスワードの変更)] をクリックします。

ハンズオンを始める準備はできましたか? それでは始めましょう。

この演習では、Lightning Web コンポーネントをプロジェクトに追加して、Trailhead Playground にリリースします。 

1. 新しいプロジェクトを作成します。
   1. Visual Studio Code を開きます。
   2. コマンドパレットを開き、[View (表示)] | [Command Palette (コマンドパレット)] をクリックします。
   3. コマンドパレットで [SFDX: Create Project (SFDX: プロジェクトを作成)] をクリックします。
      リストに表示されない場合は、SFDX:Create Project と入力し、Enter キーを押します。
   4. 標準テンプレートを受け入れます。
   5. プロジェクト名に「workingWithDataInLWC」と入力し、Enter キーを押します。
   6. 新しいプロジェクトの場所を選択し、[Create Project (プロジェクトを作成)] をクリックします。
2. Trailhead Playground を承認します。
   1. コマンドパレットで [SFDX: Authorize an Org (SFDX: 組織を承認 )] を選択 (または入力) します。
   2. [Production: login.salesforce.com (本番: login.salesforce.com)] を選択し、Enter キーを押します。
   3. 別名として「lwc_and_salesforce_data」と入力し、Enter キーを押します。
   4. Trailhead Playground のユーザー名とパスワードを入力してログインします。
   5. Trailhead Playground にログインしたら、開いたままにして Visual Studio Code に戻ります。
3. Lightning Web コンポーネントを作成します。
   1. エクスプローラーペインで、lwc フォルダーを右クリックして [SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] を選択します。
   2. コンポーネント名として「accountCreator」と入力し、Enter キーを押します。
   3. もう一度 Enter キーを押して、デフォルトのディレクトリを受け入れます。
4. accountCreator.html および accountCreator.js ファイルの内容をこの単元の前の「レコードフォーム基本コンポーネントを使用したデータの参照または変更」セクションで提供されているコードで置き換えます。
5. このコンポーネントを組織のアプリケーションページで使用できるようにするには、accountCreator.js-meta.xml ファイルの内容を次のコードで置き換えます。
   

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
       <apiVersion>48.0</apiVersion>
       <isExposed>true</isExposed>
       <targets>
           <target>lightning__AppPage</target>
       </targets>
   </LightningComponentBundle>

6. 3 つのファイル (accountCreator.html、accountCreator.js、accountCreator.js-meta.xml) を保存します。
7. プロジェクトファイルを Trailhead Playground にリリースします(accountCreator フォルダーを右クリックして [SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] を選択します)。
8. Trailhead Playground がまだ開いていない場合は、開きます(コマンドパレットで [SFDX: Open Default Org (SFDX: デフォルト組織を開く)] を選択 (または入力) します)。
9. Trailhead Playground で をクリックして [設定] を選択します。
10. [クイック検索] ボックスに「Lightning アプリケーションビルダー」と入力し、[Lightning アプリケーションビルダー] を選択します。
11. Lightning ページを作成します。
    1. [New (新規)] をクリックします。
    2. [App Page (アプリケーションページ)] を選択し、[Next (次へ)] をクリックします。
    3. [Label (表示ラベル)] にWorking with Data (データの操作) と入力し、[Next (次へ)] をクリックします。
    4. レイアウトで [ヘッダーと左サイドバー] を選択します。
    5. [Finish (完了)] をクリックします。
12. accountCreator コンポーネントをページサイドバーにドラッグします。
13. ページを保存します。
14. ページを有効化します。デフォルトのアプリケーション名 (Working with Data) のままで [Save (保存)] をクリックします。
15. ページをナビゲーションメニューに追加するように要求されたら、[Finish (完了)] をクリックします。
16. 新しいページを開きます。アプリケーションランチャーの検索で「work」と入力し、[Working with Data (データの操作)] を選択します。

これで完成です。lightning-record-form を使用して [Working with Data (データの操作)] ページ上で取引先レコードを作成する Lightning Web コンポーネントができました。Lightning データサービスの使用は、Lightning Web コンポーネントで Salesforce データを操作する方法の 1 つです。次の単元では、Apex を使用してデータを操作する方法を学習します。

リソース

• Lightning Web Components Developer Guide (Lightning Web コンポーネント開発者ガイド): Lightning Data Service (Lightning データサービス)
• Lightning Web Components Developer Guide (Lightning Web コンポーネント開発者ガイド): Work with Records Using Base Components (基本コンポーネントを使用したデータの操作)
• Lightning Web Components Developer Guide (Lightning Web コンポーネント開発者ガイド): Use the Wire Service to Get Data (ワイヤーサービスを使用したデータの取得)
• ブログ: Caching and Synchronizing Component Data with Lightning Data Service (Lightning データサービスを使用したコンポーネントデータのキャッシュと同期)