Apex Lightning Web コンポーネント(lwc)の基本サンプル

2023年8月8日

環境
Salesforce

操作方法

1.JSファイル(trailheadサイトより)
例app.js

import { LightningElement } from 'lwc'; //lwcモジュールのインポート

export default class App extends LightningElement { //クラスのエクスポート
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
   ready = false;
   connectedCallback() {
       setTimeout(() => {
           this.ready = true;
       }, 3000);
   }
}

説明
lwcモジュール（Lightning Web コンポーネントのコアモジュール）から、必要な機能をインポートします。
htmlファイル、JSファイルで使うクラス・プロパティをエクスポートします。

2.htmlファイル(trailheadサイトより)

<template>
    <div>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <div>Category: {category}</div>
        <div>Material: {material}</div>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

説明
JavaScript経由でhtmlを生成するタグ「template」タグで囲む
{}で囲ってJavaScriptの変数を表示します。

3.XMLコード(trailheadサイトより)

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <!-- The apiVersion may need to be increased for the current release -->
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target> //表示したいページ名
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>