レコードデータの取得
ワイヤサービスを使用してレコードデータを取得して、一部の項目名を表示しましょう。
次の例では、github.com/trailheadapps/lwc-recipes リポジトリにある wireGetRecordDynamicContact コンポーネントを使用しています。このコンポーネントは動的スキーマを使用します。項目への参照はインポートしません。静的スキーマを使用する例については、lwc-recipes リポジトリの wireGetRecordStaticContact を参照してください。
このコンポーネントは、取引先責任者用のカスタム UI を表示します。データを取得するためにコンポーネントは getRecord ワイヤアダプタを使用します。
ワイヤサービスでデータをプロビジョニングする場合、テンプレートによって名前、役職、電話番号、メールが表示されます。ワイヤサービスでエラーをプロビジョニングする場合、テンプレートによって c-error-panel コンポーネントが表示されます。
ではコンポーネントの 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) を使用する方法もあります。
もう一度 HTML テンプレートを見てみましょう。name、title、phone、email の各項目は、{} 構文を使用して JavaScript クラスにバインドされます。JavaScript では、各プロパティが contact.data オブジェクトを使用する getter 関数によって、それぞれの名前が示す項目の値にアクセスします。
返されるデータの構造は、getRecord の基礎となるユーザインターフェース API が返す構造と同じです。この場合、応答は Record です。
この例は、返される JSON オブジェクトを介したデータアクセスを示しています。データアクセスを簡単に行うには、getFieldValue(record, field) を使用してください。
関連トピック