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

学習の目的

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

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

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

Lightning Web コンポーネントでのデータの操作

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

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

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

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

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

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

コードのポイント:

  • 行 2: getRecord ワイヤアダプタをインポートします。
  • 行 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 プロパティにプロビジョニングします。

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

wireGetRecordFunction.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord } 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;
        }
    }
}

コードのポイント:

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

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 ヘルプの「Find the username and password for your Trailhead Playground (Trailhead Playground のユーザ名とパスワードの調べ方)」を参照してください。

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

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

この演習では、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. [新規] をクリックします。
    2. [アプリケーションページ] を選択し、[次へ] をクリックします。
    3. [表示ラベル] に「Working with Data」(データの操作) と入力し、[次へ] をクリックします。
    4. レイアウトで [ヘッダーと左サイドバー] を選択します。
    5. [完了] をクリックします。
  12. accountCreator コンポーネントをページサイドバーにドラッグします。
  13. ページを保存します。
  14. ページを有効化します。デフォルトのアプリケーション名 (Working with Data) のままで [保存] をクリックします。
  15. ページをナビゲーションメニューに追加するように要求されたら、[完了] をクリックします。
  16. 新しいページを開きます。アプリケーションランチャーの検索で「work」と入力し、[Working with Data (データの操作)] を選択します。

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

リソース

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップ ログイン
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる
今はしない