Codexを使ったVibeコーディングによるLWC開発を試してみました。過去にSalesforceのApex開発はプラットフォーム独自の開発言語なのでこうしたツールでの開発は難しいという話を聞いたことがあり、自分でもその認識だったのですが、AIエージェントはLWCやApexの開発についても正しく理解して対応してくれます。
環境構築
AIエージェントの開発にあたり、VSCodeでSalesforceプロジェクトを用意します。このプロジェクトとAIエージェントを紐つけることでメタデータファイルからSalesforceの設定情報を認識してくれるようになります。
AIエージェントとSalesforceプロジェクトの紐付けはCodexのデスクトップアプリの場合はこんな感じ。Claude CodeやGitHub Copilot、CLINEなどVSCode上でのターミナルや拡張機能で設定するやり方もあります。
また、AIエージェント用のSalesforceスキルがforcedotcomリポジトリで公開されているのでそちらをインストールするとApex開発の知識の理解度がより高まる感じです。
AIエージェントへのLWCの作成指示
”Vibeコーディングとは、AIに自然言語で「こんなものを作って」「ここを直して」と伝え、細かいコードを自分で書くよりも、生成・実行・修正のサイクルをAI中心で進める開発スタイルです。” となっておりざっくりした指示でも大丈夫です。今回は次のように指示を出しました。
取引先を作成するフォームのLWCを開発してください。
実際の開発ではここまでざっくりした指示は出しませんがとりあえず勉強用に動作するLightning Web Componentsを実装してほしい場合はこれで十分です。できあがったものを見ながらさらにやりたいことを相談していく形で進めていけます。
AIエージェント側で開発にあたり情報に不足があれば質問してくれるので、それに回答していけば実装が進められます。今回は、Salesforceプロジェクト内に既に開発されていた別の機能を参考に開発を進める判断をしてくれていました。指示を受けたAIエージェントの対応はこのようになりました。
だいたい5分ほどで開発してくれました。AIエージェントのルールに記載しておくことで、Code Analyzerや、ESLint、SLDS Linterのチェックを実行し、不適説な実装がないかも確認して品質を高めてくれます。Salesforce開発では動くけど書き方がめちゃくちゃでメンテナンスできないような実装にならないように構文チェックの仕組みがいろいろ用意されています。このあたりの環境構築もAIエージェントに相談すればいい感じで構築してくれます。
AIエージェントの開発基本ローカル上で動作チェックする形で進みます。なので開発完了となっていてもSalesforceの組織へのデプロイはまだの場合があります。次のように指示して、デプロイすることではじめてSalesforce側に反映されます。（デプロイの操作の際には意図せぬ接続先の組織に注意して進める必要があります。）
Codexが開発してくれた取引先作成フォームのLWCがこちら。ホームの画面に表示してという指示を出しました、空いているすべスペースに配置というのはAIエージェントの判断です。適切な判断をしてくれていると思います。また、LWCはSalesforce上で動作するように考えられて作られているのでCSSまわりを一から考えたりしなくてもSalesforceスタイルのUIで実装できます。
エラーチェックのやり方とかInputタグのものをそのまま使ったりしているのはもう少しSalesforceスタイルに寄せたいという感じ。その他細かい実装まわりは見直しポイント結構あると思います。それでも実際に動かすことができるものを作ってくれれば次のアクションが取りやすいです。
AIエージェントはルールやチャット指示する形でドキュメント作成まで任せることができます。プロジェクトのコードファイルの役割などはこうしたドキュメントを作成しておくと便利です。
その他のLWC開発
他にVibeコードで試してみたLWCについてです。Codexに指示を出すだけでこうした機能を形にしてくれました。
データボード
各オブジェクトのレコード件数を表示する機能。
クリックすると検索ページに切り替えるというような動作をするところまで開発してくれました。
ケース情報
ケースの取引先先責任者の情報を元に問い合わせ顧客のプロフィールを表示。取引先責任者と取引先に紐付く他のケースデータ一覧の表示。メールログの表示といったケースページをより見やすくできるLWC開発を任せるといったことができました。
大量レコードに対応するページネーションまわりの実装は複雑ですがApex開発のドキュメントを参照して適切に実現してくれます。
次のメールを読み込むボタンをクリックしたときの挙動です。メッセージが表示されて51件目以降のデータが新たに画面に表示されました。
Codexを使ったVibeコーディングによるLWC開発はこんな感じです。Salesforce独自の開発言語だからAIが理解できないというようなことはなく、適切な実装と不適切な実装を判断して開発を進めてくれます。
AIエージェントのモデルや種類によってはときどき間違った実装で突き進んでしまうことがあります。そのあたりは動作確認しながらルールの追加や指示の出し方の改善で対処していくといった付き合い方になるようです。
おまけ
開発してみたLWCの削除を依頼してみたときのCodexの対応。最初にいろいろチェックポイントを考えて検討が動きます。
最終的に必要な情報のみを整理して回答してくれます。
このように順番に変更作業が進んでいきます。
無事に削除完了です。
