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

学習の目的

この単元を完了すると、次のことができるようになります。

• lightning-record-*-form 基本コンポーネントを含むソリューションを作成する。
  
• Lightning データサービス (LDS) ワイヤーアダプターを使用してデータを参照する。
  
• LDS 関数を使用してデータを変更する。
  

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

Lightning Web コンポーネントを初めて使用する場合、前提条件を満たしているか確認してください。このモジュールを始める前に、Trailhead で「Lightning Web コンポーネントの基本」モジュールと「JavaScript の操作方法」トレイルを修了しておく必要があります。これからの作業は、これらで学ぶ概念や作業に基づいています。

Lightning Web コンポーネントでデータを操作する

Lightning Web コンポーネントには、Salesforce データを操作する方法が複数あります。特定の使用事例にどのソリューションを使用するかを理解しておくと、より少なくシンプルでメンテナンスしやすいコードを書くことができます。状況ごとに最適なソリューションを使用することで、コンポーネントやアプリケーションのパフォーマンスも向上します。

このモジュールでは、さまざまなソリューションをいつどのように使用するかを学習します。最初は最も簡単でカスタマイズ性が最も低いオプションを確認します。先に進むと、より複雑でカスタマイズ性の高いオプションを検討します。

Lightning データサービスを使用してデータを操作する

Lightning データサービスは Salesforce データの操作に適した (かつ最も簡単な) 方法です。Lightning データサービスでは、開発者は JavaScript を使用してコンポーネントを Salesforce データに接続します。

Lightning データサービスはまた、セキュアなユーザーインターフェース API エンドポイントに対してサーバーコールを実行することでセキュリティも提供します。すべてのコンポーネントでクライアント側共有キャッシュを使用し、パフォーマンスを最大限に高めます。キャッシュされたレコードはそのキャッシュから取得されるため、サーバーへの不要なコールがなくなります。

コンポーネントのライフサイクルの特定の時点において、ワイヤーアダプターからデータを受信することには頼らないでください。ワイヤーアダプターからのデータは、connectedCallback() や renderedCallback() などのライフサイクルフックでは常にアクセスできるとは限りません。ワイヤーサービスデータのライフサイクルの詳細は、「Understand the Wire Service (ワイヤーサービスを理解する)」を参照してください。

Lightning データサービスは、アプリケーションライフサイクル全体を通して複数のコンポーネントとクライアント間で一貫した最新のデータを維持します。複数のコンポーネントが Lightning データサービスを使用してレコードを操作している場合、いずれかのコンポーネントがレコードを更新すると、他のコンポーネントにはその更新が自動的に反映されます。

以降のセクションでは、Lightning データサービスを使用して Salesforce データを操作するさまざまな方法を取り上げます。

レコードフォーム基本コンポーネントを使用してデータを参照または変更する

Lightning Web サービスで 1 件のレコードを操作する場合、lightning-record-*-form コンポーネントを使用するのが最も簡単な方法です。これらの基本コンポーネントは Lightning データサービスをバックグラウンドで使用し、そのキャッシュおよび同期機能を継承します。基本コンポーネントによって機能とカスタマイズレベルが異なります。

• lightning-record-form 基本コンポーネントは最もシンプルです。lightning-record-form ではレイアウトを指定でき、システム管理者は宣言的にフォーム項目を設定できます。順序付けした項目のリストを指定してプログラムで表示する内容を定義することもできます。lightning-record-form ではレコードの表示と編集ができます。
  
• lightning-record-view-form 基本コンポーネントではレコードを表示できます。
  
• lightning-record-edit-form 基本コンポーネントではレコードを編集できます。
  

フォームレイアウトのカスタマイズ、項目値の事前入力、レコードデータの表示方法の変更が必要な場合は、lightning-record-view-form または lightning-record-edit-form を選択します。

次の例では lightning-record-form を使用して取引先を作成します。

accountCreator.html

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

accountCreator.js

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);
    }
}

コードのポイント:

accountCreator.html 

• 行 3: マークアップで lightning-record-form を使用することで、Lightning データサービスが提供するセキュリティとパフォーマンスのメリットをすべて得ることができます。lightning-record-form は recordId が指定されていないと edit モードで動作し、送信時にレコードを作成します。
  
• 行 4: object-api-name プロパティをバインドして読み込むオブジェクトの種類を指定します。
  
• 行 5: fields プロパティをバインドしてフォームに表示する項目を指定します。
  
• 行 6: handleSuccess を success イベントのハンドラーとして設定します。
  

accountCreator.js 

