Lightning Web Components（LWC）の開発入門
- yamazakit5
- 5 分前
- 読了時間: 2分
こんにちは、ネクスト・アイの山崎です。
入社してから約2ヶ月が経ち、Salesforceも徐々に慣れてきました。
今回は、SalesforceのLightning Web Components（LWC）について学んだ内容を整理して共有いたします。
️Lightning Web Components（LWC）とは
Lightning Web Components（LWC）は、Salesforce上で画面（UI）を作成するための開発フレームワークです。HTML・CSS・JavaScriptをベースに構成されており、コンポーネント単位でUIを構築できる点が特徴です。さらに利用可能な場所などを定義するメタデータファイル（js-meta.xml）も加えて1つのコンポーネントとして扱われます。
主に以下の4つのファイルで構成されます。
① HTML（画面表示）
② JavaScript（処理ロジック）
③ CSS（スタイル ※任意）
④ js-meta.xml（設定）
このように役割を分けることで、UIと処理を明確に分離した開発が可能になります。
簡単なサンプル
次に、ボタンを押すとメッセージが変化するサンプルを作成しました。
HTML（sampleComponent.html）
<template>
<lightning-button label="クリック" onclick={handleClick}>
</lightning-button>
<p>{message}</p>
</template>JavaScript（sampleComponent.js）
import { LightningElement } from 'lwc';
export default class SampleComponent extends LightningElement {
message = 'ボタンを押してください';
handleClick() {
this.message = 'クリックされました！';
}
}
このように、イベント処理をJavaScriptで記述することで、動的な画面制御を実装できます。
最後にJavaScript（sampleComponent.js）に記載されていた
import { LightningElement } from 'lwc';ですが、Lightning Web Components（LWC）でコンポーネントを作る際の基本的な書き方で、これを継承することでコンポーネントとして動作するようになります。
️まとめ
今回、Lightning Web Components（LWC）の基本構成や簡単な実装方法について学習しました。
LWCはHTML・CSS・JavaScriptをベースとしているため、Web開発の知識を活かしながらSalesforce開発を行える点が魅力だと感じました。
今後は、Apexとの連携や画面間のデータ受け渡しなど、より実践的な機能についても学習を進めていきたいです。
最後までご愛読いただきありがとうございました。
このブログでは、Salesforceをもっと便利に使うためのお役立ち情報を発信しています。
記事に対する質問・相談に関しては、トップページの「お問い合わせ」よりご連絡ください。
コメント