はじめに
現在 Early Access Preview の機能として Power Apps を Visual Studio Code (VSCode) などでコードファーストで開発を行えるような機能が提供されています。
特徴として以下のようなことが挙げられています。
- ローカル開発と Power Platform 上で利用可能
- Microsoft Entra 認証・認可を標準搭載
- 1,500以上の Power Platform コネクタを JavaScript から直接呼び出し可能
- コマンドラインから簡単にアプリを Power Platform に公開・ホスト
- 組織のポリシー(共有制限、条件付きアクセス、DLP)を遵守
メリットとしては以下と紹介されていますね。
- React、Angular、Vue などのカスタムコードを Power Platform 上でシームレスに実行
- UI とロジックの完全制御
- エンタープライズ認証
- 簡易なデプロイと ALM
動画でのこちらの機能の紹介は以下 YouTube をご確認ください。
こちらの記事では Power Apps Code Apps + GitHub Copilot で Vibe Coding を体験するところまで記載します。
Power Apps Code Apps を試す
前提条件
開発者ツール
Power Apps Code Apps を利用するためには以下が必要になってきます。
- Visual Studio Code
- Node.js (LTS version)
- Git
- Power Apps CLI
インストールがまだの場合はまずは上記のインストールをお願いします。
Power Platform の環境設定
Power Apps Code Apps を利用できるようにするために、管理センターより設定の変更を行います。
- Power Platform 管理センターにアクセス
- 管理 > 環境 より、Power Apps Code Apps を利用したい環境を選択
- "設定"を選択
- 製品 > 機能 を選択
- Power Apps Code Apps の機能を有効化して保存
Power Apps Code Apps の機能が表示されない場合は以下を実行してくれとのことです。
[!NOTE]
If the Power Apps Code Apps setting doesn't appear in the admin center UI it is because a UI update hasn't reached your environment yet. You can get the setting to appear by appending a query string to the admin center URI. E.g.
https://admin.powerplatform.microsoft.com/manage/environments/1c137ea4-049e-ef11-8a66-000d3a106833/settings/Features to https://admin.powerplatform.microsoft.com/manage/environments/1c137ea4-049e-ef11-8a66-000d3a106833/settings/Features?ecs.ShowCodeAppSetting=true
ライセンス
Power Apps Premium licenseが必要なようです。
最初のプロジェクトを作成する
まずは YouTube に従って試してみようと思います。
VSCode を開き、ターミナル > 新しいターミナル より新しいターミナル(Ctrl + Shift + @)を起動します。
任意のディレクトリに移動して、以下コマンドを実行します。
npm create vite@latest MyFirstCodeApp -- --template react-ts
途中、実行していいか?という問いや、パッケージの名前を聞かれますので、適宜入力を行い進めて下さい。
次に ファイル > フォルダーを開く (Ctrl + K Ctrl + O)より、先ほど作成されたフォルダを選択します。
再びターミナルを起動させて以下を実行します。
npm install
次に Node.js の型定義ファイルのインストールを行います。
npm i --save-dev @types/node
実行が完了したら、"vite.config.ts"を以下の書き換えます。
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from "path"; // https://vite.dev/config/ export default defineConfig({ base: "./", server: { host: "::", port: 3000, }, plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, });
書き換えたら以下を実行して Web アプリを起動させてみましょう。
npm run dev
以下のように表示されると思いますので、"Ctrl" を押しながらクリックして開きます。
するとこのようなシンプルなページが表示されるかと思います。
確認が完了したら、VSCode に戻り、 Ctrl + C でサーバの停止を行います。
続いて、Power Platform テナントへの接続を行います。
以下を実行して認証情報の登録を行います。
pac auth create
サインインを行うポップアップが表示されるかと思いますので、任意のアカウントで認証を行ってください。
次に環境の選択を行います。
pac env select -env https://[Your Env].crm7.dynamics.com/
[Your Env]
の箇所は自身の環境にあわせて変更してください。
Code App の初期化を行います。
pac code init --displayName "My First Code App"
これにより "power.config.json" が作成されているはずです。
続いて Power SDK のインストールを行います。
現時点では tag "v0.0.4" の "7-31-pa-client-power-code-sdk-0.0.1.tgz" が一番最新のようですので、こちらをインストールします。
npm install --save-dev "@pa-client/power-code-sdk@https://github.com/microsoft/PowerAppsCodeApps/releases/download/v0.0.4/7-31-pa-client-power-code-sdk-0.0.1.tgz"
インストールが完了したら "package.json" を以下のように書き換えて、 npm run dev
を実行時に start pac code run
も実行されるように修正します。
{ "dev": "start pac code run && vite" }
{ "name": "myfirstcodeapp", "private": true, "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "dev": "start pac code run && vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^19.1.1", "react-dom": "^19.1.1" }, "devDependencies": { "@eslint/js": "^9.33.0", "@pa-client/power-code-sdk": "https://github.com/microsoft/PowerAppsCodeApps/releases/download/v0.0.4/7-31-pa-client-power-code-sdk-0.0.1.tgz", "@types/node": "^24.3.0", "@types/react": "^19.1.10", "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^5.0.0", "eslint": "^9.33.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", "typescript": "~5.8.3", "typescript-eslint": "^8.39.1", "vite": "^7.1.2" } }
次に "src" 配下に "PowerProvider.tsx" という TypeScipt ファイルの作成を行います。
以下をコピペします。
import { initialize } from "@pa-client/power-code-sdk/lib/Lifecycle"; import { useEffect, type ReactNode } from "react"; interface PowerProviderProps { children: ReactNode; } export default function PowerProvider({ children }: PowerProviderProps) { useEffect(() => { const initApp = async () => { try { await initialize(); console.log('Power Platform SDK initialized successfully'); } catch (error) { console.error('Failed to initialize Power Platform SDK:', error); } }; initApp(); }, []); return <>{children}</>; }
続いて "main.tsx" に PowerProvider を追加します。
import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.tsx' import PowerProvider from './PowerProvider.tsx' createRoot(document.getElementById('root')!).render( <StrictMode> <PowerProvider> <App /> </PowerProvider> </StrictMode>, )
更新が完了したら再び以下を実行します。
npm run dev
これにより今度は Power SDK Server も起動しますので、こちらの記載の URL にアクセスしてみます。
すると以下のように Power Apps が起動されることを確認することができます!
記載の通り、これはローカルで実行されているだけで、クラウド上で利用可能な状態にはなっていません。
なので次はこのアプリを Power Apps 上にプッシュしてあげましょう。
まずはこれらのビルドを行います。
npm run build
ビルドが完了したらコードのプッシュを行います。
pac code push
少し待つとアプリが正常にプッシュされたというメッセージと共に URL が返されるのでアクセスしてみます。
アプリを保存中... アプリが正常にプッシュされました。 次の URL からアプリをテストできます\nhttps://apps.powerapps.com/play/e/[Your Env ID]/a/[Your App ID]
問題なくできていれば、以下のようにアプリが公開されているはずです。
アプリ一覧にも"コード"という種類で追加されていますね。
こちらは Power Apps Studio 上からでは編集できないようです。
おわりに
長くなったのでいったんここで区切ります。
データやコネクタ接続などはまた別で。
Generative Pages と違い、こちらはコードを弄ることができるので、コードに慣れた開発者視点でいうといいかもしれませんね。
ただし、Generative Pages と違いセットアップが面倒な点が課題かもしれません。