Power Apps Code Apps でプロコード開発の準備をする

はじめに

直近でPower Platformに触る機会が増えそうなので、調べ込みを行っていると、なんとなんと、Powewr AppsアプリをReact + Typescriptコーディングで作成できる、Power Apps Code Appsなるものがあるじゃないですか。
ローコード/ノーコードももちろん良いのですが、やはり.NETを使用してプログラムを書いてきた身としてはプロコードで調整したいタイミングもあり、本記事作成に至ります。

Power Appsとは

Power Apps は、一連のアプリ、サービス、コネクタ、およびデータ プラットフォームであり、ビジネス ニーズに合わせてカスタム アプリを構築するための迅速な開発環境を提供します。 Power Apps を使用すると、基になるデータ プラットフォーム (Microsoft Dataverse) または多くのオンラインおよびオンプレミスのデータ ソース (SharePoint、Microsoft 365、Dynamics 365、SQL Server など) に格納されているデータに接続するカスタム ビジネス アプリをすばやく構築できます。

いわずもがな、Dynamics365から発展、拡張、独立したPower Platform統合環境のUIアプリ開発を担う、ノーコード/ローコード開発プラットフォームがPower Appsです。

Power Apps Code Apps とは

コード アプリ を使用すると、開発者は Power Apps の機能を、コード優先 IDE に組み込まれたカスタム Web アプリに取り込みます。 Power Platform では、ローカルで開発し、同じアプリを実行できます。 UI とロジックを完全に制御しながら、一般的なフレームワーク (React、Vue など) を使用して構築します。

Code Apps環境の概要

HTML または TypeScript/JavaScript アプリは、コード アプリ テクノロジを使用するための前提条件です。 コード アプリでは、Single-Page アプリケーション (SPA) がサポートされます。 Power Platform CLI と Power Apps SDK を使用すると、アプリで Power Platform コネクタを使用し、Power Platform 環境でホストできます。

現在はプレビュー機能ですが、
要するに、React + TypescriptでコーディングされたWebアプリをPower Appsでホストできますよ、という理解です。普通にうれしい。

Power Apps Code Apps の利用・公開には、Power Apps の Premium ライセンスが必要です。

前提

Entra ID 上にPower Apps Studioにサインインできる組織ユーザーは作成済みとします。

環境

• Visual Studio Code

• 拡張機能

  • Power Platform Tools
    Power Platform Tools は、Visual Studio Code 上で Microsoft Power Platform の開発を支援する拡張機能で、CLI 操作やアプリのソース管理を簡単に行えます。Power Apps や Power Automate の開発を効率化するためのツールです。本拡張機能をインストールすることで、pacコマンドなどをVS Code上で使用可能となります。

• node.js(LTS)

構築

いざいざCode Apps を構築します。大きく以下を実施します。

1. PowerPlatform管理センターでCode Appsの許可
2. Code Appsのベース作成

1. PowerPlatform管理センターでCode Appsの許可

PowerPlatform管理センターでCode Appsの使用許可を行います。

PowerPlatform管理センターのリンク

PowerPlatform管理センターへ、環境設定を変更できるロール(下記いずれか)が付与されているユーザーでサインインします。

• 環境管理者 (Environment Admin)
• システム管理者 (System Administrator)
• 環境作成者 (Environment Maker)

PowerPlatform管理センターでCode Appsの使用を許可したい環境を選択します。

環境設定の環境URLは、後で使用するので覚えておきます。
上段メニューの「設定」ページを開きます。

環境内の「製品」 --> 「機能」ページを開きます。

機能設定ページ内の「Power Apps コードアプリ」の項目を、
ONに変更し、「保存」押下します。

PowerPlatform管理センターでの環境設定は以上です。
「Power Apps コードアプリ」をONしていないと、後の環境へのプッシュ時にエラーとなりますので、ご注意ください。

2. Code Appsのベース作成

Microsoft Learnに従って、Code Apps のベースを作成します。

実施する内容としては、上記MS Learnに記載されている内容に沿うだけの形になってしまいますが、できるだけ実際のキャプチャー画像などを添えて、視認性を高めたいと思います。

