※本記事は2025年10月28日に米国で公開された Vibe Code Lightning Web Components with Salesforce DX MCPの抄訳です。本記事の正式言語は英語であり、その内容および解釈については英語が優先されます。
次世代のバイブコーディングが可能になります。今年はじめ、SalesforceはSalesforce DX向けのModel Context Protocol（MCP）サーバー（英語）を公開。Dreamforceでは、さまざまな方法でLightning Webコンポーネント（LWC）の新規作成と既存コンポーネントの改良を可能にする、数々の新しいツールを発表しました。DX MCPサーバーは、AIエージェントを活用したエンタープライズ向けの統合開発環境（IDE）であるAgentforce Vibesで、デフォルトで有効化されています。Agentforce Vibesは、DX MCPサーバーにホストされる各種MCPツールを基盤としています。
機能が強化されたMCPツールは、プロンプトの作成から本番稼働に至るまで、アクセシビリティ、セキュリティ、スタイル設定、テストなどを支援します。それぞれのツールは、特定の用途に合わせたシンプルなタスクを実行するように設計されています。すでにエージェンティックIDEを利用している場合は、MCPの連携機能でSalesforceのサーバーとお客様の環境をつなげることで、最新のツールをフル活用してLWCを開発できます。
この記事では、大規模言語モデル（LLM）とSalesforceのMCPツールの連携によって実行できる、3つのタスクを紹介します。
- Figmaで作成したデザインからLightning Webコンポーネントを作成する
- 既存のコンポーネントを改良する
- AuraコンポーネントをLWCに変換する
これらのタスクでは、20種以上あるコンポーネント関連のツール（英語）の一部を使用します。この記事で取り上げるツールには、aura-expertsとlwc-expertsのツールセットが必要です（現時点では、Agentforce Vibes拡張機能のa4d-lwc-rules-no-edit.mdグローバルルールを有効にする必要があります）。今後、新しいツールがリリースされると、設定手順が変更される可能性があるため、DX MCPツールの構成（英語）については、常に公式ドキュメントを参照してください。
Figmaで作成したデザインをLWCに変換する
FigmaからLWCへの変換ツールを使うと、わずか数分で、デザインから動作可能なドラフトを作成できます。Figmaでコンポーネントデザインへのリンクをコピーし、LLMでLWCを生成します。その後、Salesforce Lightningデザインシステム（SLDS）（英語）ツールで、コンポーネントとCSSスタイルシートをレビューできます。
LLMにデザインのリンクを入力するには、Figmaで右クリックメニューから［ Copy link to selection ］を選び、Figmaのダイアグラムから、プロンプトで参照する部分を共有します。
次にAgentforce Vibesに移動し、コピーしたFigmaのリンクを以下のようなプロンプトに追加します。
1Generate an LWC component from this Figma frame:
2
3日本語訳) このFigmaフレームからLWCコンポーネントを生成してください。生成されたマークアップがAgentforce VibesのUIに表示されます（下のスクリーンショットを参照）。左側のペインには、タスクが完了したことを示すメッセージとサマリーが表示されます。
Agentforceが、Figmaで作成したデザインをもとにコンテンツと構造を作成します。さらにプロンプトを続け、スタイルを再確認することも可能です。
1Make sure this component follows SLDS styling best practices.
2
3日本語訳) このコンポーネントが、SLDSスタイル設定のベストプラクティスに従っていることを確認してください。このツールは、Figmaデザインから生成されたCSSの重複をクリーンアップしたり、不要なコメントを削除したりするタスクを実行します。
結果には、有効になっているツール、使用するLLM、生成AI固有のランダム性など、さまざまな要素が影響します。タスクごとに効果的な構成やLLMモデルが異なるため、期待どおりの結果が得られない場合は、適切なツールを使っていることを確認するか、別のモデルを試してみてください。また、生成されたコードを入念にレビューして、求めている水準を満たしているかどうかを確認してください。
AIの専門的なアドバイスを参考に、コンポーネントを改良する
次に、Agentforce Vibesではなく、Salesforce DX MCPサーバーを導入・構成済みのサードパーティ製エージェンティックIDE、Cursorを使う例を紹介します。
最初に、次のプロンプトを使って、コンポーネントのアクセシビリティをチェックします。
1Fix any accessibility bugs you see in this LWC
2
3日本語訳) このLWCに存在するアクセシビリティの問題をすべて修正してください。Cursorがリクエストを理解し、DX MCPサーバーが提供するツールを利用してコンポーネントを更新し、検出されたアクセシビリティの問題を解消します。下のスクリーンショットでは、Cursorでレビューが完了し、HTMLテンプレートの修正点とLLMからの最終的な出力が表示されています。
LWCのセキュリティレビューも実行できます。ただし、LLMは多くのタスクを連続で実行すると混乱することがあるため、この例のアクセシビリティとセキュリティレビューのようにトピックが異なる場合は、新しい会話を開始するとよいでしょう。
ヒント – 一般的なルールとして、セキュリティはすべてのレイヤー（フロントエンドとバックエンド）に関わるため、Apexコントローラーのコードも確認してください。その際、MCPツールのSalesforceコードアナライザー（英語）が役立ちます。
1Review this LWC for security issues and fix any you see.
2
3日本語訳) このLWCをセキュリティの観点からレビューし、問題があれば修正してください。コンポーネントをさらに改良するために、単独で使えるプロンプトをいくつか紹介します。
1* I've fixed accessibility and security issues in this component. What else would enhance this component?
2* Create a jest test for my component
3* Review my component for performance issues
4
5日本語訳)
6このコンポーネントのアクセシビリティとセキュリティの問題を修正しました。ほかに改善できる点はありますか？
7このコンポーネントのJestテストを作成してください。
8このコンポーネントにパフォーマンスの問題がないか確認してください。AuraコンポーネントをLWCに変換する
レガシーのAuraコンポーネントを新しいLWCに移行することもできます。この移行にはセキュリティやパフォーマンス面で利点がありますが、MCPサーバーがないと、かなり面倒な作業が必要になります。
AuraコンポーネントをLightning Webコンポーネントに変換するプロンプトを紹介します。
1Convert this Aura component into LWC using the official Aura to LWC migration assistant. Handle all the technical details for me and follow LWC best practices. Once the migration is done, keep the draft blueprint and all associated metadata files. Finally, provide a scorecard on how the conversion went.
2
3日本語訳) 公式のAuraからLWCへの移行ツールを使って、AuraコンポーネントをLWCに変換してください。細かい技術的な作業をすべて処理し、LWCのベストプラクティスに従ってください。移行が完了したら、ドラフトのブループリントと関連するすべてのメタデータファイルを保持してください。最後に、変換の結果をスコアカードで提示してください。次のスクリーンショットでは、生成された4つのファイルが緑色で強調表示され、エディターでJSファイルが開かれています。冒頭のサマリーコメントでは、このコンポーネントの公開APIと、コンポーネントが発生させるイベントが簡潔に記されています。
このAIエージェントは、HTML、JS、CSS、js-meta.xmlの各ファイルのほか、ツールがコンポーネントを記述するための複数のyamlファイルを作成します。変換の結果を示すスコアカードの作成をリクエストしたため、結果にスコアが付けられ、出力に表示されます。以下は、その解析の一部です。
1Conversion scorecard
2- Functional parity: 100%
3 - Aura event backButtonClick mapped to LWC CustomEvent('back) with identical intent.
4 - Visibility and disabled behavior preserved.
5 - Label and ariaLabel carried forward with same defaults.
6- UI/SLDS alignment: 100%
7 - SLDS classes slds-button, slds-button_neutral, slds-button__icon(_left) used.
8 - Icon utility:back preserved with lightning-icon base component.
9...
10
11日本語訳)
12変換スコアカード
13- 機能の同一性: 100%
14 - AuraイベントのbackButtonClickを、同じ意図でLWCのCustomEvent('back')にマッピングしました。
15 - 可視性と無効化の挙動を保持しました。
16 - labelおよびariaLabelは、既定値を変えずに移行しました。
17- UI/SLDSの整合性: 100%
18 - SLDSクラスのslds-button、slds-button_neutral、slds-button__icon(_left)が使用されています。
19 - utility:backアイコンは、lightning-iconベースコンポーネントによって維持されています。すべての問題を修正したら、新しいコンポーネントをデプロイできるようになります。
まとめ
AuraとLWCのツールセットだけでも20種以上のDX MCPサーバー用ツールがあり、ツールセット全体（英語）では60以上のツールが用意されています。DX MCPサーバーは現在ベータ版ですが、この記事で紹介したツールはすべて正式リリース済みです。ただし、設定を有効にする必要があります。正式リリースされていないツールも含まれるAuraとLWCツールの完全なリストは、LWC開発者ガイド（英語）で確認できます。
信頼できるコンテキストでLLMを調整するエンタープライズグレードのツールと、Agentforce Vibesで提供されるSalesforceのセキュアなモデルが、頼れるアシスタントとして開発をサポートします。このアシスタントを活用すれば、デザインからクリーンなコードを生成し、コンポーネントを正確に構築・更新し、アクセシビリティなどの複雑な要件に対処できます。そして古いコードを刷新し、驚異的なスピードで成果を実現します。ベストプラクティスを押さえ、大規模な作業をわずか数時間で完了して、一目置かれること間違いなしです。
これからは、プロンプトだけでコンポーネントを作成できます。ぜひ、この記事で紹介した強力なAIツールを試して、その威力を実感してください。
リソース
- ブログ記事 – Agentforce Vibesでイノベーションを推進 – エンタープライズ向けバイブコーディング
- ブログ記事 – Salesforce DX MCPで開発者向けツールをレベルアップ（英語）
- Salesforce DX開発者ガイド – Salesforce DX MCP サーバーのインストールと構成（ベータ版）（英語）
- GitHub – salesforcecli/mcp serverのソースコード（英語）
- GitHub – forcedotcom/mcp Discussion Forum
- LWC開発者ガイド – LWCおよびAura MCPツールの一覧（英語）
執筆者について
Adam Reineke は、Salesforceのシニアソフトウェア開発者。UIプラットフォームチームに所属し、AIを使ったLightning Webコンポーネントの作成と、このタスクを実行するLLMの能力評価に取り組んでいます。AdamのLinkedInプロフィールはこちら。
Seth Tager は、Salesforceのプリンシパルソフトウェア開発者。これまでSandbox、Apex、カスタムスキーマ、AIアプリ開発に携わり、現在はドキュメントをLLMの学習ソースに変換する手法を研究しています。
