Hello World コンポーネントを作成し、Lightning アプリケーションビルダーを使用して Lightning ページに追加しましょう。その後、スクラッチ組織で表示します。
コンポーネントを作成する前に、「エディタ、リンタ、組織の設定」と「Salesforce CLI のインストール」を参照してください。
Note
Salesforce DX プロジェクトには特定の構造と設定ファイルがあります。設定ファイルは、ディレクトリを Salesforce DX プロジェクトとして指定します。
VS Code で Command + Shift P を押し、「sfdx」と入力して [SFDX: プロジェクトの作成] を選択します。プロジェクト名には「lwc-hello-world」と入力します。
このコマンドはコマンドラインでも実行できます。
1cd PATH/TO/YOUR/SFDX/PROJECTS
2sf project generate --name lwc-hello-world
3cd lwc-hello-worldスクラッチ組織を作成するには、Dev Hub 組織の認証が必要です。このコマンドを実行すると、Salesforce ログインページがブラウザで開きます。Dev Hub のユーザ名とパスワードを入力します。Dev Hub 組織の認証は、プロジェクト作業を最初に行うときにだけ必要です。
VS Code で Command + Shift P を押し、「sfdx」と入力して [SFDX: Dev Hub の認証] を選択します。
このコマンドはコマンドラインでも実行できます。
1sf org login webVS Code で Command + Shift P を押し、「sfdx」と入力して [SFDX: デフォルトスクラッチ組織の作成] を選択します。デフォルト値を受け入れます。
このコマンドはコマンドラインでも実行できます。
1sf org create scratch -s -f config/project-scratch-def.json -a "lwchelloworld"force-app/main/default/lwc フォルダ内に Lightning Web コンポーネントを作成します。
VS Code で Command + Shift P を押し、「sfdx」と入力して [SFDX: Lightning Web コンポーネントの作成] を選択します。希望するディレクトリでデフォルトを受け入れます。ファイル名には「helloWorld」と入力します。
このコマンドはコマンドラインでも実行できます。
1cd force-app/main/default/lwc
2sf lightning generate component --type lwc -n helloWorld -d force-app/main/default/lwcLightning Web コンポーネント名ではキャメルケース (helloWorld) を使用しますが、これは HTML ではケバブケース (<c-hello-world>) にマッピングされるためです。「コンポーネントフォルダ」を参照してください。
次のコードを helloWorld.js ファイルに追加します。
1import { LightningElement, api } from "lwc";
2
3export default class HelloWorld extends LightningElement {
4 @api name;
5}@api デコレータは name プロパティを公開プロパティにします。
次のコードを helloWorld.html ファイルに追加します。
1<template>
2 <lightning-card title="HelloWorld" icon-name="custom:custom14">
3 <div class="slds-card__body slds-card__body_inner">Hello, {name}!</div>
4 </lightning-card>
5</template>{} 構文は HTML テンプレートの name プロパティを JavaScript クラスの name プロパティにバインドします。他のマークアップは、テキストにある程度のパディングを施し、lightning-card 基本 Lightning コンポーネントにラップすることで見た目を改善します。
スクラッチ組織で Lightning ページに追加できるように Lightning アプリケーションビルダーの helloWorld コンポーネントを設定します。
helloWorld.js-meta.xml を開いて、太字のコードを追加します。Lightning アプリケーションビルダーでコンポーネントを使用するには、<isExposed> を true に設定します。<target> により、アプリケーションページにコンポーネントを追加できます。<targetConfigs> セクションでは、コンポーネントの name プロパティを Lightning アプリケーションビルダーで設定できるようにしています。
1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="anotherComponent">
3 <apiVersion>45.0</apiVersion>
4 <isExposed>true</isExposed>
5 <masterLabel>Hello World</masterLabel>
6 <description>Add a classic greeting to any page.</description>
7 <targets>
8 <target>lightning__AppPage</target>
9 </targets>
10 <targetConfigs>
11 <targetConfig targets="lightning__AppPage">
12 <property name="name" type="String" label="Name" placeholder="World" description="Enter the name of the person to greet."/>
13 </targetConfig>
14 </targetConfigs>
15</LightningComponentBundle>Lightning Experience ホームページ、レコードページ、およびエクスペリエンスビルダーに対象を追加することもできます。
VS Code で Command + Shift P を押し、「sfdx」と入力して [SFDX: デフォルトスクラッチ組織へのソースの転送] を選択します。
このコマンドはコマンドラインでも実行できます。
1sf project deploy startVS Code で Command + Shift P を押し、「sfdx」と入力して [SFDX: デフォルトスクラッチ組織を開く] を選択します。
このコマンドはコマンドラインでも実行できます。
1sf org openスクラッチ組織で、[設定] に「bui」と入力して、[Lightning アプリケーションビルダー] をクリックします。
Lightning ページを作成するには、[新規] をクリックします。
[アプリケーションページ] を選択し、[次へ] をクリックします。
表示ラベル Hello World を入力します。
[3 つの範囲] を選択して [完了] をクリックします。
Hello World コンポーネントを、コンポーネントのカスタムリストからページ上の領域までドラッグします。
コンポーネントを選択して名前を入力します。
他の Hello World コンポーネントをページまでドラッグして、各コンポーネントに別々の名前を設定します。
ページが完成したら、[保存] と [有効化] をクリックします。
[有効化] ページで、アイコンを選択し、[Lightning Experience] をクリックして、ページを Lightning Bolt アプリケーションに追加します。[保存] をクリックします。
Lightning アプリケーションビルダーを終了するには、[戻る] をクリックします。
アプリケーションピッカーで [Bolt ソリューション] をクリックします。
[Hello World] をクリックして、ページと挨拶を確認します。
Lightning アプリケーションビルダーに戻るには、歯車アイコンをクリックして [ページの編集] を選択します。
コードを編集したら、スクラッチ組織に転送して、ブラウザをハード更新します。
関連トピック
The Japanese Summer '24 guide is now live
j