3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-11-28

はじめに

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

Jouleへの指示方法

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

image.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

view.xml

image.png

controller.js

image.png

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

image.png

Jouleへの指示②

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

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

image.png

controller.js

image.png

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

デバッグしてみる①

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

image.png

image.png

Jouleへの指示③

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

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

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

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

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

image.png

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

image.png

デバッグしてみる③

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

image.png

image.png

まとめ

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

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

3
0
0

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
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?