Developer

【Lightning Web Component】Apexを呼び出してみよう【Salesforce】

Developer
この記事は約6分で読めます。

こんにちは、アンダーソンです。
今回はLWCからApexを呼び出して、組織のデータを取得する方法についてみていきます。

スポンサーリンク

Apexを作成

まずLWCから呼び出せるApexを作成していきます。
今回はmyComponentControllerという名前のApexを作成し、簡単な検索ワードを受けて
SOQLで検索しそのリストを返すという内容にしていきます。

まずLWCから呼び出せるApexメソッドは

  • @AuraEnabledがついていること
  • staticであること
  • publicもしくはglobalであること

が条件ですので、ここは抑えておきましょう。

public with sharing class myComponentController {
    @AuraEnabled
    public static List<Test1__c> serachTestRecord( String serachWord ){
        serachWord = serachWord.trim();
        if ( serachWord == null ) {
            return [
                SELECT
                 Id,
                 Name,
                 Text__c,
                 CheckBox__c,
                 Datetime__c,
                 PickList__c
                FROM Test1__c
            ];
        }
        serachWord = '%' + serachWord + '%';
        return [
                SELECT
                 Id,
                 Name,
                 Text__c,
                 CheckBox__c,
                 Datetime__c,
                 PickList__c
                FROM Test1__c
                Where Name Text__c :serachWord
            ];
    }
}

めちゃくちゃ簡単ですがテキストの検索をするようにしてみました。
入力が何もない場合は全て返すようにしています。

呼び出すJavaScriptを作成

次は作成したApexを呼び出すJavaScriptを書いていきます。
LWCではあらかじめApexのコントローラとメソッドをインポートしておいて、
それをコード内で使用するという流れになります。

import serachRecord from '@salesforce/apex/myComponentController.serachTestRecord';

さきほど作成したコントローラとメソッドをインポートしてJavaScript内で使用する変数に置き換えました。
ではこれを呼び出す関数を作成していきます。

changeWord(event){
        this.searchWord = event.target.value;
    }

    search(){
        this.searchWord = this.searchWord;
        serachRecord({serachWord: this.searchWord})
        .then (result => {     
            this.tests = result;
        })        
    }

これでOKです。
changeWordは文字が入力されるたびに検索文字を変更します。
search関数は呼ばれるとApexの先ほどインポートして用意しておいたメソッドを
呼び出して検索文字を投げてくれます。
返却に問題がなければtestsの中に返却値を入れるという流れです。

さらにこれに応じたhtmlも編集していきます。
ちょっとコンポーネント系のデザインがまだ掴めていなかったので
熊追跡のTrailheadを参考にしています。

            <template for:each={tests} for:item="test">
                <lightning-layout key={test.Id} size="3" class="slds-p-around_x-small">
                    <lightning-card title={test.Name}>
                        <div class="slds-p-horizontal_small">
                            <div class="slds-media">
                                <div class="slds-media__body">
                                    <p class="slds-m-bottom_xx-small">{test.Text__c}</p>
                                    <p class="slds-m-bottom_xx-small">{test.CheckBox__c}</p>
                                    <p class="slds-m-bottom_xx-small">{test.Datetime__c}</p>
                                    <p class="slds-m-bottom_xx-small">{test.PickList__c}</p>
                                </div>
                            </div>
                        </div>
                    </lightning-card>
                </lightning-layout>
            </template>

templateの中でfor:eachとfor:itemで宣言することで繰り返し処理を意味します。
VFで言うところのvalueとvarの関係です。
これで実行してみると下記のようになります。

ちゃんと検索文字に引っかかって出てきてますね。

まとめ

今回はLightningWebComponentからApexの呼び出し方についてまとめてみました。
簡単な検索画面ですが、応用してレコードの編集とかにも使えそうです。
その辺もまた勉強してお伝えしていきたいと思います。

今回のコードもGitHubに載せていますのでぜひ参考にしてみてください。

おまけ

今回Apexの呼び出しが一回なので簡単に実装できていますが、
これがいくつも呼び出しとなるとかなりめんどくさいコーディングになってきます。
そこで調べているとこのブログでものすごく楽な方法があったのでご紹介させていただきます。

Lightning Web ComponentsのApexクラス呼び出し方法|またえこうじ@ぴたデジの人|note
Lightining Web Componentsで、Apexクラスを呼び出すときに、気を付けることがあります。 Apexクラスは非同期だと言うこと、Promiseで結果が返ってくると言うことです。 これを、ソースコードで説明すると以下のようになります。 import ApexMethod from '@...

ポイントはasync関数の中でawaitさせて非同期で取得しているのでコードがスッキリしています。
こんなやり方もあるのか。。。さすがです。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。

コメント