experience-lwc-generate

experience-lwc-generate：Lightning Web Components 開発

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

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

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

• lwc/**/*.js、.html、.css、.js-meta.xml
• コンポーネントのひな形作成とバンドル設計
• ワイヤーサービス、Apex 連携、GraphQL 連携
• SLDS 2、ダークモード、アクセシビリティ対応
• LWC の Jest ユニットテスト

ユーザーが次の作業を行っている場合は、別のスキルに委任します。

• まず Apex コントローラーやビジネスロジックを作成する → platform-apex-generate
• LWC 画面コンポーネントではなく Flow XML を作成する → automation-flow-generate
• メタデータをデプロイする → platform-metadata-deploy

---

事前に収集する必要があるコンテキスト

次の内容を確認するか、推測します。

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

---

推奨ワークフロー

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

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

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

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

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

3. 有用な場合はアセットから始める

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

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

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

次を確認します。

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

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

次を使用します。

• コントローラー／サービスには platform-apex-generate
• デプロイには platform-metadata-deploy
• Apex 側のテスト実行には platform-apex-test-run。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 コンポーネントをプレビューできます。scripts/local-dev-preview.sh のコマンドを実行して、コンポーネント、アプリ、または Experience Cloud サイトのローカル開発セッションを開始します。

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

---

スキル間の連携

必要なもの	委任先	理由
Apex コントローラーまたはサービス	platform-apex-generate	バックエンドロジック
Flow 画面への埋め込み	automation-flow-generate	宣言的なオーケストレーション
コンポーネントバンドルのデプロイ	platform-metadata-deploy	組織への展開
サポートするメタデータ（メッセージチャネル、オブジェクト）の作成	platform-metadata-deploy	メタデータのデプロイ

---

リファレンスファイル一覧

まずはこちら

• references/component-patterns.md — コンポーネントのアーキテクチャパターンとバンドル設計
• references/slds-design-guide.md — SLDS 2 のスタイリング、ダークモード、CSS フック
• references/lwc-best-practices.md — 重要なルールとアンチパターン
• references/scoring-and-testing.md — 8 カテゴリーにわたる 165 点満点の評価基準
• references/jest-testing.md — Jest のユニットテストパターンと非同期レンダリングヘルパー
• references/slds-blueprints.json — 機械可読な SLDS コンポーネントの設計図
• references/cli-commands.md — LWC 開発用の SF CLI コマンド

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

• references/accessibility-guide.md — WCAG、ARIA、キーボードナビゲーションのパターン
• references/performance-guide.md — 遅延読み込み、デバウンス、再レンダリングの安全性
• references/state-management.md — リアクティブな状態パターンと LMS
• references/template-anti-patterns.md — 避けるべき一般的な HTML テンプレートの誤り

連携／高度な機能

• references/lms-guide.md — Lightning Message Service のパターン
• references/flow-integration-guide.md — Flow 画面コンポーネントの設計
• references/advanced-features.md — Spring '26 の機能：TypeScript、lwc:on、GraphQL のミューテーション
• references/async-notification-patterns.md — トースト、通知、非同期フロー
• references/triangle-pattern.md — 親・子・兄弟間のコミュニケーションパターン

アセットテンプレート

• assets/basic-component/basicComponent.js — ワイヤーサービス、エラー／読み込み状態、イベントのディスパッチ
• assets/datatable-component/datatableComponent.js — インライン編集に対応したデータテーブル
• assets/flow-screen-component/flowScreenComponent.js — 入力／出力プロパティを備えた Flow 画面
• assets/form-component/formComponent.js — フォームの検証と DML のパターン
• assets/graphql-component/graphqlComponent.js — カーソルベースのページネーションに対応した GraphQL ワイヤーアダプター
• assets/jest-test/componentName.test.js.example — Jest テストテンプレート（コピーして名前を変更し、.example の接尾辞を削除してください）
• assets/message-channel/lmsPublisher.js — LMS パブリッシャーのパターン
• assets/message-channel/lmsSubscriber.js — LMS サブスクライバーのパターン
• assets/modal-component/modalComponent.js — フォーカストラップと ESC キー処理を備えたモーダル
• assets/record-picker/recordPicker.js — 検索機能付きレコードピッカー
• assets/state-store/store.js — コンポーネント間の状態管理に使うリアクティブな状態ストア
• assets/typescript-component/typescriptComponent.ts — TypeScript 対応コンポーネント（Spring '26）
• assets/workspace-api/workspaceComponent.js — タブとフォーカスを管理するワークスペース API
• assets/apex-controller/LwcController.cls — @AuraEnabled(cacheable=true) のパターンを備えた Apex コントローラー

スクリプト

• scripts/local-dev-preview.sh — コンポーネント、アプリ、サイトをプレビューするローカル開発サーバーのコマンド

---

スコアガイド

スコア	意味
150+	本番環境に対応した LWC バンドル
125–149	軽微な仕上げを残すのみの優れたコンポーネント
100–124	機能するものの、レビューを推奨
< 100	大幅な改善が必要