本記事では、Creative Content Lab Tokyo（クリエイティブコンテンツラボトウキョウ）が作成したSalesforceの開発コーディング規約（Lightning Web Component）のテンプレートをご提供しております。
モダンなSalesforce開発において、Lightning Web Component（LWC）は欠かせない技術要素となっています。しかし、多くの開発チームが「どのようなコーディング規約を設ければよいのか」「チーム全体で一貫したコードスタイルを維持するにはどうすればよいのか」といった課題を抱えています。
本記事では、SalesforceのApexコーディング規約の考え方を参考にしながら、LWC開発における実践的なコーディング規約の策定と活用方法について詳しく解説します。品質の高いLWCアプリケーションを開発するために、ぜひ本ガイドを参考にして、あなたのプロジェクトに最適なコーディング規約を構築してください。
本記事では、このテンプレートの特徴と効果的な活用方法について詳しく解説します。
なぜコーディング規約が重要なのか
1. フロントエンド開発の複雑性への対応
LWC開発では、JavaScript、HTML、CSS、そしてSalesforceのメタデータが複雑に絡み合います。統一されたコーディング規約がないと、以下のような問題が発生します：
- コンポーネント間でのスタイリングの不整合
- JavaScript のパフォーマンスの劣化
- コンポーネントの再利用性の低下
- デバッグの困難さ
2. Salesforceプラットフォーム特有の制約
LWC開発では、一般的なWebフロントエンド開発とは異なる独特の制約があります：
- Locker Service によるセキュリティ制約
- Lightning Data Service の効率的な活用
- イベント伝播とコンポーネント間通信
- レスポンシブデザインとLightning Design System（SLDS）の準拠
3. 長期保守性の確保
LWCコンポーネントは、Salesforceの組織内で長期間にわたって使用されます。初期開発から数年後の機能拡張や修正を考慮した、保守しやすいコード構造を保つことが重要です。
1.テーラリングガイド
１．目次サンプル
目次
1 はじめに
1.1 本書の目的 7
1.1.1 利用者 7
1.2 記号 7
1.2.1 本書で使用する記号についての説明 7
1.3 用語の定義 7
1.3.1 本書で使用する記号についての説明 7
2 基本方針 8
2.1 可読性の優先 8
2.2 保守性の確保 8
2.3 Lightning固有の考慮事項 8
3 命名規則 8
3.1 コンポーネント名 8
3.2 メソッド名 9
3.3 定数名 10
4 ファイル構造とフォーマット 11
4.1 ファイル構成 11
4.2 インデント 11
4.3 行の長さ 12
5 Javascript設計 13
5.1 クラス構造の順序 13
5.2 プロパティ設計 15
6 HTMLテンプレート設計 17
6.1 テンプレート構造 17
6.2 イベントハンドリング 18
7 CSSスタイル設計 21
7.1 SLDS準拠 21
7.2 CSSカスタムプロパティ 22
8 データアクセスとAPIコール 22
8.1 Lightning Data Service (LDS) 22
8.2 Apexメソッド呼び出し 24
9 イベント設計 25
9.1 カスタムイベント 25
9.2 プラットフォームイベント 27
10 テスト設計 28
10.1 Jestテスト 28
10.2 テストデータファクトリ 31
11 セキュリティとベストプラクティス 33
11.1 セキュリティ考慮事項 33
11.2 パフォーマンス最適化 34
12 国際化対応 36
12.1 カスタムラベル使用 36
12.2 日付・通貨・数値フォーマット 38
13 エラーハンドリング 40
13.1 統一的なエラーハンドリング 40
13.2 バリデーションエラー 43
14 デバッグとトラブルシューティング 45
14.1 ログ出力 45
14.2 パフォーマンス監視 46
15 コンポーネント設計パターン 48
15.1 コンポーネント間通信 48
15.2 コンポーネント間通信 50
16 メタデータ設計 53
16.1 コンポーネントメタデータ 53
17 運用保守 55
17.1 コードレビューチェックリスト 55
２.基本方針（可読性・保守性の重視）
テンプレートでは、「可読性の優先」「保守性の確保」「Salesforce固有の考慮事項」の3つを基本方針として掲げています。これらの方針は、長期的な開発・運用を見据えた重要な指針となります。
可読性の優先
- コードは書く時間よりも読む時間の方が長いことを念頭に置く
- 自己説明的なコードを心がける
- 適切なコメントで意図を明確にする
保守性の確保
- 単一責任原則に従ったコンポーネント設計
- 疎結合と高凝集を実現する構造
- 将来の変更に対応しやすい設計
パフォーマンスの重視
- 不要な再レンダリングを避ける
- 効率的なデータフェッチ
- 適切なライフサイクルフックの活用
３.命名規則の統一
3.1 コンポーネント名
規則:
• kebab-case（小文字、単語間はハイフン）
• 意味のある名前を使用
• 業務領域を表現する接頭辞を付ける
3.2 メソッド名
規則:
• camelCase（最初は小文字、以降の単語は大文字開始）
• 意味のある名前を使用
• Boolean型はis、has、canで開始
3.3 定数名
規則:
• UPPER_SNAKE_CASE（全て大文字、単語間はアンダースコア）
• 意味を明確に表現
4.ファイル構造とフォーマット
4.1 ファイル構成
my-component/
├── my-component.js // Javascript ロジック
├── my-component.html // HTML テンプレート
├── my-component.css // CSS スタイル
├── my-component.js-meta.xml // メタデータ
└── __tests__/
└── my-component.test.js // テストファイル
4.2 インデント
規則:
- 2スペースインデント（タブ文字は使用しない）
- 一貫したインデントレベルを維持
4.3 行の長さ
規則:
- 1行120文字以内を推奨
- 長い行は適切な位置で改行
5.Javascript設計
クラス構造体の順序、ﾌﾟﾛﾊﾟﾃｨ設計の規則と例を記述しています。
6.HTMLテンプレート設計
テンプレート構造、イベントハンドリングについての規約と例文について解説しています。
7.CSSスタイル設計
CSSスタイル設計のSLDS準拠について、CSSカスタムプロパティの利用方法について解説しています。
8 データアクセスとAPIコール
Lightning Data ServiceやApexメソッドの呼び出しに関する規則について解説しています。
8.1 Lightning Data Service (LDS)
規則:
• 単一レコード操作にはLDSを優先的に使用
• @wireでリアクティブなデータバインディング
• エラーハンドリングを適切に実装
8.2 Apexメソッド呼び出し
規則:
• @wireで自動データバインディング
• imperative callで手動データ取得
• 適切なエラーハンドリング
9.イベント設計
カスタムイベント、プラットフォームイベントについて解説
10.テスト設計
Jestテスト、テストデータファクトリについて解説
11.セキュリティとベストプラクティス
11.1 セキュリティ考慮事項
規則:
• ユーザー入力は常にサニタイズ
• lightning-formatted-textでXSS対策
• CRUD/FLS権限を考慮
その他
テンプレートを参照ください。
テンプレートの効果的な活用方法
1. プロジェクト開始時の規約策定
新しいSalesforceプロジェクトを開始する際、このテンプレートをベースとして、プロジェクト固有の要件に合わせてカスタマイズすることで、短時間で実用的なコーディング規約を策定できます。
活用手順：
- テンプレートをダウンロードし、開発チーム全体で内容を確認
- プロジェクトの特性に応じて、必要な項目を追加・修正
- チーム内での合意形成とドキュメント化
2. 既存プロジェクトの品質改善
既に進行中のプロジェクトでも、段階的にコーディング規約を導入することで品質向上を図ることができます。
段階的導入のアプローチ：
- 第1段階: 新規開発コードから規約適用開始
- 第2段階: 既存コードの修正時に規約に合わせてリファクタリング
- 第3段階: 重要なモジュールから順次全面的な規約適用
3. コードレビューの効率化
テンプレートに含まれるチェックリストを活用することで、コードレビューの観点が明確になり、見落としを防ぐことができます。
4. 新人教育・オンボーディング
新しくチームに参加する開発者に対して、このテンプレートを教育資料として使用することで、Salesforce開発のベストプラクティスを効率的に伝えることができます。
実装時の注意点とコツ
段階的な導入を心がける
すべての規約を一度に導入しようとすると、開発チームに大きな負担をかけてしまいます。重要度の高い項目から順次導入し、チーム全体が慣れてから次の項目に進むことが重要です。
ツールを活用した自動化
可能な限り、IDE（Salesforce CLI、VS Code）の設定やCI/CDパイプラインを活用して、規約チェックを自動化しましょう。手動でのチェックに頼りすぎると、継続が困難になります。
定期的な見直しと改善
プロジェクトの進行に伴い、新たな課題や改善点が見つかることがあります。定期的に規約を見直し、チームの成長とプロジェクトの変化に応じてアップデートしていくことが大切です。
テンプレートに含まれる実践的なコード例
このテンプレートの大きな特徴の一つは、豊富な実装例が含まれていることです。抽象的な説明だけでなく、具体的なコード例を通じて「良い例」と「悪い例」を明示しているため、開発者が実際のコーディング時に迷うことなく適用できます。
SLDSの活用例
(css)
/* ✅ 良い例 - SLDS準拠 */
.account-container {
padding: var(--lwc-spacing-medium);
}
.header {
margin-bottom: var(--lwc-spacing-large);
}
.content {
display: flex;
flex-direction: column;
gap: var(--lwc-spacing-medium);
}
.empty-state {
text-align: center;
padding: var(--lwc-spacing-x-large);
color: var(--lwc-color-text-weak);
}
.error-message {
color: var(--lwc-color-text-error);
padding: var(--lwc-spacing-small);
border: 1px solid var(--lwc-color-border-error);
border-radius: var(--lwc-border-radius-medium);
background-color: var(--lwc-color-background-error);
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.content {
padding: var(--lwc-spacing-small);
}
}
継続的な品質向上のために
コーディング規約の導入は、ゴールではなくスタートラインです。継続的に品質を向上させるために、以下の取り組みを推奨します：
定期的なコードレビュー会の実施
チーム全体でコードレビューを行う時間を定期的に設け、規約の適用状況や新たな課題について議論します。
メトリクス測定と改善
テストカバレッジ、複雑度、規約違反数などのメトリクスを測定し、定量的な改善を図ります。
知識共有とベストプラクティスの蓄積
チーム内で発見されたベストプラクティスを規約に反映し、組織の知見として蓄積していきます。
まとめ
今回公開したSalesforce Apexコーディング規約テンプレートは、実際の開発現場での経験を基に作成された実践的なドキュメントです。このテンプレートを活用することで、開発チームは以下のメリットを得ることができます：
- 開発効率の向上: 統一されたコーディングスタイルにより、コードレビューや保守作業が効率化
- 品質の向上: Salesforce特有の制約を考慮したベストプラクティスにより、バグの削減と性能向上を実現
- チーム力の強化: 共通の規約により、チーム内でのコミュニケーションと協力が促進
- スケーラビリティの確保: 将来の機能拡張や保守作業に対応しやすいコード構造の実現
Salesforce開発の品質向上を目指すすべてのチームに、このテンプレートを積極的に活用していただき、より良いシステム開発を実現していただければと思います。
資料のダウンロード
テンプレートのダウンロードは、Creative Content Lab Tokyoの公式サイトから無料で行えます。ぜひ、あなたのプロジェクトでもご活用ください。
資料のダウンロードおよびご利用に関しては、本サイトのコンテンツ利用規約に同意される場合のみ利用可能となります。
一般公開資料
開発コーディング規約のダウンロード
※クリックして資料のダウンロードが開始されるまで少し時間がかかる場合がありますので、そのままお待ちください。
もしダウンロードが開始されない場合、ブラウザでポップアップブロックされている可能性があるのでご確認ください。
最後に
