Lightning Web Component (LWC)を作ってみよう【Salesforce】

Developer

2020.07.05 2020.05.05

この記事は約4分で読めます。

こんにちは、アンダーソンです。
今回はLWCを作っていきたいと思います。
これまでこのブログではあまり扱ってこなかった(僕が今まで深く勉強してこなかったのもあり)ので、初学者としてイチからやっていきたいと思います。
※何か間違いなどあればぜひ教えて欲しいです。

Contents

1 LWCとは？
2 ファイル構成を知る
3 Hello Worldを出力してみよう
4 CSSファイルを追加しよう
5 まとめ

LWCとは？

LightningWebComponentの略称です。
Auraコンポーネントに変わる新しいプログラミングモデルです。
Spring’20現在では開発者コンソールでの開発編集は不可能で、SalesforceCLIを使用して、組織にデプロイする必要があるので、これから始める方は環境の構築から始めましょう。ちなみに公式ではVisualStadioCodeが推奨されていますので、当ブログでもVSCを使ってやっていきます。

→まだインストールされていない方はこちらからどうぞ

ファイル構成を知る

まず自動的に作成されるのが下記の3つです。

html
Javascript
xml(メタデータ)

ここにCSSなどを追加したい場合は同じファイル名で同じバンドルの中に作成することで要素の参照などが用意になります。
では下記に実際に作った画像を用意しました。

これが初期作成される内容です。
LWCはAuraと同じくコンポーネント単位での実装がメインになってくるようで、
ファイルの命名にも少し気をつけなければいけないようです。
例えば同じ名前空間内のコンポーネントを参照する時にc-my-componentのようにマークアップすることができるようなのでその辺りも考えた命名をしないといけないようです。

Hello Worldを出力してみよう

では上記のファイルでHello Worldを出力してみたいと思います。
まずhtmlファイルを書き換えます。

<template>
    <div>{message}</div>
</template>

次にjsファイルを書き換えます。

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    message = 'Hello World';
}

初期作成でjsファイルにはimportとexportのコーディングがされていますので、
実際にはmessage = ‘Hello World’;を追加するだけでOKです。

さあこれで実際にLightningアプリケーションビルダーから作成したコンポーネントを
追加してみましょう！

設定→Lightningアプリケーションビルダーで既存でも新規でもいいのでビルダーを立ち上げます。左側のコンポーネント選択画面に出てきましたか？
おそらく今のままでは何も出てこないと思います。

ではVSCに戻ってxmlファイルを編集しましょう。

<isExposed>false</isExposed>

となっているところを下記のコードに書き換えます。

<isExposed>true</isExposed>
<targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
</targets>

これでOKです。
再度設定画面からビルダーに行ってコンポーネントを確認してみてください。
今度は表示されていると思います。
※3つとも必要なわけではなくページの種類に応じたコーディングでもOKです。