2019.12.16

Lightning Web ComponentsとHappyになれる方法（基礎編）

T.I

はじめに

Salesforce Spring '19から正式リリースされたLightning Web Components ですが、みなさま使われていますか？
Auru Components よりパフォーマンスが改善されたとか、html、Js、cssと取っつきやすい構造になったとか、これから積極的に使っていきたい機能ではあります。

今回は、基礎編ということで、Lightning Web Components の基本的な機能を紹介させていただきます。
（今後はもっと踏み込んだ機能も紹介しようと思います。）

過去記事も参考にしてください。　
　Lightning Web Components 開発環境の構築方法
　Visual Studio CodeでSalesforceの開発環境を構築する(winter '19)
　
　Lightning Web Components の簡単な概要
　Lightning Web Component (LWC)のご紹介

ライフサイクル

初期表示（initialize）時のライフサイクルイベントのフローは以下の通りです。

constructor()
コンポーネントの作成時に呼び出されます。

connectedCallback()
要素がドキュメントに挿入されるときに呼び出されます。

renderedCallback()
コンポーネントがレンダリングされるたびに呼び出されます。
import { LightningElement } from 'lwc';
export default class sample extends LightningElement {
    
    constructor() {
        super();
        // code here
    }

    connectedCallback() {
        // code here
    }

    renderedCallback() {
        // code here
    }

}
コード例：sample.js
注意事項
同じ子コンポーネントを複数個、親コンポーネントに配置した場合、constructorなどでSQOLをクエリすると、下の図のようにトランザクションは１つにまとめられます。
つまり Child Component を101個配置した場合（あんまり無いとは思いますが・・・）１トランザクションで101回SQOLのクエリが実行され "Too many SOQL queries: 101" が発生します。

デコレータ

Lightning Web Components では３つのデコレータを提供しています。（デコレータ自体はECMAScriptの機能です。）
@track
プロパティの値が変更されると、コンポーネントが再レンダリングされます。プロパティはプライベートなので、自コンポーネント内でのみアクセス可能です。（プライベートリアクティブプロパティ）
import { LightningElement, track } from 'lwc';
export default class Sample extends LightningElement {

    @track sampleValue = 'sample';

}
コード例：sample.js
@api
プロパティの値が変更されると、コンポーネントが再レンダリングされます。プロパティはパブリックなので、自コンポーネント外からでもアクセス可能です。（パブリックリアクティブプロパティ）
import { LightningElement, api } from 'lwc';
export default class Sample extends LightningElement {

    @api sampleValue = 'sample';

}
コード例：sample.js
@wire
Lightning Data Serviceが提供する wireアダプター または Apexメソッド を利用し、Salesforceのデータまたはメタデータの操作ができます。wireサービス がデータをプロビジョニングすると、コンポーネントが再レンダリングされます。（リアクティブワイヤサービス）
import { LightningElement, api } from 'lwc';
export default class Sample extends LightningElement {

    @api recordId;

    @wire(getRecord, { recordId: '$recordId', fields: ['Account.Name'] })
    record;

    get name() {
        return this.record.data.fields.Name.value;
    }

}
コード例：sample.js
<template>

    <lightning-input label="account name" value={name} ></lightning-input>

</template>
コード例：sample.html
@wireを使ってApexメソッドをコールできますが、使わなくてもコールすることができます。
import { LightningElement, api } from 'lwc';
import selectRecord from '@salesforce/apex/SampleApexController.selectRecord';
export default class Sample extends LightningElement {

    @api recordId;

    // Apexメソッドをwireで呼び出す
    @wire(selectRecord, { recordId: '$recordId' })
    record;

    get name() {
        return this.record.data.fields.Name.value;
    }

    connectedCallback() {
        // Apexメソッドを直接呼び出す
        selectRecord({
            recordId : this.recordId
        })
        .then( data => {
            // 正常
        } )
        .catch((error) => {
            // エラー
        });
    }

}
コード例：sample.js

wireアダプターの紹介

lightning / uiRecordApi
レコードのデフォルト値を取得することができる他、作成、削除、更新するJavaScript APIも提供されています。
lightning / uiObjectInfoApi
オブジェクトのメタデータや選択リストの値を取得できます。
lightning / uiListApi（ベータ）
オブジェクトのレコードをリストビュー形式で取得できます。

ゲッター/セッター

プロパティの値を、条件によって変えたい場合に利用できます。

下記コードは、親コンポーネントから受け取った値を、子コンポーネントで値を変更して出力する例です。
<template>

    <c-sample-child money=100 ></c-sample-child>

</template>
コード例：sampleParent.html
<template>

    <lightning-input label="税込み価格" value={totalmoney} ></lightning-input>

</template>
コード例：sampleChild.html
import { LightningElement, api, track } from 'lwc';
export default class sample extends LightningElement {    

    @track totalmoney;

    @api 
    get money () {
        return this.totalmoney;
    }

    set money ( value ) {
        this.totalmoney = value + ( value * 0.1 );
    }

}
コード例：sampleChild.js
注意事項
コンポーネントに複数の@apiプロパティがある場合、割り当ての順番は保証されていないので、他の@apiプロパティの値に依存するセッターは作成しないようにしましょう。

さいごに

いかがでしたでしょうか？
まだまだ、紹介しきれていない機能がありますが、またの機会に紹介できたらと思います。

また、TrailheadやComponent library（英語ですが・・・）などで情報が展開されていますので、
そちらを参考にしていただければと思います。
31 件
    　
  • banner
  • banner

関連する記事

関連するキーワード