VF/LWC/Aura/Apex

Salesforceの**Visualforce（VF）、Lightning Web Components（LWC）、Aura Components、Apex**は、それぞれ異なる場面で活用される開発技術です。  
これらを、**Sales Cloudの標準オブジェクト（取引先・商談など）を使った具体的な実装例**を交えて整理しました。  

---

# **1. 各技術の概要と用途**
| 技術名 | 特徴 | 主な用途 |
|------|----|----|
| **Visualforce (VF)** | 旧来のページ作成技術。HTMLに似たタグベースのマークアップ | PDF出力、カスタムレポート、シンプルなUI |
| **Lightning Web Components (LWC)** | 最新のコンポーネントベースのUI開発技術。軽量で高速 | モダンなUI、カスタム画面、外部連携 |
| **Aura Components** | LWC登場前のLightning開発技術。LWCより重いが機能は多い | 複雑なコンポーネント、従来のLightningアプリ |
| **Apex** | Salesforce独自のバックエンド言語。データ処理やロジックを実装 | トリガー、バッチ処理、API連携 |

---

# **2. 具体的な実装例**
### **① Visualforce（VF）：取引先のリストを表示するカスタムページ**
**用途:**  
- **レガシー環境**で使われる
- **シンプルなカスタムUI**（例: 取引先リストをテーブル表示）
- **PDF出力**（例: 見積書生成）

**実装例:** 取引先（Account）のリストを表示するVFページ  

#### **Visualforceページ（AccountList.page）**
```html
<apex:page controller="AccountListController">
    <apex:pageBlock title="取引先リスト">
        <apex:pageBlockTable value="{!accounts}" var="acc">
            <apex:column value="{!acc.Name}" headerValue="取引先名"/>
            <apex:column value="{!acc.Industry}" headerValue="業種"/>
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>
```

#### **Apexコントローラー（AccountListController.cls）**
```apex
public with sharing class AccountListController {
    public List<Account> getAccounts() {
        return [SELECT Name, Industry FROM Account LIMIT 10];
    }
}
```
**ポイント**
- `apex:pageBlockTable` で取引先の一覧を表示
- ApexコントローラーでSOQLを使いデータ取得

---

### **② Lightning Web Components（LWC）：商談の一覧を表示**
**用途:**  
- **最新の推奨技術**
- **高速なUI・コンポーネントベース**
- **Salesforce標準画面と統合しやすい**

**実装例:** 商談（Opportunity）を一覧表示するコンポーネント  

#### **LWCコンポーネント（opportunityList.js）**
```javascript
import { LightningElement, wire } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';

export default class OpportunityList extends LightningElement {
    opportunities;

    @wire(getOpportunities)
    wiredOpportunities({ error, data }) {
        if (data) {
            this.opportunities = data;
        } else if (error) {
            console.error(error);
        }
    }
}
```

#### **HTML（opportunityList.html）**
```html
<template>
    <lightning-card title="商談リスト">
        <ul>
            <template for:each={opportunities} for:item="opp">
                <li key={opp.Id}>{opp.Name} - {opp.StageName}</li>
            </template>
        </ul>
    </lightning-card>
</template>
```

#### **Apexコントローラー（OpportunityController.cls）**
```apex
public with sharing class OpportunityController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunities() {
        return [SELECT Id, Name, StageName FROM Opportunity LIMIT 10];
    }
}
```
**ポイント**
- `@wire` を使って Apex からデータ取得
- `lightning-card` を使いUIを構築
- `@AuraEnabled(cacheable=true)` を指定すると**キャッシュ**を有効化できる

---

### **③ Aura Components：商談の詳細表示**
**用途:**  
- LWC登場前の技術
- **LWCよりもやや重いが、古い環境で必要**
- **従来のLightningアプリと統合しやすい**

**実装例:** 商談の詳細を表示するコンポーネント  

#### **Auraコンポーネント（OpportunityDetail.cmp）**
```xml
<aura:component controller="OpportunityController">
    <aura:attribute name="opportunity" type="Opportunity"/>
    
    <lightning:card title="商談の詳細">
        <p>Name: {!v.opportunity.Name}</p>
        <p>Stage: {!v.opportunity.StageName}</p>
    </lightning:card>
</aura:component>
```

**ポイント**
- `aura:attribute` でデータを保持
- `lightning:card` でUIを作成
- `OpportunityController` を使用してデータ取得（LWCと同じApexを流用可能）

---

### **④ Apex：商談がクローズされたら通知を送るトリガー**
**用途:**  
- **データの自動処理**
- **バッチ処理**
- **トリガーでレコードの変更を検知**

**実装例:** 商談が`Closed Won`（成約）になったら取引先責任者へメール通知

#### **Apexトリガー（OpportunityTrigger.cls）**
```apex
trigger OpportunityTrigger on Opportunity (after update) {
    List<Messaging.SingleEmailMessage> emails = new List<Messaging.SingleEmailMessage>();

    for (Opportunity opp : Trigger.new) {
        if (opp.StageName == 'Closed Won') {
            Messaging.SingleEmailMessage email = new Messaging.SingleEmailMessage();
            email.setSubject('商談成約通知');
            email.setPlainTextBody(opp.Name + ' が成約しました！');
            email.setToAddresses(new List<String>{'example@example.com'});
            emails.add(email);
        }
    }
    if (!emails.isEmpty()) {
        Messaging.sendEmail(emails);
    }
}
```
**ポイント**
- `after update` で商談の更新を監視
- `Closed Won` になったら `Messaging.sendEmail` で通知を送信

---

# **3. どの技術を選ぶべき？**
| 技術 | 使う場面 |
|------|----------|
| **Visualforce** | 既存のClassic環境、PDF生成、簡単なレポート画面 |
| **LWC**（推奨） | 高速なUI、最新のLightning開発、標準画面のカスタマイズ |
| **Aura** | 旧環境のサポート、複雑なコンポーネント開発 |
| **Apex** | データ処理（トリガー・バッチ・API連携） |

---

# **まとめ**
✅ **Visualforce** → 旧UI、シンプルなカスタムページやPDF生成向け  
✅ **LWC**（推奨）→ モダンで高速、標準画面との統合が簡単  
✅ **Aura** → LWCが使えない場合や旧環境向け  
✅ **Apex** → **データ処理の要**。トリガーやバッチで活躍  

実際のSalesforce開発では **「LWC + Apex」** の組み合わせが最もよく使われます！ 🚀