この記事は新社会人のSalesforce学習記録とその他 Advent Calendar 2025の11日目の記事です。
アドベントカレンダーの40%が終わったのでとりあえずLWCに移行します
Lightning Webコンポーネントとは
SalesforceのUIフレームワークです。
簡単に言えば、これを使ってWebページの要素を作ることが出来たりします。
基本的には
・Javascript（要素の処理に絶対必須）
・HTML(要素の作成に絶対必須)
・CSS(どっちでもいい)
・XML（必須？と思われる。なぜかついてくる）
と
Apex(基本いらない気がする。必要な時はApex⇔JS間でやり取りできる)
を使用して作成されます。基本的にJavascriptとHTMLさえできればいいので、通常のWebサイトを作成するときとあまり変わりません。
どのように作るのか
基本的にはVSCodeを使用して作成→Salesforceに送る感じで作ります。
まずVSCodeでSalesforceに接続します
①Salesforce CLIを入れる
→sf updateをする
②「SFDX:Create Project」でプロジェクトを作成
③Autholizing an orgで組織と接続
→これでSalesforce側に作成したものを飛ばせるようになります。
接続すると、ファイルの構成が以下のようになります。
LWCは、force-app/main/defaultの中に入っています。右クリックでCreate Lightning Web Componentを使って作成しましょう。
HTML、JS、XMLが自動で作成されます。
VSCode→Salesforceへ
デプロイといいます。
使っているlwcのコンポーネントを右クリック→デプロイを使用します。
デプロイしたコンポーネントはSalesforceの中に保存されています。したがって、2回目以降はSalesforceにファイルを上書きセーブする形になります。現在のSalesforceに保存されているものとVSCode上の者の差分を表示することが可能です。先ほどの画像内、Diff Folder Against Orgを使用することで見れます。赤の部分はローカルで減った部分、緑は増やした部分です。例えば二人以上で作業していた際に上書きしてしまわないようにするために、いったん確認してみることも大事です。
実行
先ほど、作ったものはWebページの要素になるといいました。
作成したLWCはLightning Experienceを使用して、Salesforceの要素としてつけることができます。
また、Lightning outというものを使用することでWebページを作成することも可能なようです。
おまけとして、以下に必須の者のうちの一つであるJSの簡単な説明を書いておきます。詳しくは明日。
Javascriptの書き方
import { LightningElement } from 'lwc';
export default class Study1211 extends LightningElement {}
基本的にはimport→exportで書きます。importでは必要なものを取ってきます。
exportの中では処理を行います。
@apiとか@trackとかいろいろありますが、基本的にこういったものはコンポーネント間での通信やHTMLの部分から情報を取ってくるなどで使われています。@が付くものはデコレーターであったりアノテーションと呼ばれるようです。