🙌

LWCとApexを連携させてREST コールアウトを実行する

2023/09/25に公開

Salesforce

はじめに

LWCでRESTコールアウト処理を実装をする中、
参考にした記事たちが、私みたいな初学者にとっては複雑に感じたので
簡単な処理だけに絞って記事を書きたいなと思いました。
ベースは
Trailheadのものを利用しています。

この記事でわかること

LWCとApexを繋げてRESTコールアウトを実行する。

完成イメージ

Get Animalsを押下すると

ボタン下に、取得した値を表示する。

ファイル関係イメージ

ApexとLWC(HTML/JavaScript)

・HTML：画面表示
・JavaScript：HTMLとApexの橋渡し
　　　　　　　ボタンをクリックした時に、Apexのメソッドを実行する。
　　　　　　　Apexメソッドの結果を取得して、HTMLで表示する。
・Apex：RESTコールアウトによって値を取得する。

手順

①ApexClassを作成

HttpAnimals.cls

public with sharing class HttpAnimals {
    @AuraEnabled(cacheable=true) //LWCでメソッドを使うための呪文
    public static List<Object> getAnimals() {
        Http http = new Http(); //Http要求と応答を開始する準備
        HttpRequest request = new HttpRequest(); //Http要求を作成する準備
        request.setEndpoint('https://th-apex-http-callout.herokuapp.com/animals'); 
        request.setMethod('GET');
        HttpResponse response = http.send(request);
        if (response.getStatusCode()==200) {
            Map<String, Object> results = (Map<String, Object>) JSON.deserializeUntyped(response.getBody());
            list<Object> animals = (list<Object>)results.get('animals');
            return animals;
        } else {
            return new List<Object>();
        }
    }
}

参考コードはTrailhead。下記イメージはTrailheadのコードですが、コード解釈の補助として使ってください。

②LWC(HTML・JavaScript)を作成

getAnimals.html

<template>
  <button onclick={handleButtonClick}>Get Animals</button>
  <ul>
    <template for:each={animals} for:item="animal">
      <li key={animal}>{animal}</li>
    </template>
  </ul>
</template>

getAnimals.js

import { LightningElement, track } from "lwc";
import getAnimals from "@salesforce/apex/HttpAnimals.getAnimals";
export default class GetAnimals extends LightningElement {
  @track animals = [];
  handleButtonClick() {
    console.log("Button clicked");
    // コンポーネントが読み込まれた際にApexメソッドを呼び出す
    getAnimals()
      .then((result) => {
        console.log("Method done");
        this.animals = result; // 取得したAnimalデータをプロパティにセット
      })
      .catch((error) => {
        console.error("Error fetching animals: ", error);
      });
  }
}