Salesforce コンポーネント品質基準

すべての LWC、Aura コンポーネント、Visualforce ページを作成またはレビューする際に、これらのチェックを適用してください。

セクション 1 — LWC 品質基準

1.1 データアクセスパターンの選択

JavaScript コントローラコードを作成する前に、適切なデータアクセスパターンを選択してください:

ユースケース	パターン	理由
単一レコードをリアクティブに読み取る (ナビゲーション追従)	@wire(getRecord, { recordId, fields })	Lightning Data Service — キャッシュされ、リアクティブ
単一オブジェクトの標準 CRUD フォーム	<lightning-record-form> または <lightning-record-edit-form>	FLS、CRUD、アクセシビリティが組み込み
複雑なサーバークエリまたはフィルター付きリスト	@wire(apexMethodName, { param }) on a cacheable=true メソッド	キャッシングが可能。パラメータ変更時に再実行
ユーザーがトリガーするアクション、DML、またはキャッシュ不可能なサーバー呼び出し	命令形 apexMethodName(params).then(...).catch(...)	DML に必須。Wired メソッドは cacheable=true なしで @AuraEnabled にできない
クロスコンポーネント通信 (共有親がない)	Lightning Message Service (LMS)	デカップリング済み、DOM 境界を越えて動作
マルチオブジェクトグラフ関係	GraphQL @wire(gql, { query, variables })	複雑な関連データの単一ラウンドトリップ

1.2 セキュリティルール

ルール	実装方法
innerHTML に生のユーザーデータを入れない	テンプレートで {expression} バインディングを使用 — フレームワークが自動エスケープ。this.template.querySelector('.el').innerHTML = userValue を絶対に使わない
Apex @AuraEnabled メソッドが CRUD/FLS を実装	SOQL で WITH USER_MODE を使うか、明示的な Schema.sObjectType チェックを行う
コンポーネント JavaScript にハードコードされた組織固有の ID がない	クエリするか prop として渡す — ソースにレコード ID を埋め込まない
親からの @api プロパティ: 使用前に検証	親は何でも渡せる — クエリパラメータとして使う前に型と範囲を検証

1.3 SLDS 2 とスタイリング基準

• 絶対に 色をハードコードしない: color: #FF3366 → color: var(--slds-c-button-brand-color-background) または意味的な SLDS トークンを使う
• 絶対に !important で SLDS クラスをオーバーライドしない — CSS カスタムプロパティで構成する
• <lightning-*> ベースコンポーネントを使える場所では常に使う: lightning-button、lightning-input、lightning-datatable、lightning-card など
• ベースコンポーネントには組み込み SLDS 2、ダークモード、アクセシビリティが含まれる — 動作を再実装しない
• カスタム CSS を使う場合は、完了前に ライトモード と ダークモード の両方でテストする

1.4 アクセシビリティ要件 (WCAG 2.1 AA)

すべての LWC コンポーネントは、完了と見なされる前にこれらすべてをパスする必要があります:

• すべてのフォーム入力に <label> または aria-label がある — placeholder だけをラベルとして使わない
• すべてのアイコンのみボタンに alternative-text または aria-label でアクションを説明している
• すべてのインタラクティブ要素がキーボード (Tab、Enter、Space、Escape) でアクセス可能で操作可能である
• 色がステータスを伝える唯一の手段ではない — テキスト、アイコン、または aria-* 属性とペアにする
• エラーメッセージが aria-describedby 経由で入力と関連付けられている
• モーダルでのフォーカス管理が正しい — フォーカスが開くときにモーダルに移動し、閉じるときに戻る

1.5 コンポーネント通信ルール

方向	メカニズム
親 → 子	@api プロパティまたは @api メソッドの呼び出し
子 → 親	CustomEvent — this.dispatchEvent(new CustomEvent('eventname', { detail: data }))
兄弟/関連のないコンポーネント	Lightning Message Service (LMS)
使わない	document.querySelector、window.*、Pub/Sub ライブラリ

Flow スクリーンコンポーネント用:

• Flow ランタイムに到達する必要があるイベントは bubbles: true と composed: true を設定する必要があります
• Flow 変数との双方向バインディングの場合、@api value を公開する

1.6 JavaScript パフォーマンスルール

• connectedCallback に副作用なし: これは DOM 接続のたびに実行される — DML、大量計算、レンダリング状態の変更を避ける
• renderedCallback をガード: 常にブール型ガードを使用して無限レンダリングループを防ぐ
• リアクティブプロパティトラップを避ける: renderedCallback 内でリアクティブプロパティを設定すると再レンダリングが発生 — 必要な場合にのみガード付きで使う
• 大規模データセットをコンポーネント状態に保存しない — ページング化またはストリーミングで大規模な結果を処理する

1.7 Jest テスト要件

ユーザーインタラクションを処理したり、Apex データを取得するすべてのコンポーネントは Jest テストを備える必要があります:

// 最小テストカバレッジ期待値
it('renders the component with correct title', async () => { ... });
it('calls apex method and displays results', async () => { ... });  // Wire mock
it('dispatches event when button is clicked', async () => { ... });
it('shows error state when apex call fails', async () => { ... }); // Error path

