2026年2月に一般提供（GA）された Power Apps の Code Apps ですが、GitHub Copilot / Claude Code と組み合わせた開発の進め方はその後さらに整理されました。これまで当ブログでは検証時点の手順を何本か紹介してきましたが、本記事ではギークフジワラが公開している開発標準リポジトリ geekfujiwara/CodeAppsDevelopmentStandard（AI ファースト開発標準）をもとに、現時点（2026年8月）で正しい Code Apps 開発の始め方を「概要」「環境準備」「使い方」の3つに分けて解説します。
これまで公開した検証記事（Code Apps の開発環境構築、Copilot Studio × Code Apps × Dataverse 開発など）は、いずれも検証当時の手順として残しています。今後の Code Apps 開発は本記事とこのリポジトリを起点に進めてください。
目次
概要
Power Apps Code Apps とは
Power Apps Code Apps は、React や Vue、TypeScript といった標準的な Web 技術でコードを書きながら、Microsoft Entra 認証や 1,500 以上のコネクタ、Power Platform のガバナンス・セキュリティポリシーをそのまま活用できる新しいアプリ開発スタイルです。
ローコードのキャンバスエディタを使わず、使い慣れた IDE でプロコード開発ができ、開発資産を セキュアなPower Platform 環境に持ち込める点が最大の特徴です。
AI ファースト開発標準とは
geekfujiwara/CodeAppsDevelopmentStandard は、Power Apps Code Apps・モデル駆動型アプリ・Generative page・Dataverse・Power Automate・Power Pages・Copilot Studio に加え、Azure サービスや Cowork のプラグインまでを、VS Code + GitHub Copilot / Claude Code で開発するための実践的な開発標準リポジトリです。実装標準は TypeScript + React + Tailwind CSS + shadcn/ui を前提にしています。
このリポジトリが提供するものは以下のとおりです。
- Power Platform / Azure 向け AI ファースト開発標準（各製品ごとのスキル・リファレンス）
- GitHub Copilot / Claude Code 用のカスタムエージェント・スキル一式
- Power Automate / Copilot Studio 連携の実装パターン
- リファレンス実装サンプル（営業支援・経費精算アプリなど）
.env.exampleを含むプロジェクト初期化テンプレート
このリポジトリは開発標準（スキル・リファレンス）の供給元です。新しいテーマは
npx degitでこのリポジトリの.github/（エージェント・スキル）を取得し、@GeekPowerCode にプロジェクト全体の scaffold を依頼して開発を開始します。
使い方を実際の画面つきで解説した動画も公開されています。前提条件のつまづきどころも紹介されているので、これから始める方はあわせてご覧ください。
環境準備
専用環境とライセンス要件
デフォルト環境（Default）では開発しないでください。組織全員が参照できる共有環境のため、テーブルやソリューションが意図せず他ユーザーに見えてしまいます。必ず専用の Developer 環境または Sandbox 環境を用意してください。
Code Apps（コードファースト開発）には以下のいずれかのライセンスが必要です。
| ライセンス | Code Apps 利用 |
|---|---|
| Power Apps Premium | ✅ |
| Dynamics 365 Enterprise / Customer Engagement | ✅ |
| Microsoft 365（E1/E3/E5） | ❌ 不可 |
| Power Apps 試用版（Trial） | △ 一時的に可 |
Code Apps を環境で有効化する
Code Apps は初期状態では無効です。開発前に管理センターで有効化してください。
- Power Platform 管理センターを開く
- 「環境」＞対象の環境を選択＞「設定」＞「製品」＞「機能」
- 「Power Apps コード アプリ」をオンにして保存
VS Code / GitHub Copilot のインストール
VS Code と GitHub Copilot がまだの方は、まず以下を実施します（所要5分）。
| ステップ | 操作 |
|---|---|
| 1. VS Code をインストール | code.visualstudio.com からダウンロード→インストール |
| 2. GitHub Copilot 拡張をインストール (現在組み込みのため不要) | 拡張機能（Ctrl+Shift+X）で「GitHub Copilot」を検索→インストール (現在組み込みのため不要) |
| 3. GitHub アカウントでサインイン | 左下のアカウントアイコン→GitHub でサインイン（Copilot サブスクリプションが必要） |
| 4. Copilot チャットを開く | Ctrl+Alt+I（Mac: ⌃⌘I）または左サイドバーのチャットアイコン |
Copilot チャットが開いたら、リポジトリの README にある「環境準備プロンプト」をそのまま貼り付けて送信すると、PowerShell 7 / Git / Node.js LTS / Python 3.12 / Power Platform CLI（PP CLI）の導入と動作確認までを自動で行ってくれます（リポジトリの clone や npm install はこの時点では行いません）。
Windows 環境の場合、PS7 への切り替えが未解決でも進められるよう、PowerShell 7 の実体パスを優先して実行させるのがポイントです。詳細な貼り付け用プロンプトは README の「環境準備プロンプト」セクションを参照してください。
使い方
クイックスタート（個人でのプロトタイピング）
テーマ用のワークスペースフォルダを開いた状態で、以下のコマンドを実行してエージェント・スキルと .gitignore を取得します。
npx degit geekfujiwara/CodeAppsDevelopmentStandard/.github .github && cp .github/skills/standard/references/gitignore-template .gitignore.gitignore がないと node_modules/・dist/・.power/・.env 等がコミット対象になってしまうため、必ずコピーしてください。
取得後は、VS Code の Copilot チャットで @GeekPowerCode に新規テーマ開発を依頼します。spec/input/ フォルダに既存の仕様書や画像を置いて /spec-to-markdown で依頼することもできます。エージェントが Vite + React + Tailwind CSS + shadcn/ui のプロジェクト一式を scaffold し、デザインテンプレート選択・Dataverse 接続・デプロイまでをガイドしてくれます。
チーム開発のためにリモートを用意する場合
最初からチーム用の private リポジトリを作りたい場合は、以下を実行します。
# 1. GitHub 上で空の private リポジトリを作成してクローン
gh repo create <your-account>/<your-theme-repo> --private --clone && cd <your-theme-repo>
# 2. エージェント・スキルと .gitignore を取得
npx degit geekfujiwara/CodeAppsDevelopmentStandard/.github .github && cp .github/skills/standard/references/gitignore-template .gitignore
# 3. @GeekPowerCode にプロジェクト scaffold を依頼Azure DevOps や社内 Git、ローカル NAS など GitHub 以外のリモートを使う場合も、同じ手順で git remote add origin <url> を実行すれば GitHub には何も公開せずに済みます。
開発標準のアップデートを取り込む
git merge は不要です。テーマのリポジトリで以下を再実行するだけで、最新の開発標準（.github/ のエージェント・スキル）に追従できます。同期対象は .github/ のみで、テーマ固有のコード（src/ 等）には触れません。
npx degit geekfujiwara/CodeAppsDevelopmentStandard/.github .github --force同期後は git diff で差分を確認してからコミットしてください。
スキルカタログ（14スキル）
スキルは製品単位で統合されており、カテゴリごとに以下のように整理されています。
| カテゴリ | スキル |
|---|---|
| architecture（アーキテクチャ・基盤） | architecture / standard / update-skills |
| data（データ層） | dataverse |
| ui（UI・フロントエンド） | code-apps / power-pages / generative-page / model-driven-app |
| automation（自動化） | copilot-studio / copilot-studio-v2 / power-automate / cowork |
| ai（AI・プロンプト） | ai-builder / spec-to-markdown |
| samples（サンプル管理） | package-sample |
各スキルの詳しい説明は スキルカタログ（.github/skills/README.md）で一元管理されています。
推奨開発フロー
@GeekPowerCode は、必要に応じて以下の順序でスキルを選択しながら開発を進めます。
- spec-to-markdown（既存仕様書がある場合のみ）― factsheet / document に正規化
- architecture ― 全体設計・コンポーネント選定
- standard ― 共通基盤（認証・環境変数）の確認
- dataverse ― テーブル設計・構築・セキュリティロール設定
- code-apps / power-pages / generative-page / model-driven-app のいずれか ― UI 開発・デプロイ
- power-automate ― フロー作成
- copilot-studio ― エージェント構築・トリガー追加
- ai-builder ― AI プロンプト追加
- cowork ― Cowork プラグイン化・公開・更新
GitHub Copilot では .github/agents/ と .github/skills/ が、Claude Code では .claude/agents/ 経由で同じスキル群が認識されます。どちらのエージェントを使う場合も、@GeekPowerCode に実現したいことを伝えるだけで、必要なスキルが自動的に選択されて開発が進みます。
まとめ
Power Apps Code Apps を含む Power Platform 開発は、マニュアル手順ベースではなく、開発標準リポジトリとカスタムエージェント（@GeekPowerCode）駆動で進めるのが現時点で正しいやり方です。過去に公開した検証記事もあわせて参考にしつつ、実際に手を動かす際は必ず本記事とリポジトリの最新内容を参照してください。
開発標準は継続的にアップデートされています。最新情報は必ず GitHub リポジトリを確認してください。
