[Salesforce]Hello World Lightning Web コンポーネントの作成

Hello World Lightning Web コンポーネントの作成

Lightning Web コンポーネントを作成する

新しいコンポーネントの名前として helloWorld と入力します。

helloWorld.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>

helloWorld.js

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    greeting = 'World';
    changeHandler(event) {
      this.greeting = event.target.value;
    }    
}

helloWorld.js-meta.xml

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

Lightning Experience でアプリケーションにコンポーネントを追加する

1. アプリケーションランチャー () で、[Sales (セールス)] を見つけて選択します。
2.  をクリックして、[Edit Page (編集ページ)] を選択します。
3. Lightning コンポーネントのリストの [Custom (カスタム)] 領域から helloWorld Lightning Web コンポーネントをページキャンバスの上部にドラッグします。

1. [Save (保存)] をクリックします。
2. [Activate (有効化)] をクリックします。
3. [Assign as Org Default (組織のデフォルトとして割り当て)] をクリックします。
4. [Save (保存)] をクリックします。
5. もう一度 [Save (保存)] をクリックしてから、 をクリックしページに戻ります。
6. ページを更新すると、新しいコンポーネントが表示されます。