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マインドセットを使用します:

• プロトタイプ (prototype)
• 適切なデータソースを統合 (integrate the right data source)
• コンポーネント境界を構成 (compose component boundaries)
• インタラクションモデルを定義 (define interaction model)
• プラットフォームライブラリを使用 (use platform libraries)
• 実行を最適化 (optimize execution)
• セキュリティを強制 (enforce security)

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 デプロイメントの場合
• sf-testing Apexサイドテストループのみ、Jestではありません

---

高シグナルルール

• コントロールを再発明するよりもプラットフォームベースコンポーネントを優先する
• リードオンリーユースケースには@wireを使用し、明示的なアクションとDMLパスには命令型呼び出しを使用する
• アクセス不可能なカスタムUIを導入しない
• ハードコードされた色を避ける; SLDS 2互換のスタイリングフック / 変数を使用する
• renderedCallback()での再レンダリングループを回避する
• コンポーネント通信パターンを明示的で最小限に保つ

---

出力形式

完了時に、この順序で報告します:

1. 作成または更新されたコンポーネント
2. 選択されたデータアクセスパターン
3. 変更されたファイル
4. アクセシビリティ / スタイリング / テストノート
5. 次の実装またはデプロイステップ

提案形式:

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

---

ローカル開発サーバー

デプロイメント不要で、ホットリロード付きでLWCコンポーネントをローカルでプレビューします:

# LWCコンポーネントを単独でプレビュー
sf lightning dev component --target-org <alias>

# Lightning Experienceアプリをローカルでプレビュー
sf lightning dev app --target-org <alias>

# Experience Cloudサイトをローカルでプレビュー
sf lightning dev site --target-org <alias>

現在のSF CLIリリースでは、これらのLocal Devコマンドは初回実行時にジャストインタイムでインストールされます。これらは長時間実行されるプロセスで、ライブプレビュー付きでブラウザを開きます。.js、.html、.cssファイルへの変更は即座に自動リロードされます。データとApex呼び出しのためのアクティブなorg接続が必要です。

---

クロススキル統合

必要性	委譲先	理由
Apexコントローラまたはサービス	sf-apex	バックエンドロジック
Flow画面に埋め込み	sf-flow	宣言型オーケストレーション
コンポーネントバンドルをデプロイ	sf-deploy	org展開
メッセージチャネルのようなメタデータを作成	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	大幅な改善が必要