コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

Power Apps Code Apps + GitHub Copilot で Vibe Coding!


スポンサードリンク

はじめに

現在 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 を利用できるようにするために、管理センターより設定の変更を行います。

  1. Power Platform 管理センターにアクセス
  2. 管理 > 環境 より、Power Apps Code Apps を利用したい環境を選択
  3. "設定"を選択
  4. 製品 > 機能 を選択
  5. 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>,
)

github.com

更新が完了したら再び以下を実行します。

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 と違いセットアップが面倒な点が課題かもしれません。


スポンサードリンク