@salesforce/sfdx-lwc-jest モッキングユーティリティを使用:

• wire アダプターモッキング: setImmediate + emit({ data, error })
• Apex メソッドモッキング: jest.mock('@salesforce/apex/MyClass.myMethod', ...)

---

セクション 2 — Aura コンポーネント基準

2.1 Aura と LWC の使い分け

• 新規コンポーネント: 常に LWC — ターゲットコンテキストが Aura 専用 (例: force:appPage を拡張、レガシー管理パッケージで Aura 固有のイベントを使用) でない限り
• Aura から LWC への移行: LWC を選択、コンポーネント単位で移行; LWC を Aura コンポーネント内に埋め込める

2.2 Aura セキュリティルール

• @AuraEnabled コントローラーメソッドは with sharing を宣言し、CRUD/FLS を実装する必要があります — Aura は自動的に実装 しません
• {!v.something} をアンエスケープされたユーザーデータと共に <div> アンバウンドヘルパーで使わない — <ui:outputText value="{!v.text}" /> または <c:something> を使ってエスケープする
• SOQL/Apex ロジックで使用する前に、コンポーネント属性からのすべての入力を検証する

2.3 Aura イベント設計

• コンポーネントイベント — 親子通信に、最小スコープで
• アプリケーションイベント — コンポーネントイベントがターゲットに到達できない場合のみ。アプリ全体にブロードキャストされ、パフォーマンスとメンテナンスの問題になる可能性
• ハイブリッド LWC + Aura スタック用: Lightning Message Service を使ってデカップリングする — Aura アプリケーションイベントが LWC に到達することに依存しない

---

セクション 3 — Visualforce セキュリティ基準

3.1 XSS 防止

<!-- ❌ しない — 生のユーザー入力を HTML としてレンダリング -->
<apex:outputText value="{!userInput}" escape="false" />

<!-- ✅ する — 自動エスケープオン -->
<apex:outputText value="{!userInput}" />
<!-- デフォルト escape="true" — プラットフォームが出力を HTML エンコード -->

ルール: escape="false" はユーザー制御データに対して絶対に受け入れられません。リッチテキストをレンダリングする必要がある場合、ホワイトリストを使ってサーバー側で出力前にサニタイズしてください。

3.2 CSRF 保護

すべてのポストバックアクションに <apex:form> を使用してください — プラットフォームが CSRF トークンをフォームに自動的に注入します。CSRF 保護をバイパスする生の <form method="POST"> HTML 要素を使わ ない でください。

3.3 コントローラーでの SOQL インジェクション防止

// ❌ しない
String soql = 'SELECT Id FROM Account WHERE Name = \'' + ApexPages.currentPage().getParameters().get('name') + '\'';
List<Account> results = Database.query(soql);

// ✅ する — バインド変数
String nameParam = ApexPages.currentPage().getParameters().get('name');
List<Account> results = [SELECT Id FROM Account WHERE Name = :nameParam];

3.4 ビューステート管理チェックリスト

• ビューステートが 135 KB 未満である (ブラウザー開発者ツールまたは Salesforce ビューステートタブで確認)
• サーバー側の計算にのみ使用されるフィールドが transient で宣言されている
• 大規模なコレクションが不要にポストバック全体で永続化されていない
• <apex:page> に readonly="true" が設定されている読み取り専用ページではビューステートシリアル化がスキップされる

3.5 Visualforce コントローラーの FLS/CRUD

// フィールド読み取り前
if (!Schema.sObjectType.Account.fields.Revenue__c.isAccessible()) {
    ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'You do not have access to this field.'));
    return null;
}

// DML 実行前
if (!Schema.sObjectType.Account.isDeletable()) {
    throw new System.NoAccessException();
}

標準コントローラーはバウンドフィールドの FLS を自動的に実装します。カスタムコントローラーはしません — FLS を手動で実装する必要があります。

---

クイックリファレンス — コンポーネントアンチパターンまとめ

アンチパターン	テクノロジー	リスク	修正
ユーザーデータとの innerHTML	LWC	XSS	テンプレートバインディング {expression} を使う
ハードコードされた 16 進カラー	LWC/Aura	ダークモード/SLDS 2 破損	SLDS CSS カスタムプロパティを使う
アイコンのみボタンに aria-label がない	LWC/Aura/VF	アクセシビリティ失敗	alternative-text または aria-label を追加
renderedCallback にガードがない	LWC	無限再レンダリングループ	hasRendered ブール型ガードを追加
親子通信にアプリケーションイベント	Aura	不要なブロードキャストスコープ	コンポーネントイベントを代わりに使用
ユーザーデータに escape="false"	Visualforce	XSS	削除 — デフォルトエスケープを使う
ポストバックで生の <form>	Visualforce	CSRF 脆弱性	<apex:form> を使う
カスタムコントローラーで with sharing なし	VF/Apex	データ漏洩	with sharing 宣言を追加
カスタムコントローラーで FLS チェックなし	VF/Apex	権限昇格	Schema.sObjectType チェックを追加
SOQL が URL パラメータと連結	VF/Apex	SOQL インジェクション	バインド変数を使う