LWCの基本構成

作成した helloWorld フォルダには、主に3つのファイルがあります。

helloWorld/
├── helloWorld.html
├── helloWorld.js
└── helloWorld.js-meta.xml

HTML = 画面
JS = 機能
XML = Salesforceに登録する設定

1. HTML — 画面を作成

<template>
  <lightning-card title="HelloWorld" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
      <p>Hello, {greeting}!</p>
      <lightning-input
        label="Name"
        value={greeting}
        onchange={changeHandler}>
      </lightning-input>
    </div>
  </lightning-card>
</template>

HTMLコードの説明

コード	説明
`<template>`	LWC画面の開始と終了
`<lightning-card>`	SalesforceのカードUI
`title="HelloWorld"`	カードのタイトル
`icon-name`	カードのアイコン
`{greeting}`	JSの変数の値を表示
`<lightning-input>`	入力欄
`value={greeting}`	JSの変数の値を入力欄に表示
`onchange={changeHandler}`	入力値が変更されたらJSの関数を実行

2. JavaScript — 機能を作成

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    greeting = 'World';

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

JavaScriptコードの説明

import { LightningElement } from 'lwc';

SalesforceでLWCコンポーネントを作成するために必要な基本クラスを読み込みます。

export default class HelloWorld extends LightningElement {

export default：このクラスをコンポーネントの基本クラスとして出力
class HelloWorld：HelloWorldというクラスを作成
extends LightningElement：SalesforceのLWC機能を継承

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

changeHandler：入力値が変更されたときに実行する関数
event.target.value：ユーザーが入力した値
this.greeting：現在のコンポーネントのgreeting変数

3. XML — Salesforceのページに表示

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="<http://soap.sforce.com/2006/04/metadata>" fqn="helloWorld">
    <apiVersion>63.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

XMLコードの説明

コード	説明
`apiVersion`	SalesforceのAPIバージョン
`isExposed=true`	Lightning アプリケーションビルダーで使用できるように公開
`lightning__AppPage`	アプリページで使用
`lightning__RecordPage`	レコード詳細ページで使用
`lightning__HomePage`	ホームページで使用