2020.08.03

Salesforceで地図を表示しよう!(Lightning Web Components <LWC>編)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
gettyimages (16824)

はじめに

前回の記事、「Salesforceで地図を表示しよう!(lightning:mapコンポーネント編)」では、Auraコンポーネントで地図の表示方法を紹介しました。

今回は、Lightning Web Components(LWC)を使った地図の表示方法を紹介しながら、AuraとLWCの違いを確認していきます。

サンプルソース

作成するソースコードは次の3つです。

  • HTML
  • JavaScript
  • Apex Class

HTML

<template>
    <lightning-map
        map-markers={mapMarkers}
        selected-marker-value={selectedMarkerValue}
        markers-title="account list"
        onmarkerselect={handleMarkerSelect}
        list-view="auto">
    </lightning-map>
</template>
lightningMapExample.html

HTMLでは、<lightning-map>タグのみを定義しています。

Auraで定義していた、属性<aura:attribute>やイベントハンドラ<aura:handler>は定義しません。

また、<aura:component>タグのcontroller、implements属性も定義しません。

LWCでは、コンポーネントの用途(implements属性)を、設定ファイルに定義します。

<lightning-map>タグで使用できる属性は次の通りです。

属性 内容
map-markers プロットするマーカーの配列。
markers-title マップリストのタイトル。
list-view マップリストの表示:visible/非表示:hidden/自動:auto。
show-footer フッター部の表示。※指定するとエラーが発生します。(2020年7月現在)
selected-marker-value 選択しているマーカーの値。
onmarkerselect マーカー選択時のアクション。
center マップの中心位置。
zoom-level マップのズームレベル。デスクトップ:1~22、モバイル:1~20をサポート。

JavaScript

import { LightningElement, track, wire } from 'lwc';

// getAccounts メソッドのインポート
import getAccounts from '@salesforce/apex/LightningMapExampleController.getAccounts';

export default class LightningMapExample extends LightningElement {
    // 表示するマーカーのリスト
    @track
    mapMarkers=[];

    // 選択しているマーカーの値
    @track
    selectedMarkerValue;
    
    // 取引先を取得して表示するマーカーを作成
    @wire(getAccounts, {})
    wiredAccounts({ data }) {
        if (data) {
            var markers = [];
            for(var i = 0; i < data.length; i++){
                var acc = data[i];
                markers.push({
                    location: {
                        Country : acc.BillingCountry,
                        State : acc.BillingState,
                        City: acc.BillingCity,
                        Street: acc.BillingStreet
                    },
    
                    icon : "standard:account",
                    value: acc.Id,
                    title: acc.Name,
                    description: acc.Description
                });
            }
            this.mapMarkers = markers;
        }    
    }  

    // マーカー選択時のアクション
    handleMarkerSelect(event) {
        console.log(event.target.selectedMarkerValue);
    }
}
lightningMapExample.js

Auraでは、コンポーネントからアクションを取得して、アクション実行キューに追加していました。

①コンポーネントからアクションを取得

var action = cmp.get(”c.getAccounts”);

②アクション実行キューに追加

$A.enqueueAction(action);

LWCでは、Apex Classからメソッドをインポートして呼び出します。

①サーバーサイドのメソッドをインポート

import getAccounts from '@salesforce/apex/LightningMapExampleController.getAccounts';

②サーバーサイドのメソッドを呼び出し

@wire(getAccounts, {})

※ここではワイヤーサービスを使って宣言的にApex Classを呼び出していますが、@wireを使わずに呼び出すことも可能です。

また、AuraではHTMLに定義していた属性(mapMarkers、selectedMarkerValue)を、LWCではJavaScriptに定義しています。

マーカー(mapMarkers)の設定で使用できる属性は次の通りです。

属性 内容
icon マップリストに表示するアイコン。
location マーカーの位置情報。緯度経度(Latitude、Longitude)のセットまたは、住所(Country、PostalCode、Country、State、City、Street)のセットを指定する。Streetを指定する場合、Country、PostalCode、Country、State、Cityの1つ以上を合わせて指定する必要がある。
title マーカークリック時に表示される吹き出しのタイトル。
description マーカークリック時に表示される吹き出しの内容。
value マーカーの値。マーカークリック時にlightning:mapのselectedMarkerValueに設定される。

※icon属性には、Lightning Design Systemのアイコンのみ使用可能

Apex Class

public with sharing class LightningMapExampleController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts(){
        return [SELECT Id, Name, BillingCountry, BillingState, BillingCity, BillingStreet, Description 
                FROM Account 
                WHERE BillingCity != NULL AND BillingStreet != NULL LIMIT 10];
    }
}
LightningMapExampleController.cls

AuraとLWCで、処理に違いはありません。

違う点は、アノテーションを付けている箇所だけです。

@AuraEnabled(cacheable=true)

作成結果

組織の取引先がマップに表示されていれば完成です。

おわりに

AuraとLWCを比較すると、機能や制限にほとんど違いはありませんでした。

※地図表示の制限については、「前回記事」参照

今回、AuraとLWCを比較した結果、LWCの方がJavaScriptとの親和性が高く、よりシンプルにコードを実装できることや、 PlaygroundJestなど、LWCを選択するメリットが多くあると感じました。

注意
Playgroundでは、今回紹介した<lightning-map>タグを使用することができません。
(2020年7月現在)

地図表示の動作を検証する際は、組織にデプロイして実施する必要があります。
28 件

関連する記事