Developer

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

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

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

スポンサーリンク

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です。

うまく表示できたでしょうか。次にこの文字に対してCSSで装飾をしてみたいと思います。

CSSファイルを追加しよう

ファイルの追加は簡単です。VSC内でファイルを新規作成します。
CSSスタイルで記述した後、同じファイル名.cssでファイルを同じフォルダ内に保存します。

これだけでOKです。ちなみに今回は文字を大きくして、色を青に変えてみました。
実際の画面を確認するとこんな感じです。

ちゃんと変わってますね。
Auraに比べるとファイルが散見しないんでまとまってていいような気はします。

まとめ

今回はHelloWorldの出力、コンポーネントの追加、CSSの追加までやりました。
まずは基本的な流れなので一度ぜひやってみてください。
自分も勉強しつつまたアップしていきたいと思います。

今回のソースはGitHubに載せています。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。

コメント