SFDC：Lightning Web コンポーネント開発を試してみました

1. SFDC:Create Lightning Web Componentコマンド実行

コマンド実行でファイルを作成します。

ファイル名はここで入力。

こんな感じでLWCファイルを作成できます。拡張子は.jsです。

作成されるファイルは下記の3つです。

• helloLwc.js
• helloLwc.html
• helloLwc.js-meta.xml

ファイル名の先頭は小文字になるようです。自分の環境ではHelloLwc.jsで最初つくられたのですが保存してSalesforce側にデプロイしたタイミングか、それ以外のどこかで上記の3つのファイルにアクセスできるようになりました。

.xmlのファイルで使用箇所などの設定ができるみたいです。

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

.htmlファイルでHTMLコードを記述します。

<template>
    <p>Hello LWC!</p>
</template>

DeployコマンドでSalesforce側にリリースします。

正常にリリースすると設定のLightningコンポーネントのページに追加されます。

ここまでできればLightningアプリケーションビルダーで利用可能になっていると思います。今回のコードの場合はホームのページで利用できるコンポーネントです。

あとはドラッグ&ドロップで追加するだけ。テキストが表示されるシンプルなコンポーネントです。

背景も何も無い状態で表示されました。

上記まででLWCコンポーネントの最低限の枠ができました。続いてJS処理の実装です。「{name}」という感じに書くとバインド変数として扱われます。

<template>
    <p>Hello {name}!</p>
</template>

JS側はこんな感じ。

import { LightningElement } from 'lwc';

export default class HelloLwc extends LightningElement {
    name = 'Lightning';
}

デプロイコマンドでリリースするとSalesforce側に変数で宣言した値が表示されることを確認できます。

次はInputフィールドの使い方です。

<template>
    <p>Hello {name}!</p>
    <div>
        <input value={name} onkeyup={onNameChanged} />
    </div>
</template>

JSファイル側は次のように変更します。

import { LightningElement,track } from 'lwc';

export default class HelloLwc extends LightningElement {
    @track name = 'Lightning';

    onNameChanged() {
        this.name = this.template.querySelector('input').value;
    }
}

これでテキストボックスに入力した結果が画面に表示されるようになりました。

次はチェックボックスをつかった条件判定についてです。また、今回は複数のInputフィールドを用意するのでquerySelectorの条件をID指定にします。

<template>
    <p>Hello {name}!</p>
    <div>
        <input data-id="inputName" value={name} onkeyup={onNameChanged} />
    </div>
    <div>
        <input data-id="inputCheckbox" type="checkbox" onchange={onCheckboxChanged} />
        <template if:true={isChecked}>表示</template>
        <template if:false={isChecked}>非表示</template>
    </div>
</template>

JS側はこんな感じ。

import { LightningElement,track } from 'lwc';

export default class HelloLwc extends LightningElement {
    @track name = 'Lightning';
    @track isChecked = false;

    onNameChanged() {
        this.name = this.template.querySelector('[data-id="inputName"]').value;
    }

    onCheckboxChanged() {
        this.isChecked = this.template.querySelector('[data-id="inputCheckbox"]').checked;
    }
}

これで複数のInputフィールドのクエリセレクターの使い方とチェックボックスの値によるIF判定を動かすことができました。

最後にリスト表示についてです。今回は先にJSの処理から。

import { LightningElement,track } from 'lwc';

export default class HelloLwc extends LightningElement {
    @track name = 'Lightning';
    @track isChecked = false;
    @track members = [
        {
            id: "1",
            name: "Sato"
        },
        {
            id: "2",
            name: "Suzuki"
        },
        {
            id: "3",
            name: "Tanaka"
        }
    ];

    onNameChanged() {
        this.name = this.template.querySelector('[data-id="inputName"]').value;
    }

    onCheckboxChanged() {
        this.isChecked = this.template.querySelector('[data-id="inputCheckbox"]').checked;
    }
}

HTML側はこんな感じ。

<template>
    <p>Hello {name}!</p>
    <div>
        <input data-id="inputName" value={name} onkeyup={onNameChanged} />
    </div>
    <div>
        <input data-id="inputCheckbox" type="checkbox" onchange={onCheckboxChanged} />
        <template if:true={isChecked}>表示</template>
        <template if:false={isChecked}>非表示</template>
    </div>
    <div>
        <ul>
            <template for:each={members} for:item="member" for:index="index">
                <li key={member.id}>{index}. {member.name}</li>
            </template>
        </ul>
    </div>
</template>

これでリスト表示ができました。

リスト表示のもう一つの書き方です。

<template>
    <p>Hello {name}!</p>
    <div>
        <input data-id="inputName" value={name} onkeyup={onNameChanged} />
    </div>
    <div>
        <input data-id="inputCheckbox" type="checkbox" onchange={onCheckboxChanged} />
        <template if:true={isChecked}>表示</template>
        <template if:false={isChecked}>非表示</template>
    </div>
    <div>
        <!--
        <ul>
            <template for:each={members} for:item="member" for:index="index">
                <li key={member.id}>{index}. {member.name}</li>
            </template>
        </ul>
        -->
        <ul>
            <template iterator:it={members}>
                <li key={it.value.id}>{it.index}. {it.value.name}: {it.first} : {it.last}</li>
            </template>
        </ul>
    </div>
</template>

この書き方でもリスト表示ができました。また、リストの最初と最後の判定も動いています。

以上がSalesforce Developer JapanのYoutube動画で公開されているのを見ながら試してみたLightning Webコンポーネント開発の基本的な部分です。Apexコードとの連携は含まれていませんがこれをベースに勉強をしていけば良さそうでした。

HTML

<template>
    <lightning-card  title="Hello">
        <lightning-button label="New" slot="actions"></lightning-button>
        <p class="slds-p-horizontal_small">Card Body (custom component)</p>
        <p slot="footer">Footnote</p>
    </lightning-card>
    <lightning-button label="New" title="Non-primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
</template>

JS

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {}

XML

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

カスタムタグ

これで完成。

Ligtning Webコンポーネントの基本的な使い方はこんな感じでした。