PowerAppsをVS Codeで書きたい。YAMLでアプリを作ってみた記録

はじめに

PowerAppsといえばブラウザの編集画面でポチポチ作るイメージですが、
Power Appsキャンバスアプリでバイブコーディングどこまでできる？
このイベントに参加してソースコードを抽出してVS Codeで書けると知りました。
「YAMLで書けるならエンジニアっぽくて楽しそう」という好奇心だけで試してみた備忘録です。

準備したもの

• Power Platform CLI (pac)：これがないと始まらない。
• VS Code：愛用のエディタ。
• 少しの好奇心

やったこと

1. ソースの展開と編集

既存のアプリを pac canvas unpack でバラバラに分解し、中の .yaml ファイルを覗いてみました。
ボタンやラベルがテキストとして並んでいるのを見ると、「あ、これなら書けるかも」という気分になります。

2. コードを書く

今回はシンプルなカウンターを作ってみました。

# ボタンの定義部分
BtnCounter As button:
    Text: ="カウント: " & gblCounter
    OnSelect: =false # ここにロジックを書く
    X: =50
    Y: =150

1. pack して戻す
   編集が終わったらターミナルで一つに固めます。

pac canvas pack --msapp アプリ名.msapp --sources src

実際にやってみて分かったこと

🐢 「爆速」というわけではない
正直、書き換えるたびに pack してインポートして…という手順があるので、ブラウザで直接直すより手間はかかります。

✨ でも、構造がわかるのは楽しい
GUIだと隠れがちなプロパティも、テキストなら一目瞭然。VS Codeの検索や置換が使えるのはやっぱり便利です。

💪 警告は出るけど動く
ターミナルに「非推奨だよ（deprecated）」とか「チェックサムが違うよ」とか言われますが、強い気持ちで進めれば動きました。

まとめ

「PowerAppsをコードで管理する」という第一歩を踏み出せたので満足です。 いきなり全部をYAMLでやるのは大変そうですが、大規模なアプリや共通設定をいじる時には、このやり方が生きてくる気がしました。

📺 成果物：シンプルなカウンターアプリ

イベント時間内に作成したデモ動画です。

動画はこちら↓