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

Developer

2020.07.05 2020.05.09

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

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

Contents

1 Apexを作成
2 呼び出すJavaScriptを作成
3 まとめ
4 おまけ

Contents

Apexを作成
呼び出すJavaScriptを作成
まとめ
おまけ

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の関係です。
これで実行してみると下記のようになります。