Lightning Web コンポーネントへの Apex メソッドの結び付け

Lightning Web コンポーネントでは、リアクティブなワイヤサービスを使用して Salesforce データを読み取ります。コンポーネントの JavaScript クラスで @wire を使用して、Apex メソッドを指定します。プロパティまたは関数を結び付ける (@wire) ことでデータを受信できます。返されたデータを操作するには、関数を @wire します。

@wire を使用して Apex メソッドをコールするには、Apex メソッドに @AuraEnabled(cacheable=true) アノテーションを付加します。ネットワークコールを発行してサーバの Apex メソッドを呼び出す前にクライアント側の Lightning データサービスキャッシュがチェックされます。Apex によってプロビジョニングされるデータは Lightning データサービスでは管理されないため、古いデータを更新するには refreshApex() をコールします。

Apex メソッドをインポートし、コンポーネントに結び付けるには次の構文を使用します。

  • apexMethodName — Apex メソッドを識別する記号。

  • apexMethodReference — インポートする Apex メソッドの名前。

  • classname — Apex クラスの名前。

  • namespace — Salesforce 組織の名前空間。組織がデフォルトの名前空間 (c) を使用していない場合は名前空間を指定します。使用している場合は名前空間を指定しないでください。

  • apexMethodParams — 必要に応じて apexMethod のパラメータと一致するプロパティを含むオブジェクト。パラメータ値が null の場合、メソッドがコールされます。パラメータ値が undefined の場合、メソッドはコールされません。Apex メソッドをオーバーロードしている場合、コールするメソッドの選択は非決定的 (実質的にランダム) であり、渡されたパラメータにより現在エラーが発生しているか、その後発生する可能性があります。@AuraEnabled Apex メソッドをオーバーロードしないでください。

apexMethodParams はオブジェクトです。Apex メソッドにパラメータ値を渡すには、Apex メソッドのパラメータと一致するプロパティを持つオブジェクトを渡します。たとえば、Apex メソッドが文字列パラメータを取る場合、文字列を直接渡さず、値が文字列であるプロパティを含むオブジェクトを渡します。命令 Apex コールおよび結び付けられた Apex コールでは、対応付けの使用はサポートされていません。「Apex への値の受け渡し」を参照してください。

:::

  • propertyOrFunction — ワイヤサービスからデータのストリームを受信する非公開のプロパティまたは関数。プロパティが @wire でデコレートされている場合、結果はそのプロパティの data プロパティまたは error プロパティに返されます。関数が @wire でデコレートされている場合、結果は data プロパティまたは error プロパティを持つオブジェクトで返されます。

data プロパティと error プロパティは、API のハードコードされた値です。これらの値を使用する必要があります。

:::

lwc-recipes リポジトリの apexWireMethodToProperty コンポーネントを見てみましょう。このコンポーネントは、Apex メソッドから返された取引先責任者のリストを出力します。

LWC レシピアプリケーションでの取引先責任者のリスト。

データを取得するためにコンポーネントは Apex メソッドを結び付けます。Apex メソッドは SOQL クエリを実行し、写真が含まれる取引先責任者のリストを返します。(このコンポーネントでは写真は表示されませんが、他のサンプルコンポーネントでは写真が表示されます)。前述のとおり、取引先責任者の簡単なリストを返すには、getListUi の使用が最適です。ただし、SOQL クエリを使用して特定のレコードを選択するには、Apex メソッドを使用する必要があります。

メソッドは、static で、かつ global または public である必要があります。メソッドは @AuraEnabled(cacheable=true) でデコレートされている必要があります。

コンポーネントの JavaScript コードは、Apex メソッドをインポートし、ワイヤサービスを介してその Apex メソッドを呼び出します。ワイヤサービスは取引先責任者のリストを contacts.data プロパティにプロビジョニングするか、エラーを contacts.error プロパティに返します。

テンプレートは lwc:if ディレクティブを使用して、contacts.data プロパティが truthy であるかどうかを確認します。truthy の場合、そのプロパティを反復処理して各取引先責任者の名前を表示します。contacts.error が truthy の場合、コンポーネントは <c-error-panel> を表示します。

