LWCでストップワッチコンポネントを作ろう

Spring ’19より 「Lightning Web Components」 という新しいLightningコンポーネントのテクノロジーがリリースされます。その名の通りWeb Componentsの機能を活用したモダンなWeb UI実装テクノロジとなっています。従来のAuraプログラミングモデルと共存することができる上に、非常に高いパフォーマンスを発揮します。

このブログ範囲に我々は「Lightning Web Components」の実装方式について

詳しく説明しようと思っていないです。 単純に例としてストップワッチコンポネントをどうやってLWCモデルで実装、スクラッチ組織にプッシュするかステップバイステップで説明します。

ストップワッチコンポネントの仕様:

アプリを作成するための2つのボタンがあります。

  • 開始/停止:これらのボタンはタイマーを開始し、タイマーを停止します。
  • リセット:このボタンはタイマー値をリセットします。

Lightning Webコンポーネントバンドルを作成します。

  1. Visual Studioのコードを開きます。
  2. Command + Shift + P(Mac)、Ctrl + Shift + P(Windows)を押します。 3.CommandPaletteにSFDX:Create Lightning Web Componentを入力して Lightning Webコンポーネントの作成 4.次にソースコードを格納するディレクトリを指定してEnterを押してください。 5."furuStopWatch"としてLightning Webコンポーネントに名前を付けて、Enterキーを押します。 6.これで"furuStopWatch"のフォルダ構造が作成されます。

7.次にコンポネントテンプレート、JSを書きましょう

furuStopWatch.html

<template>
    <div class="slds-page-header" style="background: black;padding: 20px;border-radius: 6px;color:white;">
        <h1>
          <span>ストップワッチ</span>
        </h1>
        <div style="font-size: 20px;text-align:center;">{timeVal}</div>

        <template if:true={showStartBtn}>
            <lightning-button label="開始" onclick={start} style="margin-left: 145px;"></lightning-button>
        </template>
        <template if:false={showStartBtn}>
            <lightning-button label="停止" onclick={stop} style="margin-left: 145px;"></lightning-button>
        </template>

        <lightning-button label="リセット" onclick={reset} style="margin-left: 10px;"></lightning-button>
    </div>
</template>

furuStopWatch.js

import { LightningElement, track } from 'lwc';

export default class FuruStopWatch extends LightningElement {
    @track showStartBtn = true;
    @track timeVal = '0:0:0:0';
    timeIntervalInstance;
    totalMilliseconds = 0;
    /*開始イベント */
    start(event) {
        this.showStartBtn = false;
        var parentThis = this;

        // Run timer code in every 100 milliseconds
        this.timeIntervalInstance = setInterval(function() {

            // Time calculations for hours, minutes, seconds and milliseconds
            var hours = Math.floor((parentThis.totalMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((parentThis.totalMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((parentThis.totalMilliseconds % (1000 * 60)) / 1000);
            var milliseconds = Math.floor((parentThis.totalMilliseconds % (1000)));

            // Output the result in the timeVal variable
            parentThis.timeVal = hours + ":" + minutes + ":" + seconds + ":" + milliseconds;   

            parentThis.totalMilliseconds += 100;
        }, 100);
    }
    /*停止イベント */
    stop(event) {
        this.showStartBtn = true;
        clearInterval(this.timeIntervalInstance);
    }
    /*リセットイベント */
    reset(event) {
        this.showStartBtn = true;
        this.timeVal = '0:0:0:0';
        this.totalMilliseconds = 0;
        clearInterval(this.timeIntervalInstance);
    }
}

furuStopWatch.js-meta.xml

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

ソースコードを完成しましたのでコードをScratch Orgにデプロイします。 Scratch Orgはまだなければ以下のコマンドでスクラッチ組織を作成しましょう。

$ sfdx force:org:create -s -f config/project-scratch-def.json -a testStopWatch
Successfully created scratch org: 00DN0000000F1k8MAC, username: test-igrbxtnnrlqk@example.com

スクラッチ組織が作成された後"furuStopWatch"コンポネントをプッシュしましょう

$ sfdx force:source:push

スクラッチ組織を開いて"furuStopWatch"コンポネントをホームレイアウトに設置しましょう。

$ sfdx force:org:open -u test-igrbxtnnrlqk@example.com
Access org 00DN0000000F1k8MAC as user test-igrbxtnnrlqk@example.com with the following URL: https://enterprise-connect-1208-dev-ed.cs6.my.salesforce.com/secur/frontdoor.jsp?sid=00DN0000000F1k8!AQkAQBq4FCNvE2is9OUgl6wQZkRaHkZNYtd2skqb241z8we335JcUw.Wo5j3Lib69HMWMiQa0RoRU2NST_ovgQKjyaEq2YMI

て"furuStopWatch"コンポネントをホームレイアウトに設置出来次第こんなイメージで確認できます。

以上。

Lightning Webコンポネント開発がいかがですか

Happy Coding with us!

Posted in LightningWebComponent, Salesforce, Vietnam Offshore on May 08, 2019