Aura コンポーネントのための Lightning データサービスの使用開始

学習の目的

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

  • Aura コンポーネントのための Lightning データサービスとは何かを説明する。
  • コンポーネントのパフォーマンスを Lightning データサービスでどのように向上できるかを説明する。
  • Lightning データサービスを使用してレコードを UI に読み込む。

Lightning データサービスとは?

メモ

メモ

Spring '19 リリース (API バージョン 45.0) では、Lightning Web コンポーネントモデルと従来の Aura コンポーネントモデルの 2 つのプログラミングモデルを使用して Lightning コンポーネントを作成できます。Lightning Web コンポーネントは、HTML と最新の JavaScript を使用して作成されるカスタム HTML 要素です。Lightning Web コンポーネントと Aura コンポーネントは、ページ上に共存可能で、同時に使用できます。Lightning データサービスは両方をサポートしていますが、このモジュールでは Aura コンポーネントについてのみ説明します。

Lightning データサービス (LDS) は Lightning のデータレイヤとして機能するように構築されました。LDS は、Visualforce の標準コントローラに対応する Lightning コンポーネントであり、ページに表示されたデータへのアクセスを提供します。LDS がない場合、アプリケーションのすべてのコンポーネントが同じレコードデータからデータを取得していても、アプリケーションの各コンポーネントがサーバを個々にコールしてレコードの CRUD 操作を実行します。サーバがコールされるたびにパフォーマンスが低下するため、ユーザはデータを操作する代わりに親指をくるくる回しながら時間をつぶすことになります。また、サーバが個々にコールされると、矛盾が生じ、あるサーバコールで 1 つのコンポーネントが更新され、他のコンポーネントが古いまま残っているといった状況が発生する可能性があります。

Lightning データサービスは、同じレコードデータを含む要求を特定および除外して、関連するすべてのコンポーネントを更新する 1 つの共有されたデータ要求を送信します。これは、コンポーネント間のデータの矛盾をなくすだけではありません。ユーザが接続から切り離された場合にオフラインで作業できるようデータをキャッシュし、接続が回復するとデータをインテリジェントに同期することもできます。

Lightning データサービスを使用してコンポーネントに入力しているアプリケーションを示しているアニメーション

この gif は、Lightning データサービスを使用してコンポーネントの編集と更新を行っている物件管理アプリケーションを示しています。営業状況進捗バーは、状況が更新されると物件の詳細を自動的に更新します。

Lightning データサービスを使用してコンポーネントに入力しているアプリケーションを示しているアニメーション

この gif は、親レコードの予約の作成と表示を行う、同じページ内の 2 番目のコンポーネントを示しています。

簡単に言うと、Lightning データサービスは以下の機能を実現する再利用可能な Aura コンポーネントを提供します。

  • XMLHttpRequests (XHR) を最小限に抑える
  • レコードを 1 回だけ取得し、ネットワーク転送を減らし、アプリケーションサーバとデータベースサーバの負荷を軽減する
  • コンポーネントのメタデータとは別にレコードデータをクライアントでキャッシュする
  • コンポーネント間でレコードデータを共有する
  • レコードの段階的な読み取り、キャッシュ、およびキャッシュへのより多くの項目とレイアウトのマージを可能にする
  • プロアクティブなキャッシュ入力を可能にする
  • 複数のコンポーネント間で 1 つのレコードデータインスタンスのみを使用することで、一貫性を促進する
  • レコードデータの変更時に通知を作成する

レコードの作成、読み取り、更新、または削除を行う Lightning アプリケーションがある場合、LDS が CRUD 操作を実行するための最も効率的な最良の方法になります。

LDS は日々の活動をシンプルにします。LDS を採用すると、独自のコントローラコードを記述する必要がなくなります。すべてのデータアクセスコードが LDS コンポーネントに含まれるため、アプリケーションとページの複雑さが大幅に緩和されます。この複雑さが緩和されることで、パフォーマンスと品質のテストに多くの時間をかける必要がなくなります。どれだけの時間を節約できるかを考えてみてください。