ここでは、パラメータを使用する Apex メソッドを結び付けます。このコンポーネントは、lwc-recipes リポジトリにもあります。

文字「Jo」が含まれる検索項目と、その下に表示された 2 人の取引先責任者 (Michael Jones と Jonathan Bradley)。

Apex メソッドは、searchKey という文字列パラメータを使用して、名前に文字列が含まれる取引先責任者のリストを返します。

コンポーネントの JavaScript は、searchKey パラメータの値の前に $ を付けて、そのパラメータが動的かつリアクティブであることを示します。これはコンポーネントのインスタンスのプロパティを参照します。値が変更されると、テンプレートは再表示されます。

Apex メソッドにコンポーネントを @wire で結び付けるには、最初のパラメータは Apex メソッド名の文字列です。この場合は findContacts です。@wire の 2 つ目のパラメータは Apex メソッドに渡すパラメータを含むオブジェクトです。そのため、たとえば findContacts が文字列を取る場合でも、@wire の 2 つ目のパラメータとしては文字列を渡しません。代わりに、値が文字列 ({ searchKey: '$searchKey' }) であるプロパティを含むオブジェクトを渡します。(Apex メソッドが別のパラメータを取る場合は、オブジェクトにもう 1 つのプロパティを追加します。)

テンプレートは searchKey を <lightning-input> 項目の value として使用します。

このサンプルコードのウォークスルーを視聴するには、Lightning Web コンポーネント動画ギャラリーの**「Wire an Apex Method to a Property (プロパティへの Apex メソッドの結び付け)」**をご覧ください。

次の例は、パラメータとしてオブジェクトを取る Apex メソッドをコールする方法を示しています。@wire 構文はすべての Apex メソッドで同じですが、この例はオブジェクトを構築して渡すパターンを示しています。

このコンポーネントには、リストを生成するために使用する 3 つの入力項目があり、それぞれ文字列、数値、リスト項目数を取ります。Apex メソッドは単純に連結し、値に基づく 1 つの文字列を返します。入力値が変更されると、@wire は Apex メソッドをコールして新しいデータをプロビジョニングします。

Apex に送信する複数のデータ型を収集するフォーム。

Apex メソッドはオブジェクト CustomWrapper を取ります。

コンポーネントから Apex メソッドにパラメータ値を渡すにはオブジェクトを使用します。この例では、Apex メソッドはオブジェクト CustomWrapper を取るため、コンポーネントはそれに一致するオブジェクトを構築し、@wire 内で渡します。

lwc-recipes リポジトリの apexWireMethodToFunction コンポーネントを見てみましょう。このコンポーネントは Apex メソッドコールを関数に結び付けます。結果が関数にプロビジョニングされるため、JavaScript は結果に対して操作を実行できます。また、テンプレートは、結果をプロパティにプロビジョニングする場合とは少し異なる方法でデータにアクセスします。

表示されるコンポーネントは apexWireMethodToProperty と同じです (ただし、ヘッダーを除く)。

LWC レシピアプリケーションでの取引先責任者のリスト。

このコンポーネントは、apexWireMethodToProperty と同じ Apex メソッドをコールします。メソッドは、static で、かつ global または public である必要があります。メソッドは @AuraEnabled(cacheable=true) でデコレートされている必要があります。

コンポーネントの JavaScript コードは、Apex メソッドをインポートし、ワイヤサービスを介してその Apex メソッドを呼び出します。ワイヤサービスは、error または data のいずれかのプロパティを含むオブジェクトを介して結果を wiredContacts() 関数にプロビジョニングします。ワイヤサービスでプロビジョニングされた data は this.contacts に割り当てられます。これはテンプレートで使用されます。プロビジョニングされた error は this.error に割り当てられます。これもテンプレートで使用されます。これらのプロパティの値が変更されると、テンプレートは再表示されます。

テンプレートは lwc:if ディレクティブを使用して、JavaScript contacts プロパティがあるかどうかを確認します。存在する場合、そのプロパティを反復処理して各取引先責任者の名前を表示します。error プロパティが存在する場合、コンポーネントは <c-error-panel> を表示します。

関連トピック