Salesforce LWC(Lightning Web Component) Hello Worldのサンプル

2024年4月23日

環境
VSCode

操作方法
1.lwcで右クリックして SFDX: Create Lightning Web Component を選択します。

2.コンポーネント名を指定します
例helloworld
出力先ディレクトリを指定すれば完了です。
出力先ディレクトリは何も考えずにEnterを押せば force-app/main/default/lwc になります。

3.Hello world! とだけ表示するコンポーネントを作ります。 helloworld.html

 <template>
    <div>
        Hello world!12345
    </div>
</template>

4.XML(helloworld.js-meta.xml)を以下のようにします。

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

5.スクラッチ組織に向けてデプロイします。
$ sfdx force:source:push -u ttwork -f

Posted by arkgame

関連記事: