【LWC】デコレータって何？LWC開発の初手でつまづいた初学者が解説！

今回はLWC開発における「デコレータ」について特徴と使い方をまとめてみました。

LWC開発に取り組むにあたり「@〇〇」が理解できなさすぎて、初手でつまずいた私と同じような初学者向けの記事となります。

ご参考程度に！

デコレータとは

Lightning Web Component (LWC) 開発におけるデコレータは、コンポーネントの機能を拡張し、特定の動作を定義するのに役立ちます。

これだけでは何のこっちゃだと思うのですが、要はLWC開発を簡単により便利にしてくれる仕組みということですね。

デコレータには以下の3つの種類あります。

それぞれ見ていきましょう。

@apiデコレータ

@apiデコレータは、LWC のパブリックなプロパティやメソッドを定義する際に使用されます。
@api デコレータが付いたプロパティやメソッドは、親コンポーネントから呼び出すことができます。

例えば親コンポーネントから子コンポーネントへのデータ受け渡しや、子コンポーネントのメソッドを親コンポーネントから呼び出す際に使用するって感じですね。

@apiを使用したサンプルコード

// ChildComponent.js
import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api greeting = 'Hello, World!';

    @api
    displayGreeting() {
        console.log(this.greeting);
    }
}

この例では、ChildComponent というコンポーネントで @api デコレータを使用して greeting プロパティと displayGreeting() メソッドを公開しています。
他のコンポーネントから ChildComponent の greeting プロパティや displayGreeting() メソッドを利用することができます。

例えば、親コンポーネントから ChildComponent を利用する場合、以下のようになります。

<!-- ParentComponent.html -->
<template>
    <lightning-card title="Parent Component">
        <div class="slds-p-around_medium">
            <!-- ChildComponent を表示 -->
            <c-child-component greeting="Good morning!" ></c-child-component>
        </div>
    </lightning-card>
</template>

親コンポーネントで ChildComponent をインスタンス化する際に、greeting プロパティに値を設定しています。このようにして、@api デコレータで公開したプロパティやメソッドを他のコンポーネントから利用できるようになります。

利用には、<c-コンポーネント名 プロパティ名="value" ></c-コンポーネント名>を使用します。

まとめると@apiデコレータは、

他のコンポーネントから利用可能なプロパティやメソッドを公開するために使用されます。

@trackデコレータ

@trackデコレータは、コンポーネント内の JavaScript の変数を HTML のテンプレートと連携させるために使用されます。このデコレータを使用することで、変数の変更を監視し、変更があるとコンポーネントが再レンダリングされます。

つまり、コンポーネントの状態を HTML に反映させるってことですね。

Abo

一応サンプルコードも記載しておきます。

@trackを使用したサンプルコード

// counterComponent.js
import { LightningElement, track } from 'lwc';

export default class CounterComponent extends LightningElement {
    @track count = 0;

    handleIncrement() {
        this.count++;
    }
}

上記コードでは、CounterComponent コンポーネントで @track デコレータを使用して count 変数を定義しています。handleIncrement() メソッドは、countの値をインクリメントするために使用されます。

そして以下の HTML テンプレートでは、{count} プロパティを使用して count 変数の値を表示しています。counterComponent.jsのhandleIncrement メソッドが呼び出されると、@track デコレータによって count 変数が追跡されるため、その値が変更されると、HTML テンプレートが自動的に再レンダリングされ、最新の値が表示されます。

<!-- counterComponent.html -->
<template>
    <div>
        <p>Count: {count}</p>
        <button onclick={handleIncrement}>Increment</button>
    </div>
</template>

まとめると@trackは、

JavaScriptのプロパティをHTMLのテンプレートと連携させ、変更を監視して再レンダリングするためのデコレータです。

@wireデコレータ

@trackデコレータはApexメソッドやJavaScriptの関数を呼び出し、その結果をコンポーネントのプロパティにバインドすることができます。

つまり、コンポーネントとApexコントローラーの間でデータの受け渡しを簡単に行うことができるということです。

@wireを使用したサンプルコード

// wireExample.js
import { LightningElement, wire } from 'lwc';
import getAccountList from '@salesforce/apex/AccountController.getAccountList';

export default class WireExample extends LightningElement {
    @wire(getAccountList)
    accounts;
}

この例では、@wire デコレータを使用して、getAccountList というApexメソッドを呼び出しています。Apex メソッドの戻り値であるアカウントのリストが、accounts プロパティに自動的にバインドされます。

HTML テンプレートで accounts プロパティを参照すると、Apex メソッドから取得したアカウントのリストが表示されます。

<!-- wireExample.html -->
<template>
    <lightning-card title="Account List">
        <div class="slds-p-around_medium">
            <template if:true={accounts.data}>
                <ul>
                    <template for:each={accounts.data} for:item="account">
                        <li key={account.Id}>{account.Name}</li>
                    </template>
                </ul>
            </template>
            <template if:true={accounts.error}>
                <p>{accounts.error}</p>
            </template>
        </div>
    </lightning-card>
</template>

上記HTML テンプレートでは、accounts.data を参照してアカウントのリストを表示しています。また、accounts.error をチェックして、取得中にエラーが発生した場合にエラーメッセージを表示するようにしています。

このように@wireを使用するとApex メソッドから取得したデータを簡単にコンポーネントにバインドし、表示することができます。

おわりに

今回はLWCにおけるデコレータについて、その特徴と使い方をまとめてみました。

Help記事読んでも正直よく分からなかったりするので使いながら理解していくのが一番ですね。

おわりです。