アプリプロジェクトの作成

まずはPA-CODE-APPS-TESTという本プロジェクト用のフォルダを作成し、VS Codeで開きます。
その後、Viteを使用して、React + Typescriptのアプリプロジェクトを作成します。アプリプロジェクトの名称は「my-code-app」としています。

npm create vite@latest my-code-app -- --template react-ts

Viteについて

Vite（ヴィート）は、Vue.jsの作者Evan You氏が開発した超高速なフロントエンド開発用ビルドツールです。ネイティブESモジュールを活用して開発サーバーを即時起動し、変更部分だけを反映するHMR（Hot Module Replacement）で効率的な開発体験を提供します。

実行すると、いくつかViteから質問の回答は以下を指定します。

• framework : React
• variant : TypeScript

無事、アプリプロジェクトが作成されました。

以降はmy-code-appに移動し、作業を行います。

cd .\my-code-app

ローカルデバッグ用設定

ローカルでのデバッグ設定を行います。
以下を使用してノード・タイプ定義をインストールします。

npm i --save-dev @types/node

また、現時点のPower Apps SDKでは、既定の構成でポートが 3000 である必要があるようなので、vite.config.ts以下のように編集します。

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+ import * as path from 'path'

+ // https://vite.dev/config/
+ export default defineConfig({
+   base: "./",
+   server: {
+     host: "::",
+     port: 3000,
+   },
+   plugins: [react()],
+   resolve: {
+     alias: {
+       "@": path.resolve(__dirname, "./src"),
+     },
+   },
+ });

ここまでできれば、以下コマンドでViteローカルサーバーを起動できるはずなので、一度、実行確認します。

npm run dev

無事、localhostポート3000でVite作成のReactアプリに接続できました。

Power Appsがホストするように環境用に整理

認証接続

以下コマンドを実行し、PowerPlatform環境への認証接続を確立します。

pac auth create

コマンドを実行すると、ブラウザが立ち上がりますの指示に従ってサインインします。

サインイン後、ターミナルに「認証プロファイルが作成されました」と表示されれば成功です。

環境選択

続いて、ターゲットとする環境を設定します。
1. PowerPlatform管理センターでCode Appsの許可でメモした環境URL、または、以下のようにPower Apps Studioのページから環境URLを特定します。

1. ターゲットとする環境を選択します。

2. 右上の設定「⚙」を押下します。

3. 「セッション詳細」を押下します。
   

4. 「Power Appsセッションの詳細」内のInstance urlが環境URLです。
   

以下コマンドで、特定した環境URLを指定し実行します。

pac env select --environment <環境URL>

以下のようなメッセージが表示されれば成功です。

Code Apps初期化

power.config.jsonの作成

以下のコマンドで 、このアプリプロジェクトが「ただの Web アプリではなく、Power Platform と連携する特別なコードアプリ」であることを設定します。

pac code init --displayName "My Code App"

成功すれば上記のコマンドとともに、以下のようなpower.config.jsonがプロジェクトフォルダ内に作成されます。

power.config.json

{
  "appId": "XXX",
  "appDisplayName": "My Code App",
  "description": null,
  "environmentId": "YYY",
  "buildPath": "./dist",
  "buildEntryPoint": "index.html",
  "logoPath": "Default",
  "localAppUrl": "http://localhost:3000/",
  "connectionReferences": {},
  "databaseReferences": {}
}

Power Apps SDKの追加

続いて、Power Platformの機能をReact + Typescriptのアプリから呼び出すための、Power Apps SDKをインストールします。
以下のコマンドを実行します。

npm install --save-dev "@microsoft/power-apps"

npm run dev の編集

また、npm run dev コマンドでVite と PAC を同時起動できるよう、package.json を以下のように編集します。

package.json

"scripts": {
+ "dev": "start pac code run && vite",
  "build": "tsc -b && vite build",
  "lint": "eslint .",
  "preview": "vite preview"
},

Power Apps用コードの追記

