Salesforce Lightning Web コンポーネントの基礎の基礎

これは何？

この記事は「24日後に立派なSalesforceエンジニアになるWEBエンジニア Advent Calendar 2022」の8日目の記事です。１7日後に立派なSalesforceエンジニアになるために今日はLightning Web Component (LWC)の基礎について学んでいきます！

ファイル構成

新規でコンポーネントを作成すると以下のようなファイルが生成される。独自のCSSを当てたい時はここにtest.cssを追加してやればいい。基本は以下のファイルを使ってコンポーネントを作っていくことになるのだけど、ファイル構成を見てもWEBエンジニアが触りやすそうな気がとてもする！

lwc
 └ test
    ├ __tests__
    |    └ test.test.js
    ├ test.html
    ├ test.js
    └ test.js-meta.xml

とりあえずやっぱ最初はHello Worldやってみる？

Hello Worldを表示する

jsからメッセージを変数に入れて、htmlに渡す。

test.html

<template>
  {testText}
</template>

test.js

import { LightningElement } from 'lwc';

export default class Test extends LightningElement {
  testText = 'Hello World';
}

コンポーネントに関する定義をする。今回は最低限ということで、作成したtestコンポーネントをどこに表示するかだけを記載。

test.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

これで昨日書いた手順に従って組織にデプロイを行うと、レコードページの編集を行うとカスタムコンポーネントとしてtestが選択できるようになる。

なのでLWCの開発手順としてはコードを書いてデプロイして動作確認して〜なんだけど、それが結構めんどくさい。
コードを書いて保存 > 右クリック > 組織へデプロイをクリック > ブラウザで確認
と言う流れを踏まなくてはいけない。が、そこで役に立つのがローカルでのプレビュー機能！こんなのも用意してくれてるのね。

コンポーネントをローカルでプレビューする

Ctrl+Shift+PまたはCmd+Shift+Pでコマンドパレットを開きSFDX : コンポーネントをローカルでプレビューを選択。

今回はデスクトップを選択。

するとブラウザが起動してこんな画面が出てくる。ここに作っているコンポーネントが一覧で表示されるので、動作確認をしたいコンポーネント名をクリックする。

するとこんな感じでプレビューが表示される。この画面はローカルでコードを編集して保存するたび自動で更新されるので、めちゃくちゃ便利！

最後に

今日はLWCの基礎の基礎と、開発に便利なプレビュー機能を見ていきました。
WEBエンジニアとしてはLWCはとても触りやすそうだし、効率的に開発していけそうでなんか良さげ！
明日はLWCからデータベースへの接続について見ていこうと思います。