【SAP Build Code】 生成AI（Joule）でUI5のコードを書かせてみた。

## はじめに
AIの進化により、コード開発のプロセスが劇的に変わりつつあります。特に生成AIは、プログラミングの効率化に大いな役割を果たしています。生成AIは、人間が数時間かけて行うタスクを数分で完了する能力を持ち、コードの自動生成やエラーチェック、さらにはデバックまでも支援します。現代のプログラマーにとって、生成AIは単なるツールではなく、不可欠なパートナーとなりつつあります。
本記事ではSAPが提供する生成AI「Joule」でUI5のコード開発を試してみました。

## Jouleによるコード生成
### 作成目標
今回の作成目標をSAP公式のサンプルであるドラッグ＆ドロップができるテーブルとして、Jouleへの指示だけで作成してみることにしました。

https://sapui5.hana.ondemand.com/#/entity/sap.ui.table.Table/sample/sap.ui.table.sample.DnD
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/a2e8e1dd-2793-25ce-83f1-46b1e566d346.png)

### Jouleへの指示方法
SAP Build Codeからプロジェクトを開くとBASにとぶことができます、左のリストのダイアモンドみたいなアイコンがJouleです。下の入力欄で指示することができます。UI5に関するコード作成を指示する場合は `/ui5` と初めに入力してから、後に続けて詳細内容を記載します。
(日本語での指示も可能ですが、英語で指示したほうがより正確な回答を得られます)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/740471e3-ad9f-f8ce-eb66-7e5c3afa682b.png)

### Jouleへの指示①
まずは以下の内容を英語に翻訳して指示してみました。
>sap.ui.Tableを左右に2つ
>2つのテーブルの間に矢印のアイコンのボタンが二つ、各ボタンを押下することで選択したレコードがテーブルを移動する
>レコードをドラッグ＆ドロップすることで別のテーブルに移動できる
>Colulmn : [Product Name, Category, Quantity] 
>left Table title：Available Products
>right Table title : Selected Products

送信すると、view と controller のコードを作成してくれました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/e553a7bd-3a53-5976-db4c-514d91103186.png)

#### view.xml
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/bf9d2c3d-2aec-a143-03a2-8ee767d17267.png)


#### controller.js
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/fe96439f-c57f-3f35-96fa-f074662efe14.png)



作成されたコードを見ると、DragDropInfoタグに対しcoreが指定されていますが、正確にはdndであるはずですが、XML名前空間が定義されていないことがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/a84df340-8793-cdeb-bc09-ca2950d67f23.png)

### Jouleへの指示②
これではエラーが起きてしまい画面を確認できません。したがって、追加で以下のような指示を出します。あえてdndという名前は出さないように指摘してみました。

>DragDropInfoタグの名前空間coreが定義されていない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/c91d4e01-b0e2-ceff-5457-fac96855bc1e.png)

#### controller.js

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/d0f24b67-0394-5455-f21b-cb779701730a.png)

しっかりと、dndのXML名前空間を定義したものを作成し直してくれました。



### デバッグしてみる①
Jouleが作成した以下のコードでデバッグしてみました。
レイアウトの違いは多少ありますが、レコードを選択してのボタンでの遷移はできました。
ただ、ドラッグ＆ドロップは機能していませんでした。
原因としては、DragDropInfoタグしかないからです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/ac4fbb62-fafe-a6e5-1f25-0df2075178ca.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/135d7e48-c6b7-db1b-4247-46fc4c8c66b7.png)

### Jouleへの指示③
以下のようにドラッグ＆ドロップができないと言ってみたり、
再度説明してみましたが、全く同じコードを返答してきました。。

>双方のテーブル間をドラッグ＆ドロップで移動することができない。

>Available ProductsのレコードをドラッグしSelected Productsにドロップすることでレコードを移動することができるようにしたい。

しかたがないので、具体的な指示を出しました。

> viewの各テーブルにDragInfo、DropInfoのタグを追加。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/c3479744-71ca-f047-0f25-a1fccdbd77fa.png)

各テーブルタグにDragInfoとDropInfoを追加してくれましたが、Drop時のメソッドが反対になっていました。。
これに関しては、手で入れ替えた方が早いので直接修正しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/d34faba4-4e65-0260-5dec-ef74f63b31b9.png)

### デバッグしてみる③


結果、無事にドラッグ＆ドロップでSelectedテーブルに移動させることができました。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/95dfa0fc-2a2b-7a31-9290-53f114b5c7d3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3345291/f874bf94-130b-b192-9581-3f563f9c9937.png)


## まとめ
&nbsp;Jouleを使ってみての感想として、
より正確なコードの作成には細かい指示が必要であるため、ある程度の知識と正確に指示する能力が必要だと感じました。
&nbsp;今回は比較的単純なコードでしたが、より複雑なコードになってくると、逆に指示する方が難しくなり、自分で書いた方が効率的であるケースもあると思います。
したがって、生成AIはあくまで補助的な役割で、単純なコードだが書くのに時間がかかるケースや実装方法がわからないときにコードを提案してもらい参考にするなどの用途で使うのが良いのかなと思います。
&nbsp;UI5の作成に関しては、他の生成AIと比べるとJouleはより正確なコードを返してくれるので、使いこなすことができれば間違いなく作業効率を上げることは出来ると思いました。

今後、生成AIを上手く利用して作業効率を上げることが、エンジニアにとってマストな能力になってくると思うので、頼るべき時は生成AIにまかせつつ、よりうまく生成AIを扱うためのノウハウを身に着けていこうと思います。