LoginSignup
1

SalesforceのApex/LWC作成をChatGPTに手伝ってもらう

Last updated at Posted at 2023-04-19

記事の対象者と目的

こんにちは!株式会社エンラプト開発チームです。
本記事では、Salesforceを触ったことがある人向けに、ChatGPTにサポートして貰うことができるのか?を試してみた記事です。
ChatGPTにApexとLWCの作成を手伝ってもらいます。

SalesforceのプログラミングをChatGPTに手伝ってもらう

Salesforceで使われる言語ApexってJavaと似てるけど逆に覚えにくいですよね。
なので、ChatGPTに書いてもらえるかどうか試してみました。

SalesforceのApexとLWCとは何?

SalesforceのApexは、Javaに似たオブジェクト指向のプログラミング言語で、Salesforceのクラウドプラットフォーム上で動作するために設計されています。Apexは、Salesforceの機能を拡張し、カスタマイズするために使用されます。Salesforceのクラウド上でのビジネスプロセスを自動化し、データベースにアクセスし、Webサービスを呼び出すことができます。

一方、LWC (Lightning Web Components) は、Salesforceが提供する、Webアプリケーションを作成するためのフレームワークです。LWCは、JavaScriptとHTMLを使用して開発され、SalesforceのLightning Experienceというユーザーインターフェースに完全に統合されています。LWCは、Salesforceのビジネスプロセスを自動化するために使用されるApexと組み合わせて使用することができます。LWCは、カスタムコンポーネントを作成することができ、そのコンポーネントをSalesforceのLightningページに配置することができます。

以上、ChatGPTによる解説です。

まずはApexを書けるかChatGPTに聞いてみる

image.png

書けるとのこと。

ApexとLWC

LWCコンポーネントをフロントエンド、Apexをバックエンドとしたコンポーネントのセットを作ってみます。
ApexはsObjectからデータを取得し、それをLWCで表示するというものを目標とします。
このパターンは実務で実装する頻度が高いと思います。

image.png

作ってもらえました。
オブジェクトは実際には存在しないものなのでそのままは使えませんが、むしろまだ作っていないオブジェクトを前提としてここまで書いてくれるのはすごいですよね。

次はこのクラスをLWCから呼び出して、画面に表示できるようにしてみます。

image.png

image.png

先ほどのApexの引数まで考慮したコードを作成してくれました。htmlとjavascript、それを配置するスニペットまで用意してくれました。
今回作って貰えたLWCはパラメータとして外部からIDを貰う形になっています。

実践

VSCodeを使用して、Salesforce組織に実際に作って配置してみます。
今回は、ユーザーの一覧をApexで取得し、それを表示するLWCを作ってみます。

準備

  • VSCodeにChatGPT - Genie AIをインストール
  • VSCodeにSalesforce CLI Integrationをインストール
  • ChatGPTのAPI-Keyを用意
  • salesforceの組織を用意(developで大丈夫)

実装

プロジェクト作成

VSCodeのSalesforce拡張機能を使って生成します。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333239333530382f31353162383339372d343433372d313665632d613038332d3337363534333161343136372e706e67.png

Userを取り出すApexを作成して貰う

ChatGPTにお願いします。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333239333530382f34323430363231352d343639612d623065352d346466612d3565383865343166656236392e706e67.png

拡張機能を使用する初回にAPI-Keyを問われるので、入力してください。
英語で回答返ってくる場合は、「今後の回答は日本語でお願いします。」と最初に伝えておくと良いです。

sfdxでcls生成

VSCodeのSalesforce拡張機能を使って生成します。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333239333530382f31613464653435342d353561312d353036352d383535662d6465343565613438303532382e706e67.png

コピペ

作ってもらったclsを生成したclsにコピペします。
insertボタンがあるのでそれが使えます。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333239333530382f31353063313762622d356334352d306266302d313865302d3830623063393565353230322e706e67.png