Form ベースのコンポーネントと force:recordData の概要

Lightning データサービスの利点をどのように評価しますか? 簡単です。必要なのは、次のいずれかの Form ベースのコンポーネントを使用するか、非常に多用途の force:recordData コンポーネントを使用することだけです。

Form 関数
レコードの表示、作成、または編集 lightning:recordForm
レコードの表示のみ lightning:recordViewForm (lightning:outputField を指定)
レコードの作成または編集のみ lightning:recordEditForm (lightning:inputField を指定)
詳細にカスタマイズされたレコードの表示、作成、編集、または削除 force:recordData

ほとんどのユースケースで、lightning:recordForm は優れた出発点になります。このコンポーネントでは、lightning:recordViewForm と lightning:recordEditForm の機能が結合され簡素化されています。また、lightning:recordForm コンポーネントでは、変更のサブミットが成功した後に、編集モードから表示モードに切り替えることもできます。Form ベースのコンポーネントでは、項目レベルの入力規則を使用して自動的に項目の対応付けが行われます。

この例では、lightning:recordForm は、レコード詳細ページの表示と同様に、取引先名前項目と表示ラベルを鉛筆アイコンと一緒に表示します。鉛筆アイコンがクリックされると、項目は編集可能になり、その下に [キャンセル] および [保存] ボタンが表示されます。レコード ID は force:hasRecordId インターフェースによってレコードページから継承されます。recordId 属性を省くと、新しいレコードを作成するフォームが表示されます。

<!-- Add this component to an account record Lightning page -->
<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
    <aura:attribute name="recordId" type="String" />
    <lightning:card title="Display, Create, or Edit Records">
        <lightning:recordForm recordId="{!v.recordId}"
                              objectApiName="Account"
                              fields="Name" />
    </lightning:card>
</aura:component>

CSS とレコードデータのカスタム表示が必要な、より高度なユースケースには、lightning:recordViewForm と lightning:recordEditForm を使用します。

この例では、lightning:recordEditForm は、入力項目と一緒に、表示中のレコードの取引先名を表示します。[新規作成] カスタムボタンは、クリックされるとレコードの更新を処理します。lightning:recordViewForm は、参照のみの取引先名項目と表示ラベルを表示します。lightning:messages は、レコード更新時のエラーを表示します。

<!-- Add this component to an account record Lightning page -->
<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
    <lightning:card title="Display, Create, or Edit Records">
        <lightning:recordEditForm recordId="{!v.recordId}"
                                  objectApiName="Account">
            <lightning:messages />
            <lightning:inputField fieldName="Name" />
            <lightning:button class="slds-m-top_small" type="submit" label="Create new" />
        </lightning:recordEditForm>
        <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Account">
            <lightning:messages />
            <lightning:outputField fieldName="Name" />
        </lightning:recordViewForm>
    </lightning:card>
</aura:component>
メモ

メモ

Form ベースのコンポーネントは、「Lightning コンポーネントを使用した柔軟なアプリケーションの構築」プロジェクトで探索できます。このモジュールの残りの部分では、force:recordData コンポーネントについて詳細に説明します。

Form ベースのコンポーネントでは、レイアウト、入力規則、CRUD 変更、エラー処理を扱います。こうした強力な Form ベースのコンポーネントがあるのに、なぜ force:recordData が必要なのでしょうか? force:recordData 自体に UI 要素は含まれません。これは、単にロジックであり、サーバと通信するための方法です。UI 要素がないことが、force:recordData が強力な追加である理由です。このコンポーネントを使用して、Form ベースのコンポーネントでは提供されない、高度なカスタマイズが可能なユーザインターフェースを作成できます。カスタムコンポーネントを使用して、force:recordData で取得したデータを表示できます。

