ゼロからはじめるLightning Web Component 〜WebAPIっぽく実装したい！〜

今年の技術系アドベントカレンダーももう最終日ですね。
12月1日からクリスマスの25日まで、毎日投稿されるアドベントカレンダーの記事が投稿されてきましたが、面白い、勉強になる、記事は見つけられましたでしょうか？
これから年末年始のお休みにアドベントカレンダーの記事をじっくり読み耽ってみてはいかがでしょうか？

はじめに

さて、今回はLightning Web ComponentとApexクラスのデータ渡しについて、WebAPIっぽく実装したい私が抱いている願望が2つあります。

1つ目は、@wireがあまり仲良くなれそうにない私としては、JSON形式でデータをやりとりしたいという願望です。

そして、もう一つ@AuraEnabledはパッケージングするとパッケージをインストールした組織ではAPIが公開されてしまったり、気軽に追加・削除できなかったりするのでなんとかしたい願望です。

2つの願望を叶える設計思想

まずは、JSON形式でデータをやりとりするため、Lightning Web Component側ではJSON.stringify() / parse() を、Apexクラス側ではJSON.serialize() / deserialize()を利用します。
次に、＠AuraEnabledの問題については、Lightning Web Component側からコールされるためのメソッドを作成し、そこから各処理に振り分けることで処理ごとにメソッドを作成しなくてもよくなります。

ApexとLWCの実装

今回は、ボタン押下時に入力ボックスに入力された文字列を送信して、結果をテキスト表示する簡単なサンプルになります。

Lightning Web Component側

Lightning Web Component側のソースコードは下記のようになります。
データ送信時には、JSON.stringify()を使って送信するデータをJSON形式に変換して、Apex側のメソッドをコールしています。

lwcCallApex.html

<template>
    <lightning-card title="Call Apex methods with JSON">
        <div class="slds-var-p-around_medium ">
            <lightning-input type="text" label="Message" value={message} onchange={changeHandler}></lightning-input>
            <lightning-button variant="brand" label="Submit" onclick={clickSubmit}></lightning-button>
            <p class="slds-var-p-horizontal_small">Result: {result}</p>
        </div>
    </lightning-card>
</template>

lwcCallApex.js

import { LightningElement, api } from 'lwc';
import callMethod from '@salesforce/apex/CallApex.callMethod';

export default class LwcCallApex extends LightningElement {
    message = "Lightning Web Component";
    result = "(No result)";

    clickSubmit(event) {
        const request = {};
        request.path = "/submit";
        request.param = this.message;

        callMethod({ request : JSON.stringify(request) })
        .then(result => {
            if(res.status == 200) {
                this.result = JSON.parse(result).body;
            } else {
                this.result = "Error";
            }
        })
        .catch(error => {
            console.log(error);
            this.result = error;
        })
    }

    changeHandler(event) {
        this.message = event.target.value;
    }
}

Apexクラス側

Apexクラス側のソースコードは下記のようになります。Lightning Web Component側から送信されてきたJSON形式のデータを受け取り、JSON.deserialize() でApexクラスに変換しています。
処理の振り分けには、Web APIっぽくパスを指定して、switch文で処理を振り分けています。
結果については結果を格納するApexクラス(Response)を生成して、JSON.serialize()でJSON形式のデータに変換しています。

CallApex.cls

public with sharing class CallApex {
    @AuraEnabled
    public static String callMethod(String request) {
        String body = '';
        
        try {
            Request req = (Request)JSON.deserialize(request, Request.class);            
            switch on req.getPath() {
                when '/submit' {
                    body = '[Submit] ' + req.getParam();
                }
            }
            Response res = new Response(200, body);
            return JSON.serialize(res);
        } catch(Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
    
    public class Request {
        String path;
        String param;
        
        public Request(String path, String param) {
            this.path = path;
            this.param = param;
        }
        
        public String getPath() {
            return path;
        }
        
        public String getParam() {
            return param;
        }
    }
    
    public class Response {
        Integer status;
        String body;
        
        public Response(Integer status, String body) {
            this.status = status;
            this.body = body;
        }
        
        public Integer getStatus() {
            return status;
        }
        
        public String getBody() {
            return body;
        }
    }
}

まとめ

以上で、Lightning Web Component側とApexクラス側のやりとりをJSON形式のデータにして受け渡すことができ、Web APIのようなパスを引数として渡すことで処理ごとにメソッドを増やすことなく処理を追加できるようになりました。

今後の拡張としてはデータ受け渡し処理をフレームワーク化していき、標準化できるものにしたいと考えています。

おわりに

今回は、Lightning Web ComponentとApexクラスのデータ渡しをJSON形式にしつつ、Apexクラス側で処理を振り分ける仕組みを導入した実装を紹介しました。

YouTubeチャンネル「migration talks」ではSalesforce開発関連の動画をアップロードしています。

www.youtube.com

最近ではLightning Web Componentを学習して内容を解説した動画をYouTubeに投稿していっています。序盤では開発環境のセットアップまでの動画をアップロードしています。これからはLightning Web Componentを実装していくための方法について紹介していきたいと思います。

ぜひチャンネル登録していただけると励みになります。

www.youtube.com

最後になりますが、この投稿はSalesforce Advent Calendar 2022 カレンダー2、およびチームスピリット Advent Calendar 2022 の第25日目の投稿となります。

qiita.com

adventar.org

この記事は、 note.com に投稿した記事の転載になります。
note.com