Power Appsといえば、ノーコード／ローコードでアプリを作るイメージが強いですが、2025年9月にプレビュー機能としてリリースされたPower Apps Code Appsを使って、ReactやVueといったモダンなフロントエンドフレームワークでコーディングしたWebアプリを、Power Platform環境にデプロイできるようになりました。
今回は、VIsual Studio Code上でAIエージェントを使ってシンプルな「備品貸出申請アプリ」を作成し、Power Appsにデプロイするまでの過程を2回に分けてお伝えします。
Part 1では、開発環境の準備からローカルでの動作確認までを解説します。
Power Apps Code Appsとは
概要
Power Apps Code Appsは、Microsoft Power Platform上で動作するコードファーストのWebアプリ開発モデルです。
Visual Studio Codeなどの統合開発環境（IDE）でReactやVueといったフロントエンドのフレームワークを使ってコーディングを行いながら、Power Platformの強力な機能を統合した Webアプリを構築できるようになりました。
「AI駆動開発」でスピーディにPower Appsアプリを作成することが可能ということですね！
※2025年10月時点でプレビュー機能になります。
Power Apps コード アプリの概要
特徴とメリット
– 統合認証
Microsoft Entra（旧Azure AD）を使った認証・認可をサポート。
– 1,500以上のコネクタ
JavaScriptからPower Platformのデータソースに直接アクセス可能。
– ホスティングと配信の容易さ
開発したWebアプリをPower Platform上に簡単にデプロイ。
– 組織のガバナンスを継承
共有制限、データ損失防止（DLP）、条件付きアクセスなどの管理ポリシーに準拠。
– ALM（アプリライフサイクル管理)
PAC CLIを通じて一貫したビルド・デプロイが可能。
前提条件
Code Appsを使うためには、以下の準備が必要です。
1. Power Platform管理センターでの有効化
プレビュー機能なので、Power Platform管理センターでCode Appsの機能を有効化する必要があります。
1.Power Platform 管理センターにアクセス
2. 管理 > 環境 > 設定 を開く
3. 製品＞機能 を開く
4. Power Apps code apps をオンにする
2. ライセンス
– 開発アプリを使うユーザーは**Power Apps Premiumのライセンス**が必要です
3. 開発環境の準備
– **IDE**: Visual Studio Code
– **AIエージェント**: GitHub Copilot （今回modelは主にClaude Sonnet 4.5を使用）
– **MCPサーバー**:
– MicrosoftドキュメントMCP [GitHub]
4. 環境IDの取得
アプリをデプロイするPower Apps環境の環境IDを取得し、メモしておきます。
取得方法：
– Power Apps > アプリをデプロイする環境を選択 > 右上の歯車ボタン（設定） > セッション詳細 > Environment Id
開発の流れ
ギークフジワラさんの開発標準を活用
開発にあたっては、マイクロソフトの中の人、ギークフジワラさんがCodeApps向けの「開発標準」をGitHubに公開してくださっていました！この開発標準はエージェントによる開発を想定した開発標準になっています。こちらをベースにAIエージェントに実装を依頼すると効率よく開発を進められます。
今回はこの開発標準の内容を一部変更したかったので、ローカルにgit cloneしました。
開発のステップ
– Phase 0** – 環境準備・PAC CLI認証
– Phase 1 – Vite + React + TypeScript + PowerProvider基盤構築
– Phase 2 – shadcn/ui + TailwindCSS統合、レイアウト実装
– Phase 3 – ローカルテスト・動作確認
– Phase 4 – Power Apps環境へのデプロイ
– Phase 5*- Dataverse統合・実データ接続
ギークさんの開発標準のPhase2のデザインについてはガントチャートアプリを開発する前提で記載されているため、今回は貸出申請アプリ用のデザインに内容を変更しました。
デザインの作成
デザインはFigma Makeでカラーイメージや必要な入力項目を自然言語で指定し、UIを作成しました。作成したUIを元に、Figma MCP経由でVisual Studio Codeのエージェントに依頼してデザイン仕様書（design-spec.md）として起こしました。(Figma MCPの利用にはFigmaの有料プランへの加入が必要です）
もちろん、エージェントにおまかせでも良いと思います!
UI
参考）デザイン仕様書の一部(AIエージェント作)：
“`markdown
# 備品貸出管理システム – デザイン仕様書
## 概要
本ドキュメントは、備品貸出申請システムのデザイン仕様を定義します。Figmaデザインを基に、UIコンポーネント、レイアウト、スタイリングガイドラインを記載しています。
## ページ構造
### 全体レイアウト
– **コンテナサイズ**: 768px × 760px
– **レイアウト**: 縦方向のフレックスレイアウト（flex-col）
– **要素間の間隔**: 40px（gap）
### 主要セクション
1. **ヘッダーセクション** (高さ: 136px)
– アイコン表示エリア
– タイトル
– サブタイトル
2. **フォームカードセクション** (高さ: 584px)
– カードヘッダー
– フォームコンテンツ
## コンポーネント仕様
### 1. ヘッダーセクション
#### アイコンコンテナ
– **サイズ**: 64px × 64px
– **位置**: 中央配置（左から352px）
– **角丸**: 16px
– **シャドウ**:
– `0px 1px 3px 0px rgba(0,0,0,0.1)`
– `0px 1px 2px -1px rgba(0,0,0,0.1)`
・・・つづく
“`
実装計画の作成
いきなりエージェントに実装を依頼するのではなく、まず実装計画を作成してもらい、内容を確認しました。
エラーが発生した時のトラブルシューティングについては、エージェントが闇雲にエラー修正を行わないよう、必ずMicrosoft LearnをMCP経由で確認して対処するよう、書いておきました。
参考）実装計画作成依頼用のプロンプト：
“`markdown
# 目的
Power PlatformのCode Apps機能を使った備品貸出申請アプリを実装する：
– 貸出申請フォーム画面
# 実装要件
**開発標準**
– CodeAppsDevelopmentStandard配下の開発標準に基づいて実装を進めます。
**UI**
-`design\spec\design-spec.md`、`design\spec\rental-app-form.png’のデザインを採用してください
**データソース**
– Dataverseに登録することを想定しています。
# 実行してほしいこと
上記に従って、エージェントへの実装依頼プロンプトを作成し、docs/prompts/plan.mdに保存してください。
特にトラブルシューティングについては必ず`CodeAppsDevelopmentStandard’、`CodeAppsDevelopmentStandard\docs`配下のドキュメント、`microsoft.docs.mcp`に接続してしっかり確認して対処するよう指示してください
“`
実装の依頼
実装計画に問題がなければ、エージェントに実装計画に沿って実装するように依頼しました。
buildエラーやlintエラーはエージェントがどんどん自動で修正しつつ、約20分ほどでフロントエンドの開発が完了し、ローカルの開発サーバーで確認できるようになりました。デザインもあらかじめ指定した仕様書通りに実装されました。
レスポンシブ対応もされています。
まとめ
今回は、Power Apps Code Appsを使って、AIエージェントと備品貸出申請アプリのフロントエンドを開発しました。
次のPart 2では、PowerApps環境にデプロイしてDataverseに接続します。
ここまでお読みいただき、ありがとうございました！
この記事が少しでも参考になりましたら「スキ」を押していただけると幸いです！
株式会社分析屋について
弊社が作成を行いました分析レポートを、鎌倉市観光協会様HPに掲載いただきました。
ホームページはこちら。
noteでの会社紹介記事はこちら。
【すべての意思決定に人間らしさを】
分析屋は、「データ分析」と「おもてなし」を融合させた
「おもてなし分析」を提供するデータ分析集団です。
「おもてなし分析」によって、合理 (データ・ロジック) と 情理 (経験則・直感・想い・事情など) が共存し合う、合理一辺倒ではない成熟した社会の実現を目指しています。
【マーケティング】
マーケティング戦略上の目的に向けて、各種のデータ統合及び加工ならびにPDCAサイクル運用全般を支援や高度なデータ分析技術により複雑な課題解決に向けての分析サービスを提供いたします。
【システム】
アプリケーション開発やデータベース構築、WEBサイト構築、運用保守業務などお客様の問題やご要望に沿ってご支援いたします。
【ライフサイエンス】
機械学習や各種アルゴリズムなどの解析アルゴリズム開発サービスを提供いたします。過去には医療系のバイタルデータを扱った解析が主でしたが、今後はそれらで培った経験・技術を工業など他の分野の企業様の問題解決にも役立てていく方針です。
【SES】
SESサービスも行っております。
元の記事を確認する
