【Salesforce】Agentforce Vibesを使ったコード生成

はじめに

こんにちは、サービスプラットフォーム事業部の辰己です。

Salesforceは最近、Agentforce360という大規模なアップデートが行われました。

今回は、その中で提供が始まったサービスの1つである「Agentforce Vibes」を用いて計300ステップほどの簡単なLWC、Apexを実装しました！

Agentforce Vibesとは？

概要

Agentforce Vibesとは、Agentforceにより提供される開発者向けサービスの1つです。

こちらを使用することで、開発者はプログラムを書かず、エージェントに対話形式でLWCやApexを実装させることができます！

Agentforce for Developerとの違いは？

私は以前、こちらの記事でAgentforce for Developerに関する検証も行いました。

※Agentforceに関する概要についても、こちらでは割愛するので過去の記事をご覧ください！

どちらも開発者向けに提供されるAIコーディングサービスという点では変わりませんが、Agentforce for Developerは、あくまでプログラムの出力まで可能であり、その後のデプロイは手動で対応する必要がありました。

これに対し、Agentforce Vibesはデプロイまで可能であり、デプロイ時にエラーが発生した場合も自動で解釈しつつ対応してくれるようになりました。

また、必要に応じてカスタムオブジェクト等のメタデータの作成、デプロイまで行ってくれます！

このように、Agentforce for Developerの機能をより拡張させたものがAgentforce Vibesです！

機能一覧

前提として、Agentforce Vibesは2つのモードが存在し、用途にとって使い分けることが可能です。

Planモード：設計方針や構成の提案など

Actモード：実際のコーディングなど

提供される機能は次の通りです。

• コード生成/修正（Apex、LWC、テストクラスなど）
• MCPのサポート
• 変更をロールバックするチェックポイント
• エージェントによる開発をカスタマイズできるルールの設定
• コード分析（セキュリティなど）
• 自然言語によるデプロイ

こう見ると、VSCodeのClainなどに非常に似てますね。

今回は、Agentforce Vibesを実際に使って、LWCとApexの実装を行っていきます！

準備・検証内容

筆者の使用した環境・ソフト

Agentforce for Developerを検証した際は、Salesforce CLIを利用して環境と接続し、VSCode上で実施しましたが、今回はDeveloper環境上で直接起動できるブラウザ版で実施します。

よって、環境の取得以外で必要な準備はありません！

※公式サイトから取得可能ですが、通常のDeveloper環境とはリンクが異なるため注意してください。

検証内容

今回は、Agentforce Vibesを利用して、取引先画面に配置するLWCと、バックエンド用のApexを同時に実装させていきます。内容は次の通りです。細かい詳細は、後続で実際にエージェントに送信したプロンプトを記載していますので、そちらをご覧ください。

LWC

取引先責任者のレコードを登録するコンポーネント

• 取引先のLightningページ上で利用する
• 入力コンポーネントや選択リストを複数配置
• 登録ボタンを配置し、押下された際に入力チェックを呼び出し
• 入力チェックが問題なければ、入力された内容で取引先責任者にレコードを登録

Apex

次のメソッドを実装する

• 入力チェック（必須・形式など）
• 取引先責任者の登録

検証観点

• 入力コンポーネント、選択リストが正しく実装されるか
• 選択リスト値は、カスタム項目と同じ値に自動でしてくれるか
• 指定したレイアウトを考慮して実装されるか
• 指定した各入力チェックの内容と、エラーメッセージの通りに実装されるか
• 入力した内容で取引先責任者レコードを正しく登録できるか

検証

実装～デプロイ

それでは実際に検証していきましょう。

①プロンプト送信

Agentforce Vibesに、下記プロンプトを送信します。

プロンプト（原文）

