generating-lwc-components

generating-lwc-components: Lightning Web Components の開発

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

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

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

• lwc/**/*.js、.html、.css、.js-meta.xml
• コンポーネントのスキャフォールディングとバンドル設計
• ワイヤーサービス、Apex 統合、GraphQL 統合
• SLDS 2、ダークモード、アクセシビリティ関連の作業
• LWC の Jest ユニットテスト

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

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

---

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

次の内容を尋ねるか、推測します。

• コンポーネントの目的と対象となる利用環境
• データソース：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. バックエンドやデプロイの関連作業を引き継ぐ

次を使用します。

• コントローラー／サービスには generating-apex
• デプロイには deploying-metadata
• running-apex-tests は Apex 側のテストサイクルにのみ使用し、Jest には使用しないでください → running-apex-tests

---

特に重要なルール

• コントロールを独自に作り直すより、プラットフォームの基本コンポーネントを優先する
• リアクティブな読み取り専用のユースケースには @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 のコールアウトを利用するには、アクティブな org 接続が必要です。

---

スキル間の連携

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

---

参照ファイル一覧

まずはこちら

• 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	大幅な改善が必要