VBAのユーザーフォームがGit差分管理・AIと共同編集可能な時代になりました

前置き

私はExcelVBAをAIエージェントで完全自律開発するための開発ツールチェーン xlflow と、LSPなどによる入力補完などを提供する VSCode拡張機能 を開発しています。

今回は、ユーザーフォームをVSCode上でUI編集可能 にする大きめのアップデートをリリースしたので、記事を書かせていただきました。

xlflowに関する概要は以下のZennの記事にて紹介しています！

はじめに

コーディングエージェントでプログラムを書くのが当たり前な現代
Excel VBAでもソースコードをGit管理する話は、そこまで珍しくなくなりました。

標準モジュールやクラスモジュールであれば、.bas / .cls としてファイルに書き出してしまえば、VS Codeで編集できますし、Gitで差分も取れます。

一方で、長い間どうにも扱いづらかったものがあります。

ユーザーフォーム です。

ユーザーフォームはコードだけならテキストとして扱えますが、フォームのレイアウトやコントロール配置は、VBE内部のDesigner情報として保持されています。

そのため、

• Gitで差分が読みづらい
• AIが編集しづらい
• Excel / VBEに依存する
• フォーム編集だけ人間がVBEで行う必要がある

という問題が残っていました。

今回、xlflowの最新リリースでこの部分をかなり解消できるようになりました。

ユーザーフォームをGitフレンドリーなYAMLとして扱い、そのYAMLをVS Code上のGUI Designerから編集し、さらにpure-Goで.xlsmへ戻せるようになっています。

この記事では、この仕組みについて紹介します。

ユーザーフォームはソースコードだけでは完結しない

VBAのコードであれば、たとえば次のように普通のテキストとして管理できます。

Private Sub CommandButton1_Click()
    MsgBox "Hello"
End Sub

これはGitと非常に相性がいいです。

差分もそのまま読めます。

- MsgBox "Hello"
+ MsgBox "Hello, xlflow"

AIにもそのまま渡せます。

一方でユーザーフォームのDesigner情報はそう簡単ではありません。

たとえば、

• CommandButtonの位置
• TextBoxのサイズ
• LabelのCaption
• Frameとの親子関係
• Font

などなど...単純なVBAコードでは表現されません。

このため、ソースコードを全部VS Codeに移しても、

ユーザーフォームの見た目だけはVBEを開いて人間が直す

という状態になりがちでした。

AIエージェントにVBA開発を任せる場合も、ここがかなり大きな壁になります。

ユーザーフォームをYAMLとして表現する

xlflowでは、ユーザーフォームのDesigner情報を構造化し、YAML形式で管理します。

たとえば、簡単なユーザーフォームなら次のようになります。

LoginForm.yaml

schemaVersion: 1
kind: xlflow.userform
basis: designer

form:
  name: LoginForm
  caption: Login
  width: 300
  height: 180

controls:
  - id: username-label
    name: UsernameLabel
    type: Label
    caption: Username
    left: 24
    top: 32
    width: 72
    height: 18

  - id: username
    name: UsernameTextBox
    type: TextBox
    left: 108
    top: 30
    width: 140
    height: 20

  - id: submit
    name: SubmitButton
    type: CommandButton
    caption: Login
    left: 176
    top: 100
    width: 72
    height: 24

これなら普通のテキストファイルです。
Gitでそのまま差分管理できます。

たとえばボタンを少し右へ動かした場合、

  - id: submit
    name: SubmitButton
    type: CommandButton
    caption: Login
-   left: 176
+   left: 184
    top: 100

のように差分が出ます。

VBE上でフォームを編集した場合と違い、

「何が変わったのか」が人間にもAIにも分かります。

VSCode上でユーザーフォームをGUIで編集できるようになった

ユーザーフォームを全部YAMLで手書きしたいかというと、さすがにそれは面倒です。

そこでxlflow最新バージョン（v0.36.0）にて、VS Code拡張側にGUI Designer機能を実装しました。

現在は、VS Code上でユーザーフォーム定義のyamlファイルを開くと、

上記の画面のように、通常のフォームデザイナーに近い操作ができます。

たとえば、

• コントロールをドラッグして移動
• リサイズ
• 新しいTextBoxやButtonを追加
• Frameへ移動
• MultiPage / Pageを編集
• コピー / ペースト
• Z-order変更
• Tab order変更
• フォント変更
• 色変更
• 画像設定

など、基本的な編集操作を概ね実装しています。

ただし重要なのは、GUI Designer自身が独自形式を持っていないことです。

GUIで操作した結果は、最終的にすべてYAML形式のFormSpecへ反映されます。

逆にYAMLを直接編集すれば、Designer側にも反映されます。

AIとユーザーフォームを共同編集できる

YAMLやJSON形式はご存じの通りAIにとって非常に理解しやすい構造化情報です。
これによってユーザーフォームのUIをAIに完全に認知させることができ、AIによる編集が可能になります。

たとえば、以下のように
「フォームによくある申請入力フォームを作って」とお願いすると、AIエージェントがyamlでUIを書き、正しくGUIに反映されました。

その後、人間がGUI Designerで開いて、デザインを手動で微調整することができます。

そして、その変更もまたGit差分として残ります。

つまり、

AIが大枠を作る
↓
人間がGUIで調整
↓
AIが再び修正
↓
Gitでレビュー

という流れが成立します。

ユーザーフォームのイベントにも飛べる

GUI Designerからコードへの導線も追加しています。

たとえばテキストボックスをダブルクリックすると、

Private Sub NameInput_Change()
  
End Sub

というように本家と同じような感じでコードの雛形が生成され、プログラムを書いていく事ができます。

これはVBEの操作感に近いです。

イベント一覧も選択できます。

VBEのCreateEventProcで実際の宣言を確認しながらイベントカタログを作っているため、UserForm / Controlごとのイベント差異も考慮しています。

おわりに

ExcelVBAをAIに全任せしたくて開発を始めたxlflowはどんどん進化を遂げています。

xlflowを使っている一部のユーザーからは実際に感謝の声もいただいており、私としても現代のVBA開発におけるデファクトスタンダードツールを目指しているので、気になる方は是非使っていただいてフィードバックをいただけると嬉しいです！

よければGitHub スターもいただけると開発の励みになります🌟

それではまた👋