2023.06.14

Chat GPT に取引先の検索画面を作ってもらう その1

Chat GPT とは

話題になっているChat GPT。概要は以下の通りです。

ChatGPT(チャットジーピーティー、英語: Chat Generative Pre-trained Transformer)[1]は、OpenAIが2022年11月に公開した人工知能チャットボット。原語のGenerative Pre-trained Transformerとは、「生成可能な事前学習済み変換器」という意味である[2]。OpenAIのGPT-3ファミリーの大規模言語モデルを基に構築されており、教師あり学習と強化学習の両方の手法で転移学習されている。

いろんな方面でニュースとして取り上げられていますね。 イタリアなど欧米諸国ではその利用の禁止を含めた規制の動きが出ていたり、2023年4月29、30日に開催された先進7か国(G7)では活用や規制に関する国際ルールの策定に向けて議論されたりしたそうです。

ということで、いろんな意味でこれからも目が離せない技術ですが、今回はこのChat GPTを使ってApex開発を行ってみます。

できるだけ私の頭を使わないでChat GPTだけでどこまで開発が可能か試してみようと思います。

Chat GPT に検索画面を作ってもらう



今回は取引先の検索画面を作ってもらおうと思います。
では早速Chat GPTに開発してもらいましょう。
以下の質問を Chat GPT に投げます。

SalesforceのLightning web componentで取引先検索を作成する場合のコードを教えて

はい、この質問に対してChat GPTはすぐに回答してくれました。

SalesforceのLightning Web Componentを使用して取引先を検索するコンポーネントを作成するためのコードの例を以下に示します。

Lightning Web Component の HTML

<template>
  <lightning-card title="取引先検索">
    <div class="slds-p-around_medium">
      <lightning-input label="検索キーワード" value={searchTerm} onchange={handleSearchTermChange}></lightning-input>
      <lightning-button label="検索" onclick={handleSearch} variant="brand"></lightning-button>
    </div>
    <template if:true={accounts}>
      <div class="slds-p-around_medium">
        <lightning-datatable data={accounts} columns={columns} key-field="Id" hide-checkbox-column="true"></lightning-datatable>
      </div>
    </template>
  </lightning-card>
</template>
accountSearch.html

Lightning Web Component の Javascript

import { LightningElement, track, wire } from 'lwc';
import searchAccounts from '@salesforce/apex/AccountController.searchAccounts';

const COLUMNS = [
  { label: '取引先名', fieldName: 'Name', type: 'text' },
  { label: '電話', fieldName: 'Phone', type: 'phone' },
  { label: 'ウェブサイト', fieldName: 'Website', type: 'url' }
];

export default class AccountSearch extends LightningElement {
  @track searchTerm = '';
  @track accounts;
  columns = COLUMNS;

  handleSearchTermChange(event) {
    this.searchTerm = event.target.value;
  }

  @wire(searchAccounts, { searchTerm: '$searchTerm' })
  wiredAccounts({ error, data }) {
    if (data) {
      this.accounts = data;
    } else if (error) {
      console.error(error);
    }
  }

  handleSearch() {
    // 検索処理は自動的に実行されるため、ここでは何も実装しない
  }
}
accountSearch.js

Apexコード (検索処理)

public with sharing class AccountController {
  @AuraEnabled(cacheable=true)
  public static List<Account> searchAccounts(String searchTerm) {
    String searchKey = '%' + searchTerm + '%';
    return [SELECT Id, Name, Phone, Website FROM Account WHERE Name LIKE :searchKey];
  }
}
AccountController.cls

ということで、コードが返ってきたので、Visual Studio Code で実装してみようと思います。

Chat GPT からのコードを組織に反映して検索画面を使用可能にする

これでhtml, Javascript, Apexクラスが作成できたので、確認用の組織にデプロイしてみます。

デプロイする前に meta.xml で以下の修正、追記が必要です。 isExposed 属性の値を true に指定します。 また、今回は「アプリケーションページ」で作成しようと思いますので、target属性の値は lightning__AppPage にしています。

<isExposed>
    true
</isExposed>
<targets>
    <target>
        lightning__AppPage
    </target>
</targets>
accountSearch.js-meta.xml

ソースのデプロイ



デプロイがエラー無く終了したので、Slaesforceにログインし設定画面のクイック検索から [lightning] と入力して [Lightning コンポーネント] メニューを選択します。

コンポーネント「accountSearch」が確認できます。

では次に Lightningプリケーションビルダーを使って取引先の検索ページを作っていきます。

Lightningページによる取引先検索画面の作成

上図のように作成した accountSearch コンポーネントをドラッグアンドドロップすると下図のように検索画面らしきものが表示されます。

これを保存して有効化します。 有効化する際に LIGHTNING EXPERIENCE タブにて下図のように使用するアプリケーションに作成したLightningページを追加します。

ここまでの設定が終わったらフロントページから作成した Lightning ページにアクセスしてみます。

すでに取引先が検索結果表示エリアに表示されています。

検索キーワードを入力してみます。

検索処理の確認

検索キーワードに a を入力したところ取引先の取引先名を対象に、半角小文字の a および、半角大文字の A を取引先名に含むレコードが返ってきました これは AccountController.cls 内の検索クエリがSOQLで

SELECT Id, Name, Phone, Website FROM Account WHERE Name LIKE :searchKey

となっており、検索条件に指定している項目が「取引先名」のみであるためです。
検索キーワードに入力された文字列で「取引先名」「電話」「ウェブサイト」も対象に検索を行う場合は AccountController.cls を検索クエリにてSOSLを使用する内容に変更します。
  public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> searchAccounts(String searchTerm) {
      String searchKey = '%' + searchTerm + '%';
      //return [SELECT Id, Name, Phone, Website FROM Account WHERE Name LIKE :searchKey];

      List<Account> accountList = new List<account>();
      List<List<sObject>> serchResult = [find :searchTerm in all fields returning Account(Id, Name, Phone, Website)];
      if(serchResult != null && !serchResult.isEmpty()){
        List<sObject> accountRecord = serchResult[0];
        for(sObject record : accountRecord){
          Account account = (Account)record;
          accountList.add(account);
        }
      }
      return accountList;
    }
  }
AccountController.cls
List<List<sObject>> serchResult = [find :searchTerm in all fields returning Account(Id, Name, Phone, Website)];

上記のSOSLに変更します。
in all fields を指定しているので、取引先のすべての項目を対象としています。
また、SOSLを実行した場合、その結果は List<List<sObject>> 型でデータが返ってくるので、返却されたリスト内の各レコードを Account 型にキャストして List<Account> 型の変数 accountList に追加します。
これを戻り値として返却しています。

上記の変更を行った AccountController.cls をデプロイして検索を行ってみます。

'090' という文字列で検索を行った結果「取引先名」「電話」「ウェブサイト」に '090' を含むレコードが検索結果として返されました。



この記事のまとめ

このようにSOQLからSOSLに兼行する箇所は Chat GPT を使わないでコードを書きましたが、ほぼ Chat GPT で Lightning Web Component 検索画面の作成を行いました。
コードだけではなく Chat GPT は Visual Source Code での組織の認証方法組織のリソース取得方法コードのデプロイ方法まで教えてくれます。
個人的には非常に便利なものなのですが、自分で開発を行う(環境を整える、コードを書く、デプロイする、テストを行う)知識がまったくないまま Chat GPT に頼りすぎるのは危険かな、と思っています。

さて、Chat GPT がほとんど仕事してくれたのですが、さらに頑張ってもらって検索結果を編集可能なようにしてもらおうと思います。
44 件
     
  • banner
  • banner

関連する記事