LWCの基礎

概要

LWCの基本的な書き方をまとめる。
データベースとの連携は取り扱わない。

内容

JavaScriptの値をHtmlに渡す

htmlに渡したい変数をメンバー変数として定義。

javascript

export default class HelloBinding extends LightningElement {
    greeting = 'World';
}

メンバー変数を{}で囲う。

html

<template>
    <p>Hello, {greeting}</p>
</template>

JavaScriptの値をHtmlに渡す（getterを使う場合）

下のように定義したgetterもhtmlからアクセスできる。
計算式とか入れたいときは、getterの中に書いたらよい。

javascript

export default class App extends LightningElement {
   get name(){
     return 'Electra X4';
   }
}

html側からはgetを省略してアクセスできる。

html

<template>
   <div>Name: {name}</div>
</template>

画面のだし分け

if:true=を使うと、画面のだし分けができる。

html

<template>
  <template if:true={areDetailsVisible}>
     <p>These are the details!</p>
  </template>
</template>

画面のループ

for:each=を使うとループができる。
key要素に一位になる値（主にID）を設定する点に注意。

html

<template>
    <lightning-card title="HelloForEach" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={contacts} for:item="contact">
                <li key={contact.Id}>
                    {contact.Name}, {contact.Title}
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

javascript

import { LightningElement } from 'lwc';

export default class HelloForEach extends LightningElement {
    contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
        },
    ];
}

@trackの使いどころ

画面から参照しているメンバー変数が変わった場合、自動的に画面も再描画される。
ただし、{}で囲う変数（オブジェクト）がメンバー変数の場合、オブジェクト全体が更新された場合は画面が再描画されるが、オブジェクトの一部の項目の値が変わっただけでは再描画されない。
オブジェクトの項目は再描画の監視対象にならないからである。

こういう時は、@trackを付けると、オブジェクトの項目も監視対象になる。

@apiの使いどころ

@apiを付けた変数は、外部から参照可能になる。
LWCをコンポーネント化したときに外部から値を受け取りたい変数に@apiを付けておくと良い。

↓イメージ

javascript

import { LightningElement, api } from 'lwc';
export default class TodoItem extends LightningElement {
    @api itemName = 'New Item';
}

html

<template>
    <div class="view">
        <label>{itemName}</label>
    </div>
</template>

呼び出し元

html

<template>
    <c-todo-item item-name="Milk"></c-todo-item>
    <c-todo-item item-name="Bread"></c-todo-item>
</template>