Salesforce LWCの3つ デコレータの②

引用：https://hub.appirio.jp/tech-blog/lightningwebcomponents3
Salesforceサーバーへのアクセス
LWCではJSコンポーネントからSalesforceサーバーへのアクセス方法として下記の3つの方法が提供されています。実装するコード量は1 < 2 < 3 の順で増えますが、その分処理の自由度も上がります。単純にオブジェクトのデータを参照・更新するだけであれば、1. Lightning Data Service または 2. Wire Service を使うのが良いと思います。複雑なデータの更新処理や、任意のタイミングでサーバーアクセスを行いたい場合のみ、3のコード内から呼び出す実装方法を取ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398746/2e284e1a-4ed5-ec0a-a437-de6f8ea63ded.png)


Lightning Data Service(LDS)

LDSはAuraコンポーネントで提供されていた機能と同じで、サーバー側にコードを記述することなく、クライアントサイドのJavaScriptコードのみでSalesforceオブジェクトを取得可能です。提供されるAPIは随時更新されていますので、最新の状況については公式リファレンスを参照してください。

下記は同じlwc_userInfoコンポーネントをLDSを使って書き直したコードになります。lightning/uiRecordApi を使ってUserオブジェクトのレコードを参照しています。

  1| /*  Lightning Data Serviceを使ったWiringによるUserレコードの取得（プロパティ方式）*/
  2|
  3| //必ずインポートする
  4| import { LightningElement, wire } from 'lwc';
  5| //LDSサービス
  6| import { getRecord } from 'lightning/uiRecordApi';
  7|
  8| //ログインユーザーIDの取得
  9| import userid from '@salesforce/user/Id';
 10|
 11| //取得対象のUserオブジェクトの項目
 12| const FIELDS = [
 13|     'User.Name',
 14|     //    'User.UserRole.Name', //クロスオブジェクト参照はサポートされない
 15|     //    'User.Profile.Name',
 16|     'User.Username',
 17|     'User.UserType'
 18| ];
 19|
 20| export default class lwc_userInfo1 extends LightningElement {
 21|
 22|     //WiringによるUserレコードの取得（プロパティ、Lightning Data Service利用）
 23|     @wire(getRecord, { 'recordId': userid, fields: FIELDS })
 24|     record;
 25|
 26|     /*
 27|      * 初期化処理
 28|      */
 29|     connectedCallback() {
 30|     }
 31|
 32| }
[lwc_userInfo: LDSを利用]

取得したデータは Wire Serviceによりrecordプロパティにセットされ、HTMLからは {record.data.fields.XXX.value}  （XXXは項目API名）形式で参照することができます。

Wire Service

Wire Serviceはデータ取得のコードを記述せずに、@Wireアノテーションを使った設定のみでサーバーからデータを取得できるLWCで導入された新しいデータ取得方式です。取得したデータを直接プロパティにセットするプロパティ方式とメソッドを呼び出すメソッド方式の2つが準備されています。

プロパティ方式のコード例はさきほど紹介したので、ここではメソッド方式のコードを紹介します。サーバー呼出の結果を引数として16行目のwiredUserInfo()関数が呼び出されます。下記の例では正常に値が取得できた場合はdataプロパティに値をセットし、失敗した場合はエラーメッセージをtoast形式で画面に表示するように実装しています。

  1| //必ずインポートする
  2| import { LightningElement, wire, track } from 'lwc';
  3| //toastメッセージ表示用の標準コンポーネント
  4| import { ShowToastEvent } from 'lightning/platformShowToastEvent'
  5|
  6| //Apex メソッド
  7| import retrieveUserInfo from '@salesforce/apex/lwc_UserInfoController.retrieveUserInfo';
  8| //ログインユーザーIDの取得
  9| import userid from '@salesforce/user/Id';
 10|
 11| export default class lwc_userInfo2 extends LightningElement {
 12|     @track data;
 13|
 14|     //WiringによるUserレコードの取得（メソッド方式）
 15|     @wire(retrieveUserInfo, { 'userId': userid })
 16|     wiredUserInfo({ error, data }) {
 17|         if (data) {
 18|             this.data = data;
 19|         } else if (error) {
 20|             console.log('error:' + error.details.body.message);
 21|             this.showToast(error.details.body.message);
 22|         }
 23|     }
 24|
 25|     /*
 26|      *toastによるメッセージ表示
 27|      */
 28|     showToast(message) {
 29|         const event = new ShowToastEvent({
 30|             title: 'エラーが発生しました',
 31|             message: message,
 32|             variant: 'error',
 33|             mode: 'pester'
 34|         });
 35|         this.dispatchEvent(event);
 36|     }
 37| }
[lwc_userInfo：Wire Service メソッド方式]

コード内からの直接呼び出し

最後にJavaScriptコードで直接サーバー呼出を行う方法を紹介します。Auraコンポーネントでも同様なコードは記述していましたが、LWCではPromiseの仕組みを使うことでよりスマートに記述できるようになりました。

  1| //Apex メソッド
  2| import retrieveUserInfo from '@salesforce/apex/lwc_UserInfoController.retrieveUserInfo';
  3|
  4| ・・・
  5|
  6|     @track data;
  7|
  8|     /*
  9|      * 初期化処理
 10|      */
 11|     connectedCallback() {
 12|         //メソッド直接呼び出しによるUserレコードの取得
 13|         retrieveUserInfo({ 'userId': userid })
 14|             .then(result => {
 15|                 this.data = result;
 16|             })
 17|             .catch(error => {
 18|                 this.showToast(error.body.message);
 19|             });
 20|     }
 21|
 22|
[lwc_userInfo：メソッド呼出しでデータを取得する]