Diffボタンも便利です。回答のコードと右ペインのコードを一発でDiffできます。
例えば、コメントを増やしたコードを生成してもらって、変化を確認する時など。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333239333530382f63656563616137382d626437382d346438372d306235642d3734356333333139653836632e706e67.png

修正

そのまま使える場合もありますが、仕様に応じた修正が必要です。
今回はフィールドをId,Name,Emailだけにします。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333239333530382f31633364323238352d353232362d306463622d313366652d6261336132636661386633342e706e67.png

完成したコードは以下です。

UserController.cls
public with sharing class UserController {
    
    @AuraEnabled(cacheable=true)
    public static List<User> getAllUsers() {
        return [SELECT Id, Name, Email FROM User];
    }
}

LWC生成

作成して貰う

LWCを作成します。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333239333530382f62313439626266662d393363632d366134322d393139652d6365666531623934613330382e706e67.png

ファイル生成、コピペ

VSCodeのSalesforce拡張機能を使って生成し、作ってもらったhtmlとjsを生成したclsにコピペします。(Apexと同様にInsertボタンが使えます)
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333239333530382f33636365333161372d373061632d333634392d323132652d3766643165666438616534312e706e67.png

修正

FirstName, LastNameを削除してNameに変更したことをChatGPTに伝えてなかったので、手動で修正。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333239333530382f36366562306136352d386137352d663465372d656566362d3031616639373236313663362e706e67.png

今回のコンポーネントを配置するため、メタデータのtargetを指定する必要があります。これもChatGPTに聞けば教えてくれます。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333239333530382f62333439613633322d333336642d393763622d316536662d3735653162336263643537652e706e67.png

もしくは、生成して貰うこともできます。
スクリーンショット 2023-04-18 16.43.58.png

完成したコードは以下です。

userList.html
<template>
    <lightning-card title="All Users">
        <ul>
            <template for:each={users} for:item="user">
                <li key={user.Id}>{user.Name} ({user.Email})</li>
            </template>
        </ul>
    </lightning-card>
</template>
userList.js
import { LightningElement, wire } from 'lwc';
import getAllUsers from '@salesforce/apex/UserController.getAllUsers';

export default class UserList extends LightningElement {
    users;

    @wire(getAllUsers)
    wiredUsers({error, data}) {
        if (data) {
            this.users = data;
        } else if (error) {
            console.error(error);
        }
    }
}
userList.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

デプロイ

左下の組織(スクショではdev)を設定して、cls, lwcを右クリックして、組織へデプロイします。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333239333530382f61326664626464642d656537642d346362342d393463332d3535306565633833623965662e706e67.png

配置、実行

編集ページボタンから配置します。
完成しました!
左上のAll Usersが作成したコンポーネントです。(他のコンポーネントはデフォルトのサンプル)
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333239333530382f31313564633938392d323266342d383335392d353736372d6361323139363130646337382e706e67.png

まとめ

ChatGPTはApexもLWCも作成してくれます。
全ての仕様を伝えるわけにはいかないですが、従来のスニペットを作ってくれるツールの上位互換として非常に実用的です。
VSCodeの拡張機能を使用すると調べるためのブラウザはもういらないかもしれません。

おまけ1:カスタマイズ指示(良くない結果を返すこともある)

カスタマイズを依頼してみます。

まず、普通に作ってもらいました。今回は、Id,Nameだけを返す、0引数のものを作ってくれました。

image.png

引数と、戻り値のカスタムをお願いしました。
スクリーンショット 2023-04-18 16.50.47.png

検索ボックスも作ってもらいます。
スクリーンショット 2023-04-18 16.53.21.png

作ってくれたようですが、下の方にはApexに必要な修正についての言及がありません。
スクリーンショット 2023-04-18 17.08.51.png

% でワイルドカードを指定するのであれば、 = ではなく、 like を指定する必要がありますね。
また、メタ文字をクライアントに書かせるのもSQLインジェクションに繋がるので良くありません。

100%完璧なコードを生成してもらえるわけではないので、過信しないようにしましょう。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1