はじめに

GUI-DACという構成図エディタを作りました。
HTMLとJavaScriptで作ったこのエディタの開発について、AIに大いに手伝ってもらいました。そこでAIにどのように手伝ってもらったか紹介します。

作ったアプリ

本題の前にAIと一緒に作ったアプリを紹介。GUI-DAC(ジーユーアイ・ダック)という構成図エディタです。AWSの構成図などを作成できます。こちら ↓ がそのアプリです。

See the Pen gui-dac-aws構成図-WebApp by suo (@sosi-now) on CodePen.

GUI¹とDaC²両方の特性を持つ自分好みの構成図エディタが欲しくてつくりました。このアプリの詳細についてはこちらのブログ記事で紹介しています。

使ったAI

無料版ChatGPT(GPT-4)とBingを使いました。主に使ったのがChatGPTで、ちょっとした調査にBingを使うといった感じでした。明確な使い分け基準はないですが、プロンプト文が短ければBingでもいっか、という感じで使ってました。

開発過程でのAIの活用

ここから本題です。どのようにAIに手伝ってもらったのか、開発過程と一緒に紹介します。

主要処理の開発（期待しない処理が発生）

まずはじめに本アプリの主となる仕組みの制作をしました。
構成図に欠かせない四角形の描画と、図形が重ならないように制御する仕組みを作りました。
図形同士が反発するようにしたかったのですが、磁石みたいにくっつくようになってます。ちょっと期待と違いますが図形が重ならないという挙動は作れました。

AIに手伝ってもらった処理
- 四角形の描画処理
- 円の描画処理
- ドラッグした四角形が移動する処理
- 四角形がグリッドに沿って移動する処理
AIに頼らず作った処理
- 図形の重なり判定
- 重ならないよう他の図形を押し出す処理

※磁石のように図形がくっつく処理にしてしまったのはAIに頼らず作った処理が原因でした。

根幹の処理の開発（磁石みたいな挙動を修正）

図形同士が磁石みたいにくっつく処理を修正し、反発するような挙動に修正しました。これで図形の反発処理が実装できました。磁石みたいな挙動はロジックのミスで、ロジックミスはAIに相談できなかったので自力で解決しました。

AIに手伝ってもらった処理
- なし
AIに頼らず作った処理
- ロジックミスの原因調査と修正

親子関係の実装

構成図は、図を重ねることも必要です。
そこで図形の親子関係を設定できるようにしました。
親子関係を持つことができる図形同士は重ねることができ、親子関係を持つことができない図形同士は反発するようにしました。この処理の実装はAIに頼らず自力で実装しました。(正確には頼り方が分からなかった)

AIに手伝ってもらった処理
- なし
AIに頼らず作った処理
- 親子関係の処理

AWS構成図っぽいものが作図できるようになってきた

構成図は四角形と画像をセットにした絵を描くことが多々あります。
そのため四角形の左上に画像を配置する機能を追加しました。四角形の左上に画像を配置することでAWSの構成図っぽいものが表現できるようになりました。

AIに手伝ってもらった処理
- SVGキャンバスに画像を描画する処理
AIに頼らず作った処理
- 画像を四角形の左上の頂点に描画する処理

画像の配置機能の実施と新たに確認したバグ

ここでバグを発見しました。図形を移動するときに隣接する図形が期待した挙動にならない現象を確認しました。

↓は発生したバグ。動画中盤あたりで、黄土色の図形が想定以上に移動しています。

これはロジックのミスが原因でした。ロジックのミスはAIに解決してもらうのは厳しいと判断し自力で原因を特定しました。原因は、とある変数の値の初期化処理が抜けていたことだったのですが、これを見つけるのに大変苦労しました。

AIに手伝ってもらった処理
- なし
AIに頼らず作った処理
- 親子関係の処理

構成図ファイルの読み込み機能を追加

GUI-DACは構成図をJSON形式のテキストデータとして管理しています。そのため構成図をファイルとして保存することが可能です。今回は構成図のテキストデータを読み込む機能を実装しました。

AIに手伝ってもらった処理
- ファイル読み取りボタン
AIに頼らず作った処理
- ボタンの配置場所
- 読み込んだデータで構成図を描画する処理

接続線

構成図には通信経路などを表現することがあります。そこでGUI-DACに接続線を表現する機能を実装しました。この接続線の実装にAIが大変活躍してくれました。

接続線は単にアイコン同士を線で引くだけでなく、アイコンを隠さないように線の両端を円にしました。これを実装するためには線の両端の座標を算出する必要が出てきます。この座標を算出する処理をAIにまるっと作ってもらいました。

ただアイコン同士を線で繋ぐと↓のようにアイコンと重なり見栄えが悪くなります。