次の仕様を満たすLWC、Apexを実装してください。
■LWC（createContact）
このLWCは取引先責任者の登録画面です。
取引先のLightningページ上に配置して使用します
下記コンポーネントを配置してください。
選択リストは同じ名称でSalesforce上に項目が存在するため、同じ選択リスト値としてください。
①姓（入力コンポーネント、必須項目）
②名（入力コンポーネント、必須項目）
③電話（入力コンポーネント）
④自宅電話（入力コンポーネント）
⑤メールアドレス（入力コンポーネント）
⑥リードソース（入力コンポーネント）
コンポーネントの配置は2項目ずつ横並びとし、2列表示にしてください。
入力コンポーネント下に「登録」ボタンを配置してください。
「登録」ボタンが押下された場合、Apexの入力チェック処理（checkInput）を呼び出し、1件でもエラーがある場合は対象のコンポーネント下に赤文字でエラーメッセージを表示してください。エラーがない場合は、アラートで登録確認を行います。
アラートは「入力した情報で登録しますか？」とメッセージを表示してください。
上記アラートで「OK」ボタンが押下された場合、Apexの登録処理（insertContact）を実行し、アラートで登録完了メッセージを表示します。

■Apex（CreateContactHandler）
このApexはLWC「createContact」のバックエンド処理を実装するクラスです。
下記2点のメソッドを作成してください。
①checkInput
LWCの「登録」ボタンが押下された際に実行します。
引数はLWC側に実装する6つのコンポーネントです。
戻り値はMapとし、keyにエラーが発生した項目名、valueにエラーメッセージをセットしてください。
初期値として、keyを「hasError」とし、valueに「False」をセットしてください。
下記入力チェックを実施してください。
下記5点の内、1件でも該当する場合、key「hasError」の値を「True」に更新してください。
姓が未入力の場合：「姓は必須です」を返す
名が未入力の場合：「名は必須です」を返す
電話に数値以外の値が入っている場合：「電話は数値のみ入力してください」
自宅電話に数値以外の値が入っている場合：「自宅電話は数値のみ入力してください」
メールアドレスの形式がおかしい場合：「メールアドレスは正しい形式で入力してください」
※エラーがなければMapにはhasError「False」の値のみがセットされ、1件でもエラーがある場合はhasError「True」に加え、エラー内容がセットされます。

②insertContact
入力チェックが問題なかった際にLWC上に表示するアラートの「OK」ボタンが押下された場合実行します。
引数はLWC側に実装する6つのコンポーネントです。
引数の値で取引先（Contact）レコードをinsertします。
マッピングは下記のとおりです。
①姓（入力コンポーネント、必須項目）→ LastName
②名（入力コンポーネント、必須項目）→ FirstName
③電話（入力コンポーネント）→ Phone
④自宅電話（入力コンポーネント）→ HomePhone
⑤メールアドレス（入力コンポーネント）→ Email
⑥リードソース（入力コンポーネント）→ LeadSource

画像では、自動承認に全てチェックが入っていますが、Editも許可する場合、ファイルなどの保存も自動で行ってしまい、どんどん勝手に進んでしまうため注意してください！出力内容を確認してから保存したい場合はチェックを外しておくことをお勧めします！

②仕様確認

プロンプトを送信すると、エージェントから場合によって仕様確認が入ります。

この場合、エージェントが選択肢を提供してくれるので、その中から選択するか、プロンプトで直接回答することができます。

今回は、次の2点に関して確認が入りました。

• LWC上に配置する選択リスト「リードソース」は標準項目の「Contact.LeadSource」を指しているか
• 取引先責任者をinsertする際に、開いている取引先と紐付ける形で登録するか

取引先のLightningページに配置することを考慮して、紐付けに関する確認まで行ってくれるのは驚きました。

せっかくなので、紐付けるように提供された選択肢の一番上を選びます。

③実装

仕様が固まったので実際のコーディングが始まります。

自動承認のEditにチェックを入れていない場合、画像のように1ファイルごとに出力されたタイミングで、内容を確認し、SaveかRejectを選択することができます。

プロンプトでLightningページで使用することを伝えたため、メタデータ上でもそれを考慮した実装になっていることがわかります。

※以降はひたすら各ファイルの保存を承認していただけなので割愛します。

LWCの配置～動作確認

実際にデプロイしたLWCを配置していきます。

取引先のLightningページを編集すると、メタデータが適切な設定でデプロイされているため、左のLWC一覧上に表示されていることがわかります。今回はページの右下にコンポーネントを配置していきます。

