Lightning Web Componentsとは？
1. Lightning Web Componentsとは？
Lightning Web Components（LWC）は、HTML・JavaScript・CSSを使用してSalesforceの画面を開発するための技術です。
Salesforce DXとVisual Studio Codeを使用して、コンポーネントの作成・デプロイを行います。
2. Salesforce DXプロジェクトの作成
Visual Studio Codeでコマンドパレットを開きます。
Cmd + Shift + P（Mac）
以下の順番で操作します。
SFDX: Create Projectを選択Standardを選択- プロジェクト名：
HelloWorldLightningWebComponent - 保存先フォルダを選択
Create Projectをクリック
3. Salesforce組織の認証
作成したプロジェクトをTrailhead Playgroundに接続します。
Cmd + Shift + Pを開くSFDX: Authorize an Orgを選択Project Defaultを選択- Alias（別名）を設定
- ブラウザでSalesforceにログイン
Allowをクリック
認証が完了すると、VS CodeからSalesforce組織にアクセスできるようになります。
4. Lightning Web Componentの作成
VS Codeで以下を実行します。
SFDX: Create Lightning Web Componentを選択- コンポーネント名：
helloWorld - 保存先：
force-app/main/default/lwc - Enterキーを押して作成
作成されるファイル：
| ファイル | 役割 |
|---|---|
| helloWorld.html | 画面の構成 |
| helloWorld.js | データ・イベント処理 |
| helloWorld.js-meta.xml | コンポーネントの設定 |
5. Salesforce組織へのデプロイ
作成したLWCをSalesforce組織に反映します。
force-app/main/defaultフォルダを右クリックSFDX: Deploy This Source to Orgを選択- Outputでデプロイ結果を確認
6. Lightningページへの追加
Salesforceの画面に作成したコンポーネントを配置します。
事前設定：
- Setup → Home → Advanced Seller Homeを無効化
- Setup → Session Settings → ブラウザキャッシュ設定を無効化
コンポーネントの配置：
SFDX: Open Default Orgを実行- App Launcher →
Sales - 設定アイコン →
Edit Page - Custom Componentsから
helloWorldを配置 Save→ActivateAssign as Org Default→Save- ホーム画面を更新して確認
重要ポイント
- LWC：SalesforceのUIを開発するための技術
- HTML：画面の構成
- JavaScript：データ・イベントの処理
- XML：コンポーネントの公開・配置設定
{greeting}：JavaScriptの値をHTMLに表示onchange：入力値の変更を検知するイベント- デプロイ（Deploy）：作成したコードをSalesforce組織へ反映
- Lightning App Builder：コンポーネントを画面に配置するツール
開発の流れ
プロジェクト作成 → 組織認証 → LWC作成 → デプロイ → 画面配置
