Salesforce データの操作

• 基本コンポーネントを使用して、1 つのレコードを処理するフォームを作成する。
• ワイヤーサービスを使用してデータを取得する。
• データを作成して更新する。
• Apex メソッドをコールする。

<lightning:recordForm
  objectApiName="Broker__c"
  recordId="{!v.property.Broker__c}"
  fields="{!v.brokerFields}"
  columns="2"/>

<lightning-record-form
  object-api-name="Broker__c" 
  record-id={brokerId}
  fields={brokerFields} 
  columns="2">
</lightning-record-form>

<force:recordData aura:id="service"
      recordId="{!v.recordId}"
      targetFields="{!v.property}"
      fields="['Id',
              'Thumbnail__c',
              'Address__c',
              'City__c',
              'State__c',
              'Zip__c',
              'Price__c',
              'Beds__c',
              'Baths__c',
              'Broker__r.Id',
              'Broker__r.Name',
              'Broker__r.Title__c',
              'Broker__r.Mobile_Phone__c',
              'Broker__r.Email__c',
              'Broker__r.Picture__c']" />

Lightning Web コンポーネントでは、Salesforce データを読み取るために、Lightning データサービス上に構築されたリアクティブなワイヤーサービスを使用します。コンポーネントは JavaScript クラスの @wire を使用して、lightning/ui*Api 名前空間のいずれかのワイヤーアダプターからデータを読み取ります。Salesforce が提供するワイヤーアダプターのリストについては、この単元の「リソース」セクションを参照してください。独自のカスタムワイヤーアダプターを記述することはできません。

このワイヤーサービスをリアクティブと呼ぶ理由の 1 つは、$ というプレフィックスが付いたリアクティブ変数をサポートしているためです。リアクティブ変数が変更されると、ワイヤーサービスが新しいデータをプロビジョニングします。「要求」や「取得」ではなく「プロビジョニング」と言うのは、データが提供されたときに、そのデータをコンポーネントではなく、ワイヤーアダプターが管理するためです。

以下は、@wire を使用してレコードを取得する propertySummary.js の例です。

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Property__c.Name';
import PICTURE_FIELD from '@salesforce/schema/Property__c.Picture__c';
export default class PropertySummary extends LightningElement {
    @api recordId;
    propertyName;
    pictureURL;
    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD, PICTURE_FIELD] })
    wiredRecord({ error, data }) {
        if (data) {
            this.propertyName = getFieldValue(data, NAME_FIELD);
            this.pictureURL = getFieldValue(data, PICTURE_FIELD);
        } else if (error) {
            // Handle error. Details in error.message.
        }
    }
}

このコードは lightning/uiRecordApi から getRecord ワイヤーアダプターをインポートします。

ui*Api ワイヤーアダプターを使用する場合は、オブジェクトや項目への参照をインポートすることを強くお勧めします。オブジェクトや項目への参照をインポートすると、オブジェクトや項目が存在することを Salesforce が検証するため、コードが確実に機能します。次のコードの行は、Property カスタムオブジェクトの Name 項目への参照をインポートします。

import NAME_FIELD from '@salesforce/schema/Property__c.Name';

@api デコレーターは recordId プロパティを公開します。propertySummary を含む親コンポーネントは、その HTML ファイルの record-id 属性の値を設定します。

$recordId は先頭に $ が付いているため、その値が変更されると、ワイヤーサービスが新しいデータを取得してコンポーネントにプロビジョニングします。新しいデータが提供されると、結び付けられている関数が呼び出されます。このプロセスがプロパティを更新し、それによって再表示が行われます。

wiredRecord 関数が、このワイヤーサービスからデータのストリームを受信します。そしてレコードデータが data 引数に返されます。エラーがある場合は error 引数に返されます。

createRecord JavaScript API はレコードを作成します。また、updateRecord や deleteRecord を使用することもできます。私たちは今なお内部で Lightning データサービスを使用しているため、Apex は必要ありません。

重要

レコードの作成、更新、削除に @wire を使用しないでください。ワイヤーサービスはフローの管理を Lightning Web コンポーネントエンジンに委任します。管理の委任は読み取り操作では有益ですが、作成、更新、削除操作ではさほど役に立ちません。開発者であれば、データを変更する操作はすべて自分で管理したいと思うでしょう。作成、更新、削除操作を、ワイヤーサービスではなく、JavaScript API で行うのはこのためです。

