Power Apps Code Apps プロジェクト スキャフォルディング

あなたは Power Apps Code Apps の構築を専門とするエキスパート Power Platform 開発者です。Microsoft のベストプラクティスと現在のプレビュー機能に従って、完全な Power Apps Code App プロジェクトをスキャフォルディングすることがあなたのタスクです。

コンテキスト

Power Apps Code Apps (プレビュー) により、開発者はコードファースト アプローチを使用してカスタム ウェブ アプリケーションを構築しながら、Power Platform の機能と統合することができます。これらのアプリは 1,500 以上のコネクタにアクセスでき、Microsoft Entra 認証を使用でき、管理対象の Power Platform インフラストラクチャ上で実行できます。

タスク

以下のコンポーネントを含む完全な Power Apps Code App プロジェクト構造を作成します。

1. プロジェクト初期化

• Code Apps 向けに設定された Vite + React + TypeScript プロジェクトをセットアップ
• プロジェクトをポート 3000 で実行するように設定 (Power Apps SDK で必須)
• Power Apps SDK (@microsoft/power-apps ^0.3.1) をインストールして設定
• PAC CLI でプロジェクトを初期化 (pac code init)

2. 必須設定ファイル

• vite.config.ts: Power Apps Code Apps の要件に対応するように設定
• power.config.json: Power Platform メタデータ用の PAC CLI で生成されるファイル
• PowerProvider.tsx: Power Platform 初期化用の React プロバイダー コンポーネント
• tsconfig.json: Power Apps SDK 互換の TypeScript 設定
• package.json: 開発とデプロイメント用のスクリプト

3. プロジェクト構造

整理された フォルダ構造を作成します:

src/
├── components/          # 再利用可能な UI コンポーネント
├── services/           # 生成されたコネクタ サービス (PAC CLI で作成)
├── models/            # 生成された TypeScript モデル (PAC CLI で作成)
├── hooks/             # Power Platform 統合用のカスタム React フック
├── utils/             # ユーティリティ関数
├── types/             # TypeScript 型定義
├── PowerProvider.tsx  # Power Platform 初期化コンポーネント
└── main.tsx          # アプリケーション エントリ ポイント

4. 開発スクリプト セットアップ

公式 Microsoft サンプルに基づいて package.json スクリプトを設定します:

• dev: "concurrently "vite" "pac code run"" 並列実行用
• build: "tsc -b && vite build" TypeScript コンパイルと Vite ビルド用
• preview: "vite preview" 本番環境プレビュー用
• lint: "eslint ." コード品質チェック用

5. サンプル実装

以下を示す基本的なサンプルを含めます:

• PowerProvider コンポーネントを使用した Power Platform 認証と初期化
• サポートされているコネクタの少なくとも 1 つへの接続 (Office 365 Users 推奨)
• 生成されたモデルとサービスを用いた TypeScript の使用
• try/catch パターンを使用したエラー ハンドリングと読み込み状態
• Fluent UI React コンポーネントを使用したレスポンシブ UI (公式サンプルに従う)
• useEffect と非同期初期化を用いた適切な PowerProvider 実装

検討すべき高度なパターン (オプション)

• マルチ環境設定: dev/test/prod のための環境固有の設定
• オフラインファースト アーキテクチャ: オフライン機能のためのサービス ワーカーとローカル ストレージ
• アクセシビリティ機能: ARIA 属性、キーボード ナビゲーション、スクリーン リーダー サポート
• 国際化セットアップ: マルチ言語対応のための基本的な i18n 構造
• テーム システム基盤: ライト/ダーク モードの切り替え実装
• レスポンシブ デザイン パターン: ブレークポイント システムによるモバイルファースト アプローチ
• アニメーション フレームワーク統合: スムーズなトランジション用の Framer Motion

6. ドキュメント

包括的な README.md を作成して以下を含めます:

• 前提条件とセットアップ手順
• 認証と環境設定
• コネクタセットアップとデータ ソース設定
• ローカル開発とデプロイメント プロセス
• よくあるトラブルシューティング

実装ガイドライン

記述する前提条件

• Power Platform Tools 拡張機能を搭載した Visual Studio Code
• Node.js (LTS バージョン - v18.x または v20.x 推奨)
• バージョン管理のための Git
• Power Platform CLI (PAC CLI) - 最新版
• Code Apps が有効な Power Platform 環境 (管理者設定が必須)
• エンド ユーザー向けの Power Apps Premium ライセンス
• Azure SQL またはその他の Azure コネクタを使用する場合は Azure アカウント

含める PAC CLI コマンド

• pac auth create --environment {environment-id} - 特定の環境で認証
• pac env select --environment {environment-url} - ターゲット環境を選択
• pac code init --displayName "App Name" - コード アプリ プロジェクトを初期化
• pac connection list - 利用可能な接続を一覧表示
• pac code add-data-source -a {api-name} -c {connection-id} - コネクタを追加
• pac code push - Power Platform にデプロイ

公式にサポートされているコネクタ

セットアップ例を含めて、以下の公式にサポートされているコネクタに焦点を当てます:

• SQL Server (Azure SQL を含む): 完全な CRUD 操作、ストアド プロシージャ
• SharePoint: ドキュメント ライブラリ、リスト、サイト
• Office 365 Users: プロファイル情報、ユーザー写真、グループ メンバーシップ
• Office 365 Groups: チーム情報とコラボレーション
• Azure Data Explorer: 分析とビッグ データ クエリ
• OneDrive for Business: ファイル ストレージと共有
• Microsoft Teams: チーム コラボレーションと通知
• MSN Weather: 天気データ統合
• Microsoft Translator V2: マルチ言語翻訳
• Dataverse: 完全な CRUD 操作、リレーションシップ、ビジネス ロジック

サンプル コネクタ統合

Office 365 Users の動作例を含めます:

// 例: 現在のユーザー プロファイルを取得
const profile = await Office365UsersService.MyProfile_V2("id,displayName,jobTitle,userPrincipalName");

// 例: ユーザー写真を取得
const photoData = await Office365UsersService.UserPhoto_V2(profile.data.id);

文書化すべき現在の制限事項

• Content Security Policy (CSP) はまだサポートされていない
• Storage SAS IP 制限はサポートされていない
• Power Platform Git 統合がない
• Dataverse ソリューションのサポートがない
• ネイティブの Azure Application Insights 統合がない

含めるべきベストプラクティス

• ローカル開発にはポート 3000 を使用 (Power Apps SDK で必須)
• TypeScript 設定で verbatimModuleSyntax: false を設定
• base: "./" と適切なパス エイリアスを使用して vite.config.ts を設定
• 機密データはアプリ コードではなくデータ ソースに保存
• Power Platform 管理プラットフォーム ポリシーに従う
• コネクタ操作のための適切なエラー ハンドリングを実装
• PAC CLI から生成された TypeScript モデルとサービスを使用
• 適切な非同期初期化とエラー ハンドリングを含む PowerProvider を実装

成果物

1. すべての必要なファイルを含む完全なプロジェクト スキャフォルディング
2. コネクタ統合を備えた動作中のサンプル アプリケーション
3. 包括的なドキュメントとセットアップ手順
4. 開発とデプロイメント スクリプト
5. Power Apps Code Apps に最適化された TypeScript 設定
6. ベストプラクティス実装の例

生成されたプロジェクトが Microsoft の公式 Power Apps Code Apps ドキュメントと https://github.com/microsoft/PowerAppsCodeApps の サンプルに従い、pac code push コマンドを使用して Power Platform に正常にデプロイできることを確認します。