はじめに

現在 Early Access Preview の機能として Power Apps を Visual Studio Code (VSCode) などでコードファーストで開発を行えるような機能が提供されています。

github.com

特徴として以下のようなことが挙げられています。

ローカル開発と Power Platform 上で利用可能
Microsoft Entra 認証・認可を標準搭載
1,500以上の Power Platform コネクタを JavaScript から直接呼び出し可能
コマンドラインから簡単にアプリを Power Platform に公開・ホスト
組織のポリシー（共有制限、条件付きアクセス、DLP）を遵守

メリットとしては以下と紹介されていますね。

React、Angular、Vue などのカスタムコードを Power Platform 上でシームレスに実行
UI とロジックの完全制御
エンタープライズ認証
簡易なデプロイと ALM

動画でのこちらの機能の紹介は以下 YouTube をご確認ください。

www.youtube.com

こちらの記事では Power Apps Code Apps + GitHub Copilot で Vibe Coding を体験するところまで記載します。

Power Apps Code Apps を試す

前提条件

開発者ツール

Power Apps Code Apps を利用するためには以下が必要になってきます。

インストールがまだの場合はまずは上記のインストールをお願いします。

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"),
    },
  },
});

github.com

書き換えたら以下を実行して 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 のインストールを行います。

github.com

現時点では tag "v0.0.4" の "7-31-pa-client-power-code-sdk-0.0.1.tgz" が一番最新のようですので、こちらをインストールします。

github.com

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}</>;
}

github.com

続いて "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>,
)