LWCの基本的な使用方法（Salesforce)

はじめに

今回は普段の業務で使用しているLightning Web Components (LWC)の基本的な使用方法についてご紹介していきたいと思います。

概要

SalesforceのLightning Web Components（LWC）は、Web開発の最新技術をSalesforceに組み合わせる方法として非常に注目されています。

LWCコンポーネントは、以下の3つから構成されます。

・a.html - コンポーネントのマークアップ
・b.css - スタイルシート
・c.js - ロジック（データ取得や処理）

コンポーネント作成の流れ

以下のコマンドでコンポーネントを作成。

sfdx force:lightning:component:create --type lwc --componentname test

a.htmlにコンポーネントのHTMLを記述していきます。

<template>
  <h1>テスト</h1>
  <p>TESTです</p>
</template>

b.jsファイルにコンポーネントのロジックを記述します。例えば、ボタンがクリックされたときにメッセージを表示するロジックを追加します。

import { LightningElement } from 'lwc';

export default class test extends LightningElement {
  message = 'テスト！！';

  handleClick() {
    alert(this.message);
  }
}

c.cssでコンポーネントにスタイルを追加します。タイトルの文字色を変更する。

h1 {
  color: red;
}

作成したLWCコンポーネントは、SalesforceのLightning App BuilderやVisualforceページに追加して表示できます。

最後に

LWCは、Salesforceアプリケーションのユーザーインターフェースを効率的に構築するためのツールでした。基本を抑えた後は、Apexとの連携などさらに深い知識を学んでいけたらと思います。