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）
<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）
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）
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）
<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）
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）
<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）
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」 の組み合わせが最もよく使われます！ 🚀