実際に動きを確認していきます。

取引先のレコードページを見てみると、LWCが配置されていることがわかります。

ここからは、各検証観点に関して確認していきます。

■入力コンポーネント、選択リストが正しく実装されるか

プロンプトに含めた各コンポーネントが正しく実装されています。

■選択リスト値は、カスタム項目と同じ値に自動でしてくれるか

今回は、取引先責任者に標準項目として存在する選択リスト「リードソース」を配置しました。

実際に選択リスト値を確認すると、項目側で有効な選択リスト値で正しく実装されていました。

有効・無効まで言わずとも考慮してくれるのはありがたいですね。

■指定した各入力チェックの内容と、エラーメッセージの通りに実装されるか

必須項目の「姓」「名」、形式チェック対象の「電話番号」「自宅電話」「メールアドレス」が、それぞれのチェックに引っかかるように入力し、登録ボタンをクリックしたところ、全て問題なくエラーとなりました。

各エラーメッセージもプロンプトで指示した内容通りとなっているため、こちらも問題なさそうです！

ただ、各入力コンポーネントにSalesforceが提供するlightning-inputが使用されているため、メールアドレスに関しては、標準の形式チェックとApexの入力チェック両方のエラーメッセージが表示されています。

ここは後ほどVibesに修正してもらいましょう。

■入力した内容で取引先責任者レコードを正しく登録できるか

最後に、登録が問題なく行えるか確認します。

実装時にエージェントが開いている取引先も考慮するように実装してくれているので、今回は「テスト取引先」を使用して検証していきます。

各項目に入力チェックに引っかからない適切な値を入れていきます。

登録ボタンをクリックすると、登録確認メッセージがアラートで表示されました。

こちらも想定通りです！そのままOKボタンをクリックします。

想定通り完了メッセージがアラートで表示されました！

OKを押して終了させます。

検証観点で挙げたポイントは全て問題なく実装されていそうです！

レコード確認

実際に登録した取引先責任者のレコードを確認していきます。

取引先責任者を確認すると、レコードは問題なく登録されていました。

入力した各値も、正しいマッピングで登録されています！

また、Vibesが仕様確認で考慮してくれた、表示している取引先のIdで紐付ける内容に関しても、問題なく実装されていることがわかります！

このように、各仕様を送るだけで、LWCやApexを並行して実装できるだけでなく、プロンプトでは考慮が不足している点（今回の場合は取引先の紐付け）もユーザーに確認したうえで必要に応じて考慮してくれます！

修正依頼

先ほど違和感のあったメールアドレスのエラーに関する修正をしていきます。

本来であれば標準の入力チェックで良いですが、今回に関してはエラーメッセージに統一感を出すため、Apex側の入力チェックを採用します。

先ほど実装させた履歴を開き、次のプロンプトを投げていきます。

プロンプト（原文）

メールアドレスはApexの入力チェックを使用するので、入力コンポーネントはテキスト型にしてください。

修正に関しても問題なく意図をくみ取って実施してくれました。

また、修正時は他のAIコードエディターと同様に、修正前後の差分を確認したうえで承認ができるため、意図しない修正まで行われてしまう心配はありません。

承認後、デプロイまでした後に再度確認すると、想定通りApexのエラーチェックのみ動いていることが確認できます。

まとめ

今回はAgentforce Vibesを利用したLWC、Apexの実装を実施しました。

想定した仕様やレイアウトなどをすべて考慮してくれ、かなり良好な結果を得ることができました。

エージェントが仕様を解釈したうえで、必要に応じて不足している内容を補ってくれるのはかなり便利かと思います！

筆者としては、日本語対応しているのも好印象です。

今回は比較的単純なものを実装させたので、かなり複雑なレイアウトやロジックになってくるとどこまで対応できるか不明ですが、基盤となる部分だけVibesに実装させ、一部は手動対応で補っていくようなこともできるので、少なくとも実装時間の短縮には十分役に立ってくれると思います！

環境を取得するだけでブラウザ版はすぐに使えるので、気になれば是非一度触ってみてください！