sf-lwc

sf-lwc：Lightning Web Components 開発

ユーザーが Lightning Web Components を必要とする場合に、このスキルを使用します。対象は、LWC バンドル、wire パターン、Apex／GraphQL 連携、SLDS 2 のスタイリング、アクセシビリティ、パフォーマンス改善、Jest 単体テストです。

このスキルが担当するタスク

次の作業には sf-lwc を使用します。

• lwc/**/*.js、.html、.css、.js-meta.xml
• コンポーネントのスキャフォールディングとバンドル設計
• wire サービス、Apex 連携、GraphQL 連携
• SLDS 2、ダークモード、アクセシビリティ対応
• LWC の Jest 単体テスト

次の場合は、別のスキルに委任します。

• Apex コントローラーやビジネスロジックを先に作成する場合 → sf-apex
• LWC 画面コンポーネントではなく、Flow XML を作成する場合 → sf-flow
• メタデータをデプロイする場合 → sf-deploy

---

最初に収集する必要があるコンテキスト

次の内容を確認するか、推測してください。

• コンポーネントの目的と対象となる表示場所
• データソース：LDS、Apex、GraphQL、LMS、または Apex 経由の外部システム
• テストが必要かどうか
• Flow、App Builder、Experience Cloud、ダッシュボードの各コンテキストでコンポーネントを動作させる必要があるか
• アクセシビリティとスタイリングに関する要件

---

推奨ワークフロー

1. 適切なアーキテクチャを選択する

PICKLES の考え方を活用します。

• プロトタイプを作成する
• 適切なデータソースを連携する
• コンポーネントの境界を組み合わせる
• インタラクションモデルを定義する
• プラットフォームライブラリを使用する
• 実行を最適化する
• セキュリティを徹底する

2. 適切なデータアクセスパターンを選択する

要件	デフォルトのパターン
単一レコードの UI	LDS / getRecord
シンプルな CRUD フォーム	基本のレコードフォームコンポーネント
複雑なサーバークエリ	Apex @AuraEnabled(cacheable=true)
関連するグラフデータ	GraphQL wire アダプター
DOM をまたぐ通信	Lightning Message Service

3. 有用な場合はアセットを活用する

次の用途には、提供されているアセットを使用します。

• 基本的なコンポーネントバンドル
• データテーブル
• モーダルのパターン
• Flow 画面コンポーネント
• GraphQL コンポーネント
• LMS メッセージチャネル
• Jest テスト
• TypeScript 対応コンポーネント

4. フロントエンドの品質を検証する

次の項目を確認します。

• アクセシビリティ
• SLDS 2／ダークモードへの準拠
• イベントのコントラクト
• パフォーマンス／安全な再レンダリング
• 必要に応じた Jest のカバレッジ

5. 関連するバックエンド作業やデプロイ作業を引き継ぐ

次を使用します。

• コントローラー／サービスには sf-apex
• デプロイには sf-deploy
• Apex 側のテストサイクルに限り sf-testing（Jest には使用しません）

---

重要度の高いルール

• コントロールを独自に作り直すより、プラットフォームの基本コンポーネントを優先します
• リアクティブな読み取り専用のユースケースには @wire を使用し、明示的なアクションや DML パスには命令的な呼び出しを使用します
• アクセシビリティに配慮されていないカスタム UI は導入しません
• 色のハードコードを避け、SLDS 2 に対応したスタイリングフック／変数を使用します
• renderedCallback() での再レンダリングループを避けます
• コンポーネント間の通信パターンは明確かつ最小限に保ちます

---

出力形式

作業を終える際は、次の順番で報告します。

1. 作成または更新したコンポーネント
2. 選択したデータアクセスパターン
3. 変更したファイル
4. アクセシビリティ／スタイリング／テストに関する注意事項
5. 次の実装またはデプロイの手順

推奨形式：

LWC work: <summary>
Pattern: <wire / apex / graphql / lms / flow-screen>
Files: <paths>
Quality: <a11y, SLDS2, dark mode, Jest>
Next step: <deploy, add controller, or run tests>

---

ローカル開発サーバー

デプロイせずに、ホットリロードで LWC コンポーネントをプレビューできます。

# Preview LWC components in isolation
sf lightning dev component --target-org <alias>

# Preview a Lightning Experience app locally
sf lightning dev app --target-org <alias>

# Preview an Experience Cloud site locally
sf lightning dev site --target-org <alias>

現在の SF CLI リリースでは、これらの Local Dev コマンドは初回実行時に必要に応じてインストールされます。コマンドは長時間実行されるプロセスで、ライブプレビューを表示するブラウザーを開きます。.js、.html、.css ファイルの変更はすぐに自動で再読み込みされます。データと Apex の呼び出しには、有効な組織への接続が必要です。

---

スキル間の連携

要件	委任先	理由
Apex コントローラーまたはサービス	sf-apex	バックエンドロジック
Flow 画面への埋め込み	sf-flow	宣言型オーケストレーション
コンポーネントバンドルのデプロイ	sf-deploy	組織への展開
メッセージチャネルなどのメタデータの作成	sf-metadata	関連メタデータ

---

リファレンスマップ

はじめに

• references/component-patterns.md
• references/slds-design-guide.md
• references/lwc-best-practices.md
• references/scoring-and-testing.md
• references/jest-testing.md

アクセシビリティ / パフォーマンス / 状態

• references/accessibility-guide.md
• references/performance-guide.md
• references/state-management.md
• references/template-anti-patterns.md

統合 / 高度な機能

• references/lms-guide.md
• references/flow-integration-guide.md
• references/advanced-features.md
• references/async-notification-patterns.md
• references/triangle-pattern.md
• assets/

---

スコアガイド

スコア	意味
150+	本番環境で使用可能な LWC バンドル
125–149	わずかな調整が残るのみの堅牢なコンポーネント
100–124	機能はするがレビューを推奨
< 100	大幅な改善が必要