レコードデータの取得

ワイヤサービスを使用してレコードデータを取得して、一部の項目名を表示しましょう。

次の例では、github.com/trailheadapps/lwc-recipes リポジトリにある wireGetRecordDynamicContact コンポーネントを使用しています。このコンポーネントは動的スキーマを使用します。項目への参照はインポートしません。静的スキーマを使用する例については、lwc-recipes リポジトリの wireGetRecordStaticContact を参照してください。

Tip

このコンポーネントは、取引先責任者用のカスタム UI を表示します。データを取得するためにコンポーネントは getRecord ワイヤアダプタを使用します。

レコード ID とレコード名を表示するコンポーネント UI。

ワイヤサービスでデータをプロビジョニングする場合、テンプレートによって名前、役職、電話番号、メールが表示されます。ワイヤサービスでエラーをプロビジョニングする場合、テンプレートによって c-error-panel コンポーネントが表示されます。

1<!-- wireGetRecordDynamicContact.html -->
2<template>
3  <lightning-card title="My Contact Record" icon-name="standard:contact">
4    <template lwc:if={contact.data}>
5      <div class="slds-m-around_medium">
6        <p>{name}</p>
7        <p>{title}</p>
8        <p><lightning-formatted-phone value={phone}></lightning-formatted-phone></p>
9        <p><lightning-formatted-email value={email}></lightning-formatted-email></p>
10      </div>
11    </template>
12    <template lwc:if={contact.error}>
13      <c-error-panel errors={contact.error}></c-error-panel>
14    </template>
15  </lightning-card>
16</template>

ではコンポーネントの JavaScript を見てみましょう。

コードではまず、Lightning データサービス上に構築されている getRecord ワイヤアダプタを lightning/uiRecordApi モジュールからインポートします。そして、ワイヤアダプタに渡す項目を定義します。

コンポーネントは @api を使用して公開 recordId プロパティを定義します。このコンポーネントのように、Lightning レコードページでコンポーネントがネストされている場合、Lightning ページは recordId の値を設定します。

@wire デコレータは、getRecord に対して、指定された $recordId を持つレコードの指定項目の値を取得するように指示します。$ は、値が動的に渡されることを意味します。値が変化すると、ワイヤサービスはデータをプロビジョニングし、コンポーネントが再表示されます。

データは @wire でデコレートされたプロパティの data および error オブジェクトにプロビジョニングされます。次の例では contact プロパティです。

このプロパティで返される data のデフォルト値は undefined です。したがって、この例では、lwc:if ディレクティブを利用して、contact.data に取引先責任者レコードが入力されたかどうかが確認されます。contact.data に取引先責任者レコードが入力されると、JavaScript コードの getter がコールされます。getFieldValue(record, field) を使用する方法もあります。

Note

1// wireGetRecordDynamicContact.js
2import { LightningElement, api, wire } from "lwc";
3import { getRecord } from "lightning/uiRecordApi";
4
5const FIELDS = ["Contact.Name", "Contact.Title", "Contact.Phone", "Contact.Email"];
6
7export default class WireGetRecordDynamicContact extends LightningElement {
8  @api recordId;
9
10  @wire(getRecord, { recordId: "$recordId", fields: FIELDS })
11  contact;
12
13  get name() {
14    return this.contact.data.fields.Name.value;
15  }
16
17  get title() {
18    return this.contact.data.fields.Title.value;
19  }
20
21  get phone() {
22    return this.contact.data.fields.Phone.value;
23  }
24
25  get email() {
26    return this.contact.data.fields.Email.value;
27  }
28}

もう一度 HTML テンプレートを見てみましょう。name、title、phone、email の各項目は、{} 構文を使用して JavaScript クラスにバインドされます。JavaScript では、各プロパティが contact.data オブジェクトを使用する getter 関数によって、それぞれの名前が示す項目の値にアクセスします。

返されるデータの構造は、getRecord の基礎となるユーザインターフェース API が返す構造と同じです。この場合、応答は Record です。

この例は、返される JSON オブジェクトを介したデータアクセスを示しています。データアクセスを簡単に行うには、getFieldValue(record, field) を使用してください。

Note

関連トピック

lightning/ui*Api ワイヤアダプタと関数

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。