これは何？
この記事は「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に渡す。
<template>
{testText}
</template>
import { LightningElement } from 'lwc';
export default class Test extends LightningElement {
testText = 'Hello World';
}
コンポーネントに関する定義をする。今回は最低限ということで、作成したtestコンポーネントをどこに表示するかだけを記載。
<?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からデータベースへの接続について見ていこうと思います。