そこでアイコンと接続線が重ならないような接続線の描画処理を考えます。以下のように2つのアイコンの座標を中心に半径 r の円を描き線を描画することにしました。

AIに手伝ってもらった処理
- 接続線の両端の座標を算出する処理
AIに頼らず作った処理
- 接続線の座標の決め方（仕様）

座標を決めるルールを人が考えて、そのルールに従って座標を算出するスクリプトをAIが作りました。ルールを考えるだけでいいので作業がかなり楽でした。

接続線の重複抑制

構成図において接続線は、通信経路を表現するなど重要な役割を持ちますが、接続線が多くなると図が読みにくくなります。この読み難さを少しでも軽減するために接続線が重なりにくくなる仕組みを実装しました。この仕組みの実装はほぼAIに作ってもらいました。

線の重なりを減らすため↓のようにangleという変数も使って接続線の座標を算出するようにしました。線ごとに異なるangle値を設定することで線の重複を回避します。

AIに手伝ってもらった処理
- 接続線の両端の座標を算出する処理
AIに頼らず作った処理
- 接続線の座標の決め方（仕様）

1つ前の工程と同じで、座標を決めるルールを人が考えて、そのルールに従って座標を算出するスクリプトをAIが作りました。ルールを考えるだけでいいので作業がかなり楽でした。

接続線を矢印にできる機能の追加

構成図において、接続線は通信方向を表現するために矢印で表現する場合があります。そこで接続線を矢印にする機能を追加しました。矢印を表現するため三角形の3つの頂点の座標を算出するのですが、この座標の算出処理をAIに実装してもらいました。

矢印を表現するには線が矢印に見えるよう三角形を描画する必要があります。具体的には線の両端の座標をもとに、三角形の3点の座標を算出します。

AIに手伝ってもらった処理
- 三角形の3点の座標を算出する処理
- 三角形を描画する処理
AIに頼らず作った処理
- 三角形の座標の決め方（仕様）

AIに処理を作ってもらいとき、プロンプトに"矢印みたい"といった表現をいれるだけでこちらの意図を理解してくれたのは説明が楽で非常に助かりました。

依存関係の動的更新

AWSの構成図を作図する際、重ねる図形を変更することがあります。
たとえば、EC2をサブネットワーク①からサブネットワーク②に配置を変えることがあります。
EC2を配置するサブネットワークが変わった際に依存関係が更新するようにしました。これはAIに頼らず自力で実装しました。

AIに手伝ってもらった処理
- ない
AIに頼らず作った処理
- 図形同士の依存関係を判定する処理

ハイライト機能

複雑な構成図になると接続線も増え、それにより図が分かりにくくなります。そこで接続線のハイライト機能を実装しました。マウスを重ねた接続線のみハイライト表示されます。これはAIに頼らず自力で実装しました。

AIに手伝ってもらった処理
- ない
AIに頼らず作った処理
- 図形同士の依存関係を判定する処理

その他：ロゴの作成

このアプリのロゴはAIで作成しました。アプリの概要をプロンプトに打ち込み生成された絵の中から気に入ったものを採用しました。

アプリ開発におけるAIの活用について

今回のアプリ開発をAIに手伝ってもらったことでなんとかアプリを完成と言えるところまで作ることができました。この開発を経て自分なりのAIの使い方が見えてきたかもしれません。

小さな処理を作るのが得意
- SVGキャンバスに四角形を描画する関数の作成といった、小さな処理を作ることが得意なようです
- 変数名の作成もいい感じです
エラー対処が有能
- エラーメッセージが発生するエラーの対処が得意のようです
- エラーメッセージを説明してもらったり、具体的なエラーの対策をしてくれました
ロジックミスは頼れない
- エラーメッセージの表示されない問題の対処はAIに頼れないので自力で解決しないといけないので大変でした
その他
- 面倒(?)なロゴ作成が簡単になるのめっちゃ助かりました

今後に期待すること

ロジックミスの修正をAIに頼れるといいな。
今回のアプリ開発ではロジックミスの原因調査にとんでもなく時間を使ったのでここをAIに手伝ってもらえると開発期間の大幅短縮ができそうです。

（ちなみに、ロジックミスの調査って有料版AIだったらできる？無料版でもプロンプトの書き方を工夫すればできる？知ってたら教えてほしい。）

GUI(Graphical User Interface)とは、アイコンやボタンなどを用いて直感的にわかりやすく操作できるようにしたユーザーインターフェースのこと。 ↩
DaC(Diagram as Code)とは、コードを使用して図を作成および管理し、視覚的なドキュメントの作成、管理を改善する手法のこと。 ↩