• 行 3 ～6: ファイルの冒頭で取引先オブジェクトとその項目への参照をインポートします。この方法でオブジェクトと項目を参照すると参照整合性が確保されます。Salesforce がオブジェクトと項目の存在を確認し、それらが削除されるのを防止し、コンポーネントを参照する変更セットとパッケージに必ず含まれるようにします。オブジェクトと項目の参照をインポートすると、オブジェクトや項目の名前が変更されてもコンポーネントコードは引き続き動作します。
  
• 行 10: success イベントの handleSuccess イベントハンドラーを定義します。handleSuccess は、保存操作が成功すると実行されます。
  
• 行 11 ～ 17: ShowToastEvent を起動してトーストメッセージを表示します。ここで event.detail.id は新しく作成されたレコードの id への参照です。
  

lightning-record-*-form コンポーネント以上のカスタマイズが必要な場合は、ワイヤーアダプターまたは JavaScript 関数を使用して Lightning データサービスを直接呼び出すことができます。 

LDS ワイヤーアダプターを使用してデータを参照する

LDS ワイヤーアダプターも Salesforce データを操作する方法です。ワイヤーアダプターを使用して Salesforce データ (レコード) とメタデータ (レイアウトの詳細、オブジェクトの項目など) を参照します。ワイヤーアダプターを使用するには、プロパティまたは関数を @wire でデコレートし、ワイヤーアダプターを指定します。

LDS ワイヤーアダプターはまず LDS キャッシュをチェックし、必要な場合にのみサーバーからのデータを要求します。アダプターは変更に反応し、適宜データを更新します。たとえば、パラメーター値が変更された場合や他のコンポーネントが Lightning データサービスキャッシュのデータを変更した場合、アダプターは結び付けられたプロパティまたは関数に新しいデータをプロビジョニングします。

次は getRecord ワイヤーアダプターを使用する例を確認しましょう。

wireGetRecordProperty.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 WireGetRecordProperty extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    account;
    get name() {
        return getFieldValue(this.account.data, ACCOUNT_NAME_FIELD);
    }
}

コードのポイント:

• 行 2: getRecord ワイヤーアダプターと getFieldValue 関数をインポートします。
  
• 行 3: accountCreator の例と同様に、Account.Name 項目への参照をインポートします。(行 6 では、これを使用して getRecord ワイヤーアダプターに取得する項目を指示します)。
  
• 行 5: wireGetRecordProperty コンポーネントがレコードページに配置されると、@api recordId によって親コンポーネント (FlexiPage) は現在のレコードの ID をコンポーネントに渡せるようになります。
  
• 行 6: account プロパティを結び付けるために、@wire デコレーターを適用し、コールするワイヤーアダプター (getRecord) とアダプターに必要なパラメーター (recordId とfields) を指定します。
  
• 行 7: ワイヤーアダプターは値のストリームを account プロパティにプロビジョニングします。このプロパティは複数回設定されます。レコードは、取得されると account.data に保存されます。レコードの取得が失敗するとエラーが account.error に保存されます。
  
• 行 6 ～ 7: 初めて値が recordId プロパティに割り当てられたとき、ワイヤーアダプターはそのデータをサーバーから取得し、LDS キャッシュに保存してそれ以降アクセスできるようにします。recordId パラメーターを $ プレフィックスのある文字列として渡すことで、recordId をリアクティブにします。recordId の値が変更されるたびに、ワイヤーアダプターはキャッシュまたはサーバーから新しいデータを取得します。別のコンポーネントがキャッシュされたレコードを変更すると、ワイヤーアダプターはレコードの新しい値を account プロパティにプロビジョニングします。
  
• 行 8 ～ 10: name プロパティの getter を定義します。getFieldValue 関数で、返されたデータの項目値にアクセスできます。
  

この例では、次のような方法で HTML ファイルの name プロパティを取得できます。

wireGetRecordProperty.html

<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 アプリケーションが表示されない場合は、Salesforce ヘルプの「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 (SFDX: プロジェクトを作成) と入力し、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 で をクリックして [Setup (設定)] を選択します。
   
10. [Quick Find (クイック検索)] ボックスにLightning App Builder (Lightning アプリケーションビルダー) と入力し、[Lightning App Builder (Lightning アプリケーションビルダー)] を選択します。
    
11. Lightning ページを作成します。
    

1. [New (新規)] をクリックします。
   
2. [App Page (アプリケーションページ)] を選択し、[Next (次へ)] をクリックします。
   
3. [Label (表示ラベル)] に Working with Data (データの操作) と入力し、[Next (次へ)] をクリックします。
   
4. レイアウトで [ヘッダーと左サイドバー] を選択します。
   
5. [Done (完了)] をクリックします。
   

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 データサービスを使用したコンポーネントデータのキャッシュと同期)