本アプリプロジェクトのsrcフォルダ内にPowerProvider.tsxファイルを作成します。
以下のGitHubからコードを取得し、PowerProvider.tsxファイルを作成します。
https://github.com/microsoft/PowerAppsCodeApps/blob/main/docs/assets/PowerProvider.tsx

PowerProvider.tsx

import { initialize } from "@microsoft/power-apps/app";
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でAppを追加したPowerProviderで囲むように追記編集します。

main.tsx

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>,
)

最小構成Code Appsの最終的なフォルダ構成は以下のようになります。本格的な開発が始まると、srcフォルダ内を中心に編集していくことになります。

my-code-app/
├── .vscode/
│   └── settings.json                // VS Code のローカル設定
├── .github/
│   └── copilot-instructions.md      // Copilot 用のガイド/方針
├── .cursor/
│   └── rules/
│       └── powersdkcli.mdc          // 開発ルール（Cursor 用）
├── public/                          // 公開静的ファイル（favicon 等）
├── src/                             // アプリ本体（React + TS 想定）
│   ├── App.tsx                      // ルートコンポーネント
│   ├── App.css                      // コンポーネント用スタイル
│   ├── index.css                    // グローバルスタイル
│   ├── main.tsx                     // エントリスクリプト（React 取付け）
│   ├── PowerProvider.tsx            // Power Apps連携のプロバイダー/コンテキスト
│   └── assets/                      // 画像・アイコン等のアセット
├── index.html                       // HTML エントリ（Vite）
├── package.json                     // 依存関係と npm スクリプト
├── vite.config.ts                   // Vite 設定
├── eslint.config.js                 // ESLint 設定
├── tsconfig.json                    // TypeScript 共通設定
├── tsconfig.app.json                // TypeScript 設定（アプリ用）
├── tsconfig.node.json               // TypeScript 設定（Node 用）
├── power.config.json                // Power Apps関連の設定
└── README.md                        // プロジェクト概要と使い方

以上でCode Appsのベース準備は完了です。

動作確認

動作確認を行います。まずはビルドが必要なので以下コマンドで本アプリプロジェクトをビルドします。

npm run build

ビルドが成功すると、distフォルダにビルド成果物が作成されます。

デバッグ実行や環境では、このdistフォルダに作成されたビルド成果物が実際に動作することになります。

デバッグ実行

前項までの設定を行うことで、npm run devコマンドを実行すると、 Vite サーバーとPower Apps SDK サーバーが起動します。

Power Apps SDKサーバーにアクセスするには、npm run devで起動したコマンドプロンプトに表示されているURLにアクセスすることで、ローカルで動作を確認できます。

ローカル実行の場合は、ページ上段に「このアプリはローカルモードで実行されています。」と表示されます。

環境へデプロイ実行

いよいよ環境へデプロイを行います。
デプロイは以下のコマンドで実施します。

pac code push

実行後、成功すれば以下のようなメッセージがターミナル上で表示されます。

ターミナルに表示されるURLにアクセスすることで、デプロイしたCode Appsを操作することができます。

無事、デプロイされたCode Appsにアクセスすることができました。感無量。

まとめ

というわけで、Power Apps Code Appsを最小構成で作成し、実行してみました。
余力があればCode Apps 上でのコネクタの使用なども試してみたいです。
Code Appsは、2025年10月時点でプレビュー機能ですが、昨今はAIコーディングも盛んなこともあり、ローコード/ノーコードとプロコードのおいしいとこ取りな機能になっていくのではなかろうか、と期待しています。

本記事が少しでも何かのお役に立てれば幸いです。

参考

• Microsoft Learn Power Apps のコード アプリ (プレビュー) ドキュメント

• GitHub Power Apps code apps (preview)

• React + Power Platform CLIで作る！はじめてのコードアプリ開発

• Code Apps の開発環境を整えよう 〜プロ開発のコードで最初のアプリを作成してPower Platform にデプロイする〜

• Power Appsにおけるコードアプリ:ローコードの世界でのプロコードの潜在能力の獲得