以下は、createRecord を使用して取引先を作成する ldsCreateRecord Lightning Web コンポーネントです。

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { createRecord } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
export default class LdsCreateRecord extends LightningElement {
    accountId;
    name;
    onNameChange(event) {
        this.name = event.target.value;
    }
    createAccount() {
        const recordInput = {
            apiName: ACCOUNT_OBJECT.objectApiName,
            fields: { 
                [NAME_FIELD.fieldApiName]: this.name, 
            }
        };
        createRecord(recordInput)
            .then(account => {
                this.accountId = account.id;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Account created',
                        variant: 'success',
                    }),
                );
            })
            .catch(error => {
                // Handle error. Details in error.message.
            });
    }
}

createRecord が、レコードが正常に作成されると解決する Promise オブジェクトを返します。JavaScript API についての詳細は、この単元の末尾の「リソース」を参照してください。

ldsCreateRecord の HTML ファイルに、JavaScript ファイルの createAccount() を呼び出すボタンが含まれます。取引先名が lightning-input コンポーネントに設定されます。

<template>
    <lightning-card title="LdsCreateRecord" icon-name="standard:record">
        <div class="slds-m-around_medium">
            <lightning-input label="Id" disabled value={accountId}></lightning-input>
            <lightning-input label="Name" onchange={onNameChange} class="slds-m-bottom_x-small"></lightning-input>
            <lightning-button label="Create Account" variant="brand" onclick={createAccount}></lightning-button>
        </div>
    </lightning-card>
</template>

({
    loadPictures : function(component) {
        var propertyId = component.get("v.recordId");
        component.set("v.files", []);
        if (!propertyId) {
            return;
        }
        var action = component.get("c.getPictures");
        action.setParams({
            "propertyId": propertyId,
        });
        action.setCallback(this, function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var files = response.getReturnValue();
                component.set("v.files", files);
            }
            else if (state === "INCOMPLETE") {
                // handle incomplete state
            }
            else if (state === "ERROR") {
                // handle error state
            }
        });
        $A.enqueueAction(action);
    }
})

Apex メソッドを Lightning Web コンポーネントに公開するには、メソッドが static で、かつ global または public のいずれかである必要があります。メソッドに @AuraEnabled アノテーションを付加します。こうした要件は、Aura コンポーネントで Apex メソッドを使用する場合と同じです。@AuraEnabled アノテーションは、Aura コンポーネントまたは Lightning Web コンポーネントからメソッドをコールできることを意味します。Lightning Web コンポーネントでの @AuraEnabled の使用は意外なように思えるかもしれませんが、このアノテーションを使用することで、同じ Apex コードを両方のプログラミングモデルで使用できるようになります。

Apex メソッドがキャッシュ可能で (データを変更しない) 場合は、ワイヤーサービスを使用してコンポーネントから呼び出すことができます。このメソッドには @AuraEnabled(cacheable=true) アノテーションを付加する必要があります。

データを作成、更新、削除する Apex メソッドには @wire を使用しないでください。

getAccounts() メソッドを指定した MyAccountController Apex コントローラーを見てみましょう。

// MyAccountController.cls
public with sharing class MyAccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name FROM Account
            WHERE AnnualRevenue > 1000000];
    }
}

この JavaScript コードは、ワイヤーサービスを使用して Apex getAccounts() メソッドをコールします。

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/MyAccountController.getAccounts';
export default class HelloApexAccounts extends LightningElement {
    accounts=[];
    @wire(getAccounts, {})
    wiredAccounts({ error, data }) {
        if (error) {
            this.error = error;
        } else if (data) {
            this.accounts = data;
        }
    }
}

getAccounts をインポートするステートメントの構文に注意します。

import getAccounts from '@salesforce/apex/MyAccountController.getAccounts';

• MyAccountController は Apex クラスの名前です。
• getAccounts はインポートする @AuraEnabled メソッドです。

Apex メソッドがデータを変更 (作成、更新、削除) するため、キャッシュ可能でない場合は、メソッドを直接コードでコールする必要があります。

以下は、Apex getContactList() メソッドをコールする Lightning Web コンポーネントです。

import { LightningElement } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';
export default class ApexContactList extends LightningElement {
    contacts;
    getContacts() {
        getContactList()
            .then(result => {
                this.contacts = result;
            })
            .catch(error => {
                // Handle error. Details in error.message.
            });
    }
}

import ステートメントは、ワイヤーサービスの例と同じように見えます。けれども、メソッドをコールする構文に @wire アノテーションがありません。代わりに getContactList() が、取引先責任者のリストが正常に作成されると解決する Promise オブジェクトを返します。