LDS の最も簡単な使用方法の 1 つとして、レコードの読み込みがあります。クライアント側でレコードを読み込むには、force:recordData タグをコンポーネントに追加して、recordId、mode、および layoutType または fields 属性を設定する必要があります。

  • recordId には、読み込むレコードを指定します。recordId を指定せずにレコードを読み込むことはできません。
  • mode は EDIT または VIEW に設定できます。これは、通知の動作と、レコードで実行できる操作を決定します。force:recordData を使用してレコードを変更している場合、モードを EDIT に設定します。
  • layoutType は、レコードを表示するために使用されるレイアウト (FULL または COMPACT) を指定します。それによってどの項目が含まれるのかが決定されます。layoutType を使用すると、コンポーネントをレイアウト定義に適応させることができます。
  • fields には、レコードのどの項目を照会するかを指定します。

レコードの項目データを読み込むには、fields または layoutType 属性を指定する必要があります。通常はシステム管理者がレイアウトを変更するので、fields の使用は必要な項目を取得する、より柔軟な方法です。

force:recordData タグは、一連の target* 属性もサポートします。これらは、force:recordData 自身がデータを入力する属性です。target* 属性は、UI からのアクセスを許可するのに使用できます。

  • targetRecord には、読み込まれたレコードが入力されます。
  • targetFields には、読み込まれたレコードの簡易ビューが入力されます。
  • targetError には、エラーが入力されます。
<force:recordData aura:id="forceRecordCmp"
  <!-- aura:id is required to reference the component in your Javascript controller -->
    recordId="{!v.recordId}"
    layoutType="{!v.layout}"
    fields="{!v.fieldsToQuery}"
    mode="VIEW"
    targetRecord="{!v.record}"
    targetFields="{!v.simpleRecord}"
    targetError="{!v.error}"
/>

この例では、force:recordData で読み込んだレコードの [名前] 項目が lightning:formattedtext に表示されます。

<aura:component>
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="record" type="Object" />
    <aura:attribute name="simpleRecord" type="Object" />
     <force:recordData recordId="{!v.recordId}"
          targetRecord ="{!v.record}"
          targetFields ="{!v.simpleRecord}"
          fields="Id, Name" />
    <div class="recordName">
        <p class="slds-text-heading--medium">
            <lightning:formattedtext title="Record Name" value="{!v.simpleRecord.Name}" /></p>
    </div>
</aura:component>

レコードを変更するためのいくつかの Aura メソッドを使用できます。JavaScript コンポーネントコントローラで使用できるメソッドの概要を以下に示します。

  • saveRecord() は、force:recordData コンポーネントに読み込まれたレコードを挿入または更新します。
  • deleteRecord() は、読み込まれたレコードを削除します。
  • getNewRecord() は、保存時に挿入操作を実行する新しいレコードテンプレートを読み込みます。
  • reloadRecord() は、読み込みコードを返し、現在の targetRecord を現在の属性値で上書きします。

force:recordData の使用方法については、次の単元で詳しく説明します。

考慮事項

現在、Lightning データサービスは、一部のエンティティ種別をサポートしていません。サポートされるエンティティのリストについては、「Lightning データサービス: 考慮事項」を参照してください。

Summer '17 より前のリリースの Lightning データサービスでは force:recordPreview コンポーネントが使用されていました。この force:recordPreview コンポーネントが廃止され、force:recordData で完全に置き換えられました。force:recordPreview を使用する場合は、代わりに force:recordData を使用するようにコンポーネントをリファクタリングしてください。これらのコンポーネントの主な違いは、force:recordData が UI API を使用して新しい形状のレポートを返すことと、新しい属性 targetFields を含むことです。force:recordPreview から force:recordData に更新するための簡単な方法は、参照を targetRecords から targetFields に変更することです。これは、v.targetFields.Name が v.targetRecord.fields.Name.value に相当することを意味します。